/* ======================================================================
* Kamu1 Premium News — Enhancements Layer (v1.0)
* ----------------------------------------------------------------------
* theme.css üstüne binen modüler iyileştirme katmanı.
* P1 Hızlı kazanç + P3 Modern CSS + P5 UX micro + P6 Dark mode + P7 A11y
* Tema güncellenince bu dosya değişmez, korunur.
* ====================================================================== */
/* ----------------------------------------------------------------------
* 1) TOKEN GENİŞLETMELERİ — mevcut --kamu1-* sistemine eklemeler
* ---------------------------------------------------------------------- */
:root {
/* Shadow scale (mevcut sadece 2 token; 78 unique shadow vardı, sistematize) */
--kamu1-sh-xs: 0 1px 2px rgba(11,18,32,.05);
--kamu1-sh-sm: 0 2px 6px rgba(11,18,32,.06), 0 1px 2px rgba(11,18,32,.04);
--kamu1-sh-md: 0 8px 18px rgba(11,18,32,.07), 0 2px 4px rgba(11,18,32,.04);
--kamu1-sh-lg: 0 14px 34px rgba(11,18,32,.09), 0 4px 8px rgba(11,18,32,.05);
--kamu1-sh-xl: 0 22px 50px rgba(11,18,32,.13), 0 8px 16px rgba(11,18,32,.06);
--kamu1-sh-brand: 0 12px 40px color-mix(in oklab, var(--kamu1-red) 32%, transparent);
/* Motion tokens */
--kamu1-ease-out: cubic-bezier(.22, 1, .36, 1);
--kamu1-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
--kamu1-ease-in-out: cubic-bezier(.65, 0, .35, 1);
--kamu1-dur-1: 120ms;
--kamu1-dur-2: 180ms;
--kamu1-dur-3: 260ms;
--kamu1-dur-4: 400ms;
/* Focus ring (brand-aware) */
--kamu1-focus: 0 0 0 3px color-mix(in oklab, var(--kamu1-red) 32%, transparent),
0 0 0 1px var(--kamu1-red);
/* WCAG AAA için daha güçlü muted (mevcut #667085 AA pass, AAA fail) */
--kamu1-muted-strong: #475569;
--kamu1-ink-aaa: #0f172a;
/* Renk varyasyonları (color-mix ile dinamik) */
--kamu1-red-soft: color-mix(in oklab, var(--kamu1-red) 10%, var(--kamu1-surface));
--kamu1-red-hover: color-mix(in oklab, var(--kamu1-red) 88%, #000);
--kamu1-gold-soft: color-mix(in oklab, var(--kamu1-gold) 14%, var(--kamu1-surface));
--kamu1-blue-soft: color-mix(in oklab, var(--kamu1-blue) 12%, var(--kamu1-surface));
/* Renk şeması */
color-scheme: light;
}
/* ----------------------------------------------------------------------
* 2) DARK MODE — sistem tercihi + manuel toggle (data-theme="dark")
* ---------------------------------------------------------------------- */
:root[data-theme="dark"] , :root[data-kamu1-theme="dark"] {
color-scheme: dark;
--kamu1-bg: #0b1220;
--kamu1-surface: #111a2c;
--kamu1-surface-2: #1b2540;
--kamu1-ink: #f1f5f9;
--kamu1-ink-soft: #cbd5e1;
--kamu1-ink-aaa: #f8fafc;
--kamu1-body-text: #cbd5e1;
--kamu1-muted: #94a3b8;
--kamu1-muted-strong: #cbd5e1;
--kamu1-line: #1f2a44;
--kamu1-night: #050b18;
--kamu1-night-2: #0a1426;
--kamu1-red-soft: color-mix(in oklab, var(--kamu1-red) 24%, #000);
--kamu1-blue-soft: color-mix(in oklab, var(--kamu1-blue) 28%, #000);
--kamu1-gold-soft: color-mix(in oklab, var(--kamu1-gold) 22%, #000);
}
/* ----------------------------------------------------------------------
* 3) GLOBAL polish — body
* ---------------------------------------------------------------------- */
body {
font-feature-settings: "ss01" on, "cv11" on, "cv02" on, "kern" on;
background-color: var(--kamu1-bg);
color: var(--kamu1-body-text);
transition: background-color var(--kamu1-dur-3) var(--kamu1-ease-out),
color var(--kamu1-dur-3) var(--kamu1-ease-out);
}
html { scroll-behavior: smooth; }
/* Dark mode'da görsel hafiflet (gece okuma) */
/* ----------------------------------------------------------------------
* 4) BAŞLIK & PARAGRAF — text-wrap modern özelliği
* ---------------------------------------------------------------------- */
h1, h2, h3, .kamu1-app-hero-slide h2, .kamu1-news-card h3,
.kamu1-dynamic-home-section h2 {
text-wrap: balance;
}
p, .kamu1-news-card-body p, .kamu1-article p {
text-wrap: pretty;
}
.kamu1-news-card h3 a,
.kamu1-app-hero-slide h2 {
letter-spacing: -0.02em;
}
/* ----------------------------------------------------------------------
* 5) FOCUS RING — tüm interaktif elementlerde
* ---------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
outline: none;
box-shadow: var(--kamu1-focus);
border-radius: var(--kamu1-radius-sm);
transition: box-shadow var(--kamu1-dur-1) var(--kamu1-ease-out);
}
/* Skip-link modern hâli */
.kamu1-skip-link:focus {
clip: auto !important;
height: auto;
width: auto;
left: 12px;
top: 12px;
z-index: 100000;
background: var(--kamu1-surface);
color: var(--kamu1-red);
border: 2px solid var(--kamu1-red);
border-radius: var(--kamu1-radius-sm);
padding: 12px 16px;
font-weight: 700;
text-decoration: none;
box-shadow: var(--kamu1-sh-lg);
}
/* ----------------------------------------------------------------------
* 6) prefers-reduced-motion saygısı
* ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.kamu1-breaking-loop { animation: none !important; }
}
/* ----------------------------------------------------------------------
* 7) NEWS CARD micro-interactions (mevcut yapı korunur)
* ---------------------------------------------------------------------- */
.kamu1-news-card {
transition: transform var(--kamu1-dur-2) var(--kamu1-ease-out),
box-shadow var(--kamu1-dur-2) var(--kamu1-ease-out),
border-color var(--kamu1-dur-2) var(--kamu1-ease-out);
}
.kamu1-news-card:has(a:hover),
.kamu1-news-card:hover {
transform: translateY(-4px);
box-shadow: var(--kamu1-sh-lg);
}
.kamu1-news-card:has(a:active) {
transform: translateY(-1px);
box-shadow: var(--kamu1-sh-md);
transition-duration: var(--kamu1-dur-1);
}
.kamu1-news-card-media {
overflow: hidden;
display: block;
}
.kamu1-news-card-media img {
transition: transform 600ms var(--kamu1-ease-out), opacity var(--kamu1-dur-3) var(--kamu1-ease-out);
}
.kamu1-news-card:hover .kamu1-news-card-media img {
transform: scale(1.04);
}
.kamu1-news-card h3 a {
transition: color var(--kamu1-dur-1) var(--kamu1-ease-out);
}
.kamu1-news-card h3 a:hover { color: var(--kamu1-red); }
/* ----------------------------------------------------------------------
* 8) KATEGORİ CHIP iyileştirme
* ---------------------------------------------------------------------- */
.kamu1-badge,
.kamu1-card-meta .kamu1-badge {
letter-spacing: 0.05em;
text-transform: uppercase;
font-feature-settings: "tnum" on;
}
/* ----------------------------------------------------------------------
* 9) BUTTON polish
* ---------------------------------------------------------------------- */
.kamu1-button {
transition: transform var(--kamu1-dur-1) var(--kamu1-ease-out),
box-shadow var(--kamu1-dur-2) var(--kamu1-ease-out),
background-color var(--kamu1-dur-1) var(--kamu1-ease-out);
will-change: transform;
}
.kamu1-button:hover { transform: translateY(-1px); box-shadow: var(--kamu1-sh-md); }
.kamu1-button:active { transform: translateY(0); transition-duration: var(--kamu1-dur-1); }
/* ----------------------------------------------------------------------
* 10) MEGA MENU — micro-interactions
* ---------------------------------------------------------------------- */
.kamu1-mega-menu a {
transition: color var(--kamu1-dur-1) var(--kamu1-ease-out),
background-color var(--kamu1-dur-1) var(--kamu1-ease-out);
border-radius: var(--kamu1-radius-sm);
}
.kamu1-mega-menu a:hover {
background: var(--kamu1-red-soft);
color: var(--kamu1-red);
}
/* ----------------------------------------------------------------------
* 11) SEARCH OVERLAY — recent searches alanı için
* ---------------------------------------------------------------------- */
.kamu1-search-recent {
display: flex; flex-wrap: wrap; gap: 8px;
margin-top: 16px;
}
.kamu1-search-recent-item {
background: var(--kamu1-surface-2);
color: var(--kamu1-ink-soft);
padding: 8px 14px;
border-radius: 999px;
font-size: 13px; font-weight: 500;
transition: all var(--kamu1-dur-1) var(--kamu1-ease-out);
border: 1px solid var(--kamu1-line);
}
.kamu1-search-recent-item:hover {
background: var(--kamu1-red-soft);
color: var(--kamu1-red);
border-color: transparent;
}
/* ----------------------------------------------------------------------
* 12) DARK MODE TOGGLE — header'a eklenecek buton
* ---------------------------------------------------------------------- */
.kamu1-theme-toggle {
position: relative;
width: 40px; height: 40px;
border-radius: 999px;
background: var(--kamu1-surface-2);
border: 1px solid var(--kamu1-line);
color: var(--kamu1-ink-soft);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: all var(--kamu1-dur-2) var(--kamu1-ease-out);
touch-action: manipulation;
}
.kamu1-theme-toggle:hover {
background: var(--kamu1-red-soft);
color: var(--kamu1-red);
border-color: transparent;
}
.kamu1-theme-toggle svg {
width: 18px; height: 18px;
transition: transform var(--kamu1-dur-3) var(--kamu1-ease-spring);
}
.kamu1-theme-toggle:hover svg { transform: rotate(15deg); }
.kamu1-theme-toggle .icon-sun { display: none; }
.kamu1-theme-toggle .icon-moon { display: inline; }
:root[data-theme="dark"] .kamu1-theme-toggle .icon-sun , :root[data-kamu1-theme="dark"] .kamu1-theme-toggle .icon-sun { display: inline; }
:root[data-theme="dark"] .kamu1-theme-toggle .icon-moon , :root[data-kamu1-theme="dark"] .kamu1-theme-toggle .icon-moon { display: none; }
/* ----------------------------------------------------------------------
* 13) READING PROGRESS BAR — makale üstünde
* ---------------------------------------------------------------------- */
.kamu1-reading-progress {
position: fixed; top: 0; left: 0;
height: 3px; width: 0;
background: linear-gradient(90deg, var(--kamu1-red), var(--kamu1-gold));
z-index: 9998;
box-shadow: 0 2px 8px color-mix(in oklab, var(--kamu1-red) 35%, transparent);
transition: width 60ms linear;
pointer-events: none;
}
/* ----------------------------------------------------------------------
* 14) STICKY SHARE BAR — makale yan tarafı (desktop) + alt (mobil)
* ---------------------------------------------------------------------- */
.kamu1-sticky-share {
position: fixed;
left: max(16px, env(safe-area-inset-left));
top: 50%;
transform: translateY(-50%);
display: flex; flex-direction: column;
gap: 8px;
z-index: 50;
opacity: 0; visibility: hidden;
transition: opacity var(--kamu1-dur-3) var(--kamu1-ease-out),
visibility var(--kamu1-dur-3);
}
.kamu1-sticky-share.is-visible { opacity: 1; visibility: visible; }
.kamu1-sticky-share a, .kamu1-sticky-share button {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--kamu1-surface);
color: var(--kamu1-ink);
border: 1px solid var(--kamu1-line);
display: inline-flex; align-items: center; justify-content: center;
box-shadow: var(--kamu1-sh-sm);
transition: all var(--kamu1-dur-2) var(--kamu1-ease-spring);
cursor: pointer;
}
.kamu1-sticky-share a:hover, .kamu1-sticky-share button:hover {
transform: translateY(-2px) scale(1.08);
box-shadow: var(--kamu1-sh-md);
background: var(--kamu1-red);
color: #fff;
border-color: transparent;
}
.kamu1-sticky-share svg { width: 18px; height: 18px; }
@media (max-width: 980px) {
.kamu1-sticky-share {
left: 0; right: 0; top: auto; transform: none;
bottom: max(16px, env(safe-area-inset-bottom));
flex-direction: row;
justify-content: center;
gap: 10px;
padding: 10px 16px;
background: color-mix(in oklab, var(--kamu1-surface) 90%, transparent);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-top: 1px solid var(--kamu1-line);
}
}
/* ----------------------------------------------------------------------
* 15) BACK-TO-TOP — opsiyonel, hızlı navigasyon
* ---------------------------------------------------------------------- */
.kamu1-back-to-top {
position: fixed;
right: max(16px, env(safe-area-inset-right));
bottom: max(80px, calc(env(safe-area-inset-bottom) + 80px));
width: 44px; height: 44px;
border-radius: 50%;
background: var(--kamu1-red);
color: #fff;
border: 0;
cursor: pointer;
box-shadow: var(--kamu1-sh-brand);
display: none; align-items: center; justify-content: center;
opacity: 0; transform: translateY(20px);
transition: opacity var(--kamu1-dur-2) var(--kamu1-ease-out),
transform var(--kamu1-dur-2) var(--kamu1-ease-spring),
background var(--kamu1-dur-1);
z-index: 49;
}
.kamu1-back-to-top.is-visible {
display: inline-flex; opacity: 1; transform: translateY(0);
}
.kamu1-back-to-top:hover { background: var(--kamu1-red-dark); transform: translateY(-3px); }
.kamu1-back-to-top svg { width: 20px; height: 20px; }
/* ----------------------------------------------------------------------
* 16) COMMUNITY / FORUM CTA SECTION (P2)
* ---------------------------------------------------------------------- */
.kamu1-community-section {
max-width: var(--kamu1-container);
margin: 40px auto 24px;
padding: 0 16px;
}
.kamu1-community-card {
background: linear-gradient(135deg,
var(--kamu1-night) 0%,
color-mix(in oklab, var(--kamu1-night) 80%, var(--kamu1-red)) 100%);
border-radius: var(--kamu1-radius-lg);
padding: 48px;
color: #fff;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 48px;
position: relative;
overflow: hidden;
}
.kamu1-community-card::before {
content: "";
position: absolute;
width: 500px; height: 500px;
background: radial-gradient(circle,
color-mix(in oklab, var(--kamu1-gold) 22%, transparent) 0%,
transparent 70%);
top: -200px; right: -150px;
pointer-events: none;
}
.kamu1-community-text { position: relative; z-index: 2; }
.kamu1-community-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
background: color-mix(in oklab, var(--kamu1-red) 22%, transparent);
color: #fda4af;
font-weight: 700; font-size: 11px;
letter-spacing: 0.08em; text-transform: uppercase;
padding: 6px 14px; border-radius: 999px;
border: 1px solid color-mix(in oklab, var(--kamu1-red) 40%, transparent);
margin-bottom: 16px;
}
.kamu1-community-eyebrow::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: var(--kamu1-red);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--kamu1-red) 25%, transparent);
animation: kamu1-pulse 2s ease-in-out infinite;
}
@keyframes kamu1-pulse { 50% { box-shadow: 0 0 0 8px color-mix(in oklab, var(--kamu1-red) 5%, transparent); } }
.kamu1-community-text h2 {
font-family: var(--kamu1-font-display);
font-weight: 800;
font-size: clamp(26px, 3.4vw, 38px);
line-height: 1.05;
margin: 0 0 16px;
color: #fff;
letter-spacing: -0.03em;
}
.kamu1-community-text h2 .accent {
background: linear-gradient(135deg, var(--kamu1-gold), #fbbf24);
-webkit-background-clip: text; background-clip: text;
color: transparent;
}
.kamu1-community-text > p {
font-size: 15px; color: #cbd5e1;
margin: 0 0 24px; line-height: 1.65;
max-width: 520px;
}
.kamu1-community-list {
list-style: none; padding: 0; margin: 0 0 28px;
display: grid; gap: 12px;
}
.kamu1-community-list li {
display: flex; align-items: flex-start; gap: 12px;
font-size: 14px; color: #e2e8f0;
line-height: 1.45;
}
.kamu1-community-list .check {
flex-shrink: 0;
width: 22px; height: 22px; border-radius: 50%;
background: linear-gradient(135deg, var(--kamu1-green), #059669);
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 900;
box-shadow: 0 4px 10px color-mix(in oklab, var(--kamu1-green) 38%, transparent);
}
.kamu1-community-cta {
display: inline-flex; align-items: center; gap: 10px;
background: #fff;
color: var(--kamu1-night);
padding: 14px 24px;
border-radius: 999px;
font-weight: 700; font-size: 14px;
box-shadow: var(--kamu1-sh-md);
transition: transform var(--kamu1-dur-2) var(--kamu1-ease-spring),
box-shadow var(--kamu1-dur-2) var(--kamu1-ease-out);
}
.kamu1-community-cta:hover {
transform: translateY(-2px);
box-shadow: var(--kamu1-sh-lg);
}
.kamu1-community-cta svg { width: 18px; height: 18px; }
.kamu1-community-chat {
position: relative; z-index: 2;
display: flex; flex-direction: column;
gap: 12px; justify-content: center;
}
.kamu1-chat-bubble {
display: flex; align-items: flex-end; gap: 10px;
animation: kamu1-bubble-in 600ms var(--kamu1-ease-out) both;
}
.kamu1-chat-bubble:nth-child(2) { animation-delay: 200ms; }
.kamu1-chat-bubble:nth-child(3) { animation-delay: 400ms; }
.kamu1-chat-bubble:nth-child(4) { animation-delay: 600ms; }
@keyframes kamu1-bubble-in {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.kamu1-chat-bubble.is-self { flex-direction: row-reverse; }
.kamu1-chat-avatar {
width: 34px; height: 34px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 13px; color: #fff;
box-shadow: var(--kamu1-sh-sm);
flex-shrink: 0;
}
.kamu1-chat-avatar.av-1 { background: linear-gradient(135deg, #ec4899, #db2777); }
.kamu1-chat-avatar.av-2 { background: linear-gradient(135deg, var(--kamu1-blue), #1e40af); }
.kamu1-chat-avatar.av-3 { background: linear-gradient(135deg, var(--kamu1-green), #059669); }
.kamu1-chat-avatar.av-4 { background: linear-gradient(135deg, var(--kamu1-gold), var(--kamu1-red)); }
.kamu1-chat-message {
background: rgba(255,255,255,.96);
color: var(--kamu1-ink);
padding: 10px 14px;
border-radius: 16px 16px 16px 4px;
font-size: 13.5px; line-height: 1.4;
box-shadow: var(--kamu1-sh-sm);
max-width: 280px;
}
.kamu1-chat-bubble.is-self .kamu1-chat-message {
background: linear-gradient(135deg, var(--kamu1-red), var(--kamu1-red-dark));
color: #fff;
border-radius: 16px 16px 4px 16px;
}
@media (max-width: 980px) {
.kamu1-community-card {
grid-template-columns: 1fr;
gap: 32px;
padding: 32px 24px;
}
.kamu1-chat-message { max-width: 220px; font-size: 13px; }
}
/* ----------------------------------------------------------------------
* 17) AI SUMMARY BOX (P2) — makale üstünde "30 saniyede özet"
* ---------------------------------------------------------------------- */
.kamu1-ai-summary {
background: linear-gradient(135deg,
var(--kamu1-blue-soft) 0%,
var(--kamu1-gold-soft) 100%);
border: 1px solid color-mix(in oklab, var(--kamu1-blue) 18%, var(--kamu1-line));
border-radius: var(--kamu1-radius);
padding: 20px 24px;
margin: 24px 0;
position: relative;
overflow: hidden;
}
.kamu1-ai-summary::before {
content: "";
position: absolute; inset: 0;
background: radial-gradient(circle at 90% 10%,
color-mix(in oklab, var(--kamu1-gold) 20%, transparent) 0%,
transparent 50%);
pointer-events: none;
}
.kamu1-ai-summary-head {
display: flex; align-items: center; gap: 10px;
margin-bottom: 12px;
position: relative; z-index: 1;
}
.kamu1-ai-summary-badge {
display: inline-flex; align-items: center; gap: 6px;
background: var(--kamu1-night);
color: #fff;
padding: 4px 10px;
border-radius: 999px;
font-size: 11px; font-weight: 700;
letter-spacing: 0.05em; text-transform: uppercase;
}
.kamu1-ai-summary-badge svg { width: 12px; height: 12px; color: var(--kamu1-gold); }
.kamu1-ai-summary-meta {
font-size: 12px; color: var(--kamu1-muted-strong);
font-weight: 500;
}
.kamu1-ai-summary-body {
font-size: 15px; line-height: 1.65;
color: var(--kamu1-ink-soft);
position: relative; z-index: 1;
}
.kamu1-ai-summary-body ul {
list-style: none; padding: 0; margin: 0;
display: grid; gap: 8px;
}
.kamu1-ai-summary-body li {
padding-left: 22px;
position: relative;
color: var(--kamu1-ink-aaa);
}
.kamu1-ai-summary-body li::before {
content: "•";
position: absolute; left: 6px; top: 0;
color: var(--kamu1-red);
font-weight: 900; font-size: 18px;
line-height: 1.4;
}
/* ----------------------------------------------------------------------
* 18) APP HERO SLIDER — modern polish (mevcut yapı korunur)
* ---------------------------------------------------------------------- */
.kamu1-app-hero-slide {
transition: opacity 600ms var(--kamu1-ease-out),
transform 800ms var(--kamu1-ease-out);
}
.kamu1-app-hero-image {
transition: transform 8s linear;
}
.kamu1-app-hero-slide.is-active .kamu1-app-hero-image {
transform: scale(1.05); /* Ken Burns efekti */
}
/* ----------------------------------------------------------------------
* 19) DYNAMIC HOME SECTION başlıkları — modern polish
* ---------------------------------------------------------------------- */
.kamu1-dynamic-home-section h2,
.kamu1-dynamic-home-section h3 {
font-family: var(--kamu1-font-display);
letter-spacing: -0.025em;
}
/* ----------------------------------------------------------------------
* 20) CONTAINER QUERIES (2026 modern) — fallback safe
* ---------------------------------------------------------------------- */
@supports (container-type: inline-size) {
.kamu1-dynamic-home-section {
container-type: inline-size;
container-name: kamu1-section;
}
@container kamu1-section (max-width: 640px) {
.kamu1-news-card { font-size: 14px; }
.kamu1-news-card h3 { font-size: 16px; }
}
}
/* ----------------------------------------------------------------------
* 21) VIEW TRANSITIONS API (2026) — sayfa geçişleri pürüzsüz
* ---------------------------------------------------------------------- */
@supports (view-transition-name: none) {
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 280ms;
animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}
.kamu1-app-hero-slider {
view-transition-name: kamu1-hero;
}
}
/* ----------------------------------------------------------------------
* 22) SCROLL-DRIVEN ANIMATIONS (modern) — header opacity, hero zoom
* ---------------------------------------------------------------------- */
@supports (animation-timeline: scroll()) {
.kamu1-app-hero-image {
animation: kamu1-hero-zoom linear both;
animation-timeline: view();
animation-range: entry 0% exit 100%;
}
@keyframes kamu1-hero-zoom {
from { transform: scale(1); }
to { transform: scale(1.08); }
}
}
/* ----------------------------------------------------------------------
* 23) SELECTION + scrollbar
* ---------------------------------------------------------------------- */
::selection { background: var(--kamu1-red); color: #fff; }
@supports (scrollbar-width: thin) {
* { scrollbar-width: thin; scrollbar-color: var(--kamu1-muted) transparent; }
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--kamu1-muted); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--kamu1-ink-soft); }
/* ----------------------------------------------------------------------
* 25) DARK MODE — KATEGORİ SECTION OVERRIDE'LARI (v1.0.54 hotfix)
*
* Tema'da bazı kategori section'larında kart background'u inline ya da
* --cat-* değişkenleriyle koyu/renkli kalıyor. Dark mode'da:
* - Kart background'u koyu kalınca başlık koyu → okunmuyor
* - Bazı section'larda kart text rengi inline --cat-* taşıyor
*
* Bu blok dark mode'da kart background + text kontrastını ZORLAR.
* ---------------------------------------------------------------------- */
/* === MANUEL DARK MODE (data-theme="dark") === */
:root[data-theme="dark"] .kamu1-news-card, :root[data-kamu1-theme="dark"] .kamu1-news-card,
:root[data-theme="dark"] .kamu1-news-card-body, :root[data-kamu1-theme="dark"] .kamu1-news-card-body,
:root[data-theme="dark"] .kamu1-news-card[style], :root[data-kamu1-theme="dark"] .kamu1-news-card[style],
:root[data-theme="dark"] .kamu1-dynamic-home-section .kamu1-news-card, :root[data-kamu1-theme="dark"] .kamu1-dynamic-home-section .kamu1-news-card,
:root[data-theme="dark"] .kamu1-dynamic-home-section [class*="card"] , :root[data-kamu1-theme="dark"] .kamu1-dynamic-home-section [class*="card"] {
background-color: var(--kamu1-surface) !important;
background-image: none !important;
color: var(--kamu1-ink) !important;
border-color: var(--kamu1-line) !important;
}
:root[data-theme="dark"] .kamu1-news-card h2, :root[data-kamu1-theme="dark"] .kamu1-news-card h2,
:root[data-theme="dark"] .kamu1-news-card h3, :root[data-kamu1-theme="dark"] .kamu1-news-card h3,
:root[data-theme="dark"] .kamu1-news-card h4, :root[data-kamu1-theme="dark"] .kamu1-news-card h4,
:root[data-theme="dark"] .kamu1-news-card h3 a, :root[data-kamu1-theme="dark"] .kamu1-news-card h3 a,
:root[data-theme="dark"] .kamu1-news-card h3 a:visited, :root[data-kamu1-theme="dark"] .kamu1-news-card h3 a:visited,
:root[data-theme="dark"] .kamu1-news-card-body h3, :root[data-kamu1-theme="dark"] .kamu1-news-card-body h3,
:root[data-theme="dark"] .kamu1-news-card-body h3 a, :root[data-kamu1-theme="dark"] .kamu1-news-card-body h3 a,
:root[data-theme="dark"] .kamu1-dynamic-home-section h2, :root[data-kamu1-theme="dark"] .kamu1-dynamic-home-section h2,
:root[data-theme="dark"] .kamu1-dynamic-home-section h3, :root[data-kamu1-theme="dark"] .kamu1-dynamic-home-section h3,
:root[data-theme="dark"] .kamu1-dynamic-home-section h3 a, :root[data-kamu1-theme="dark"] .kamu1-dynamic-home-section h3 a,
:root[data-theme="dark"] .kamu1-dynamic-home-section h4 , :root[data-kamu1-theme="dark"] .kamu1-dynamic-home-section h4 {
color: var(--kamu1-ink-aaa, #f8fafc) !important;
text-shadow: none !important;
}
:root[data-theme="dark"] .kamu1-news-card p, :root[data-kamu1-theme="dark"] .kamu1-news-card p,
:root[data-theme="dark"] .kamu1-news-card-body p, :root[data-kamu1-theme="dark"] .kamu1-news-card-body p,
:root[data-theme="dark"] .kamu1-dynamic-home-section p, :root[data-kamu1-theme="dark"] .kamu1-dynamic-home-section p,
:root[data-theme="dark"] .kamu1-news-card .kamu1-card-meta, :root[data-kamu1-theme="dark"] .kamu1-news-card .kamu1-card-meta,
:root[data-theme="dark"] .kamu1-card-meta time, :root[data-kamu1-theme="dark"] .kamu1-card-meta time,
:root[data-theme="dark"] .kamu1-card-meta span , :root[data-kamu1-theme="dark"] .kamu1-card-meta span {
color: var(--kamu1-ink-soft) !important;
}
/* Kategori section başlıkları (section'un kendi başlığı, kart değil) */
:root[data-theme="dark"] .kamu1-dynamic-home-section > h2, :root[data-kamu1-theme="dark"] .kamu1-dynamic-home-section > h2,
:root[data-theme="dark"] .kamu1-dynamic-home-section > header h2, :root[data-kamu1-theme="dark"] .kamu1-dynamic-home-section > header h2,
:root[data-theme="dark"] .kamu1-section-title, :root[data-kamu1-theme="dark"] .kamu1-section-title,
:root[data-theme="dark"] .kamu1-dynamic-home-section-title , :root[data-kamu1-theme="dark"] .kamu1-dynamic-home-section-title {
color: #ffffff !important;
}
/* Benzer haberler / İlgili haberler */
:root[data-theme="dark"] .kamu1-related-news, :root[data-kamu1-theme="dark"] .kamu1-related-news,
:root[data-theme="dark"] .kamu1-related-news article, :root[data-kamu1-theme="dark"] .kamu1-related-news article,
:root[data-theme="dark"] .kamu1-related-news .kamu1-news-card, :root[data-kamu1-theme="dark"] .kamu1-related-news .kamu1-news-card,
:root[data-theme="dark"] [class*="related"] [class*="card"] , :root[data-kamu1-theme="dark"] [class*="related"] [class*="card"] {
background-color: var(--kamu1-surface) !important;
background-image: none !important;
}
:root[data-theme="dark"] .kamu1-related-news h3, :root[data-kamu1-theme="dark"] .kamu1-related-news h3,
:root[data-theme="dark"] .kamu1-related-news h3 a, :root[data-kamu1-theme="dark"] .kamu1-related-news h3 a,
:root[data-theme="dark"] .kamu1-related-news p, :root[data-kamu1-theme="dark"] .kamu1-related-news p,
:root[data-theme="dark"] [class*="related"] h3, :root[data-kamu1-theme="dark"] [class*="related"] h3,
:root[data-theme="dark"] [class*="related"] h3 a , :root[data-kamu1-theme="dark"] [class*="related"] h3 a {
color: var(--kamu1-ink-aaa, #f8fafc) !important;
}
/* Term cloud / Etiket çip'leri */
:root[data-theme="dark"] .kamu1-term-cloud a, :root[data-kamu1-theme="dark"] .kamu1-term-cloud a,
:root[data-theme="dark"] [class*="term-cloud"] a, :root[data-kamu1-theme="dark"] [class*="term-cloud"] a,
:root[data-theme="dark"] .kamu1-tags a, :root[data-kamu1-theme="dark"] .kamu1-tags a,
:root[data-theme="dark"] [class*="tags"] a , :root[data-kamu1-theme="dark"] [class*="tags"] a {
background: var(--kamu1-surface-2) !important;
color: var(--kamu1-ink) !important;
border-color: var(--kamu1-line) !important;
}
:root[data-theme="dark"] .kamu1-term-cloud a:hover, :root[data-kamu1-theme="dark"] .kamu1-term-cloud a:hover,
:root[data-theme="dark"] [class*="term-cloud"] a:hover , :root[data-kamu1-theme="dark"] [class*="term-cloud"] a:hover {
background: var(--kamu1-red-soft) !important;
color: var(--kamu1-red) !important;
}
/* Comment form */
:root[data-theme="dark"] .comment-form input[type="text"], :root[data-kamu1-theme="dark"] .comment-form input[type="text"],
:root[data-theme="dark"] .comment-form input[type="email"], :root[data-kamu1-theme="dark"] .comment-form input[type="email"],
:root[data-theme="dark"] .comment-form input[type="url"], :root[data-kamu1-theme="dark"] .comment-form input[type="url"],
:root[data-theme="dark"] .comment-form textarea, :root[data-kamu1-theme="dark"] .comment-form textarea,
:root[data-theme="dark"] #commentform input, :root[data-kamu1-theme="dark"] #commentform input,
:root[data-theme="dark"] #commentform textarea , :root[data-kamu1-theme="dark"] #commentform textarea {
background: var(--kamu1-surface-2) !important;
color: var(--kamu1-ink) !important;
border-color: var(--kamu1-line) !important;
}
:root[data-theme="dark"] .comment-form label, :root[data-kamu1-theme="dark"] .comment-form label,
:root[data-theme="dark"] .comment-form p, :root[data-kamu1-theme="dark"] .comment-form p,
:root[data-theme="dark"] .comment-notes, :root[data-kamu1-theme="dark"] .comment-notes,
:root[data-theme="dark"] .logged-in-as, :root[data-kamu1-theme="dark"] .logged-in-as,
:root[data-theme="dark"] .logged-in-as a , :root[data-kamu1-theme="dark"] .logged-in-as a {
color: var(--kamu1-ink-soft) !important;
}
/* "Tümünü gör" buton — kategori section'larda */
:root[data-theme="dark"] .kamu1-dynamic-home-section .kamu1-button, :root[data-kamu1-theme="dark"] .kamu1-dynamic-home-section .kamu1-button,
:root[data-theme="dark"] .kamu1-dynamic-home-section a[class*="view-all"], :root[data-kamu1-theme="dark"] .kamu1-dynamic-home-section a[class*="view-all"],
:root[data-theme="dark"] .kamu1-dynamic-home-section a[class*="more"] , :root[data-kamu1-theme="dark"] .kamu1-dynamic-home-section a[class*="more"] {
background: var(--kamu1-gold) !important;
color: var(--kamu1-night) !important;
}
/* Section başlığı çip rozeti (badge ikon) */
:root[data-theme="dark"] .kamu1-section-badge, :root[data-kamu1-theme="dark"] .kamu1-section-badge,
:root[data-theme="dark"] .kamu1-dynamic-home-section .kamu1-badge , :root[data-kamu1-theme="dark"] .kamu1-dynamic-home-section .kamu1-badge {
background: rgba(255,255,255,.12) !important;
color: #ffffff !important;
}
/* Hero / önce çıkan büyük kart başlığı (mor/lacivert section'larda kayboluyordu) */
:root[data-theme="dark"] .kamu1-news-card--lead h3, :root[data-kamu1-theme="dark"] .kamu1-news-card--lead h3,
:root[data-theme="dark"] .kamu1-news-card--lead h3 a, :root[data-kamu1-theme="dark"] .kamu1-news-card--lead h3 a,
:root[data-theme="dark"] .kamu1-news-card--feature h3, :root[data-kamu1-theme="dark"] .kamu1-news-card--feature h3,
:root[data-theme="dark"] .kamu1-news-card--feature h3 a, :root[data-kamu1-theme="dark"] .kamu1-news-card--feature h3 a,
:root[data-theme="dark"] [class*="lead"] h3, :root[data-kamu1-theme="dark"] [class*="lead"] h3,
:root[data-theme="dark"] [class*="feature"] h3 , :root[data-kamu1-theme="dark"] [class*="feature"] h3 {
color: var(--kamu1-ink-aaa, #f8fafc) !important;
}
/* Tarih + "X DK OKUMA" meta */
:root[data-theme="dark"] .kamu1-card-meta time, :root[data-kamu1-theme="dark"] .kamu1-card-meta time,
:root[data-theme="dark"] [class*="reading-time"], :root[data-kamu1-theme="dark"] [class*="reading-time"],
:root[data-theme="dark"] [class*="meta"] time, :root[data-kamu1-theme="dark"] [class*="meta"] time,
:root[data-theme="dark"] [class*="meta"] span:not(.kamu1-badge) , :root[data-kamu1-theme="dark"] [class*="meta"] span:not(.kamu1-badge) {
color: var(--kamu1-ink-soft) !important;
}
/* === SİSTEM DARK MODE (kullanıcı manuel light seçmemişse) === */
/* ----------------------------------------------------------------------
* 26) Inline style="background:..." kategori arka planlarını dark mode'da
* yumuşat. Tema bazen section'a inline gradient/color veriyor.
* Bu CSS'i overlay ile yumuşatır.
* ---------------------------------------------------------------------- */
:root[data-theme="dark"] .kamu1-dynamic-home-section[style*="background"] > * , :root[data-kamu1-theme="dark"] .kamu1-dynamic-home-section[style*="background"] > * {
position: relative; z-index: 1;
}
/* ----------------------------------------------------------------------
* 27) HOTFIX v1.0.55 — H1 görünürlük + topic-cloud + manuel toggle header
* ---------------------------------------------------------------------- */
/* === H1 article başlığı her modda görünür === */
.kamu1-article-header h1,
.kamu1-article h1,
.kamu1-single h1,
.kamu1-article-top h1 {
color: var(--kamu1-ink) !important;
opacity: 1 !important;
-webkit-text-fill-color: var(--kamu1-ink) !important;
}
:root[data-theme="dark"] .kamu1-article-header h1, :root[data-kamu1-theme="dark"] .kamu1-article-header h1,
:root[data-theme="dark"] .kamu1-article h1, :root[data-kamu1-theme="dark"] .kamu1-article h1,
:root[data-theme="dark"] .kamu1-single h1, :root[data-kamu1-theme="dark"] .kamu1-single h1,
:root[data-theme="dark"] .kamu1-article-top h1 , :root[data-kamu1-theme="dark"] .kamu1-article-top h1 {
color: #f8fafc !important;
-webkit-text-fill-color: #f8fafc !important;
}
/* Article header background dark mode'da koyu surface */
:root[data-theme="dark"] .kamu1-article-header , :root[data-kamu1-theme="dark"] .kamu1-article-header {
background: linear-gradient(135deg, rgba(17,26,44,.96), rgba(11,18,32,.98)) !important;
border-color: var(--kamu1-line) !important;
}
/* === TOPIC-CLOUD (doğru class adı — önceki .kamu1-term-cloud YANLIŞTI) === */
:root[data-theme="dark"] .kamu1-topic-cloud , :root[data-kamu1-theme="dark"] .kamu1-topic-cloud {
background: linear-gradient(135deg, rgba(17,26,44,.96), rgba(11,18,32,.98)) !important;
border-color: var(--kamu1-line) !important;
}
:root[data-theme="dark"] .kamu1-topic-cloud-head span , :root[data-kamu1-theme="dark"] .kamu1-topic-cloud-head span {
color: #f8fafc !important;
}
:root[data-theme="dark"] .kamu1-topic-cloud-head small , :root[data-kamu1-theme="dark"] .kamu1-topic-cloud-head small {
color: var(--kamu1-muted-strong, #94a3b8) !important;
}
:root[data-theme="dark"] .kamu1-topic-cloud a , :root[data-kamu1-theme="dark"] .kamu1-topic-cloud a {
background: var(--kamu1-surface-2) !important;
color: var(--kamu1-ink) !important;
border-color: var(--kamu1-line) !important;
}
:root[data-theme="dark"] .kamu1-topic-cloud a:hover , :root[data-kamu1-theme="dark"] .kamu1-topic-cloud a:hover {
background: color-mix(in oklab, var(--kamu1-red) 22%, var(--kamu1-surface-2)) !important;
color: #fff !important;
border-color: var(--kamu1-red) !important;
}
/* === SITE HEADER — manuel toggle için (tema sadece @media yazmış) === */
:root[data-theme="dark"] .kamu1-site-header , :root[data-kamu1-theme="dark"] .kamu1-site-header {
background: rgba(11,18,32,.88) !important;
border-bottom-color: rgba(255,255,255,.10) !important;
backdrop-filter: blur(20px) saturate(145%);
-webkit-backdrop-filter: blur(20px) saturate(145%);
}
:root[data-theme="dark"] .kamu1-site-header, :root[data-kamu1-theme="dark"] .kamu1-site-header,
:root[data-theme="dark"] .kamu1-site-header a, :root[data-kamu1-theme="dark"] .kamu1-site-header a,
:root[data-theme="dark"] .kamu1-site-header .kamu1-main-header-inner, :root[data-kamu1-theme="dark"] .kamu1-site-header .kamu1-main-header-inner,
:root[data-theme="dark"] .kamu1-site-header svg , :root[data-kamu1-theme="dark"] .kamu1-site-header svg {
color: #f8fafc !important;
}
:root[data-theme="dark"] .kamu1-site-header .custom-logo, :root[data-kamu1-theme="dark"] .kamu1-site-header .custom-logo,
:root[data-theme="dark"] .kamu1-site-header img.custom-logo , :root[data-kamu1-theme="dark"] .kamu1-site-header img.custom-logo {
filter: brightness(1) invert(0);
}
:root[data-theme="dark"] .kamu1-site-header .kamu1-icon-button , :root[data-kamu1-theme="dark"] .kamu1-site-header .kamu1-icon-button {
background: rgba(255,255,255,.08) !important;
color: #f8fafc !important;
}
:root[data-theme="dark"] .kamu1-site-header .kamu1-icon-button:hover , :root[data-kamu1-theme="dark"] .kamu1-site-header .kamu1-icon-button:hover {
background: rgba(255,255,255,.15) !important;
}
/* === BREADCRUMB — dark mode okunur === */
:root[data-theme="dark"] .kamu1-breadcrumb, :root[data-kamu1-theme="dark"] .kamu1-breadcrumb,
:root[data-theme="dark"] .kamu1-breadcrumb a, :root[data-kamu1-theme="dark"] .kamu1-breadcrumb a,
:root[data-theme="dark"] .kamu1-breadcrumb span , :root[data-kamu1-theme="dark"] .kamu1-breadcrumb span {
color: var(--kamu1-ink-soft) !important;
}
:root[data-theme="dark"] .kamu1-breadcrumb a:hover , :root[data-kamu1-theme="dark"] .kamu1-breadcrumb a:hover {
color: var(--kamu1-red) !important;
}
/* === ARTICLE BYLINE (yazar adı + sosyal paylaş) === */
:root[data-theme="dark"] .kamu1-article-byline , :root[data-kamu1-theme="dark"] .kamu1-article-byline {
background: rgba(17,26,44,.5) !important;
border-color: var(--kamu1-line) !important;
}
:root[data-theme="dark"] .kamu1-article-byline, :root[data-kamu1-theme="dark"] .kamu1-article-byline,
:root[data-theme="dark"] .kamu1-article-byline a, :root[data-kamu1-theme="dark"] .kamu1-article-byline a,
:root[data-theme="dark"] .kamu1-article-byline span , :root[data-kamu1-theme="dark"] .kamu1-article-byline span {
color: var(--kamu1-ink) !important;
}
/* === FOOTER + diğer placeholderlar === */
:root[data-theme="dark"] .kamu1-site-footer , :root[data-kamu1-theme="dark"] .kamu1-site-footer {
background: var(--kamu1-night) !important;
}
:root[data-theme="dark"] .kamu1-site-footer, :root[data-kamu1-theme="dark"] .kamu1-site-footer,
:root[data-theme="dark"] .kamu1-site-footer a, :root[data-kamu1-theme="dark"] .kamu1-site-footer a,
:root[data-theme="dark"] .kamu1-site-footer p , :root[data-kamu1-theme="dark"] .kamu1-site-footer p {
color: var(--kamu1-ink-soft) !important;
}
/* Featured image placeholder iskelet — beyaz boş kutu sorununu maskele */
.kamu1-article-figure img,
.kamu1-article-figure picture,
.kamu1-article-image img {
background: linear-gradient(135deg, var(--kamu1-line), var(--kamu1-surface-2));
min-height: 200px;
}
/* ----------------------------------------------------------------------
* 28) HEADER UTILITY BAR — tarih + "Son Dakika Gelişmeleri" link
* Kullanıcı tercihi: kapat (gereksiz, sayfa açıyor).
* ---------------------------------------------------------------------- */
.kamu1-utility-bar,
.kamu1-utility-inner,
[class*="utility-bar"] {
display: none !important;
}
/* ----------------------------------------------------------------------
* 29) KATEGORİ SECTION TİPOGRAFİ — modern hierarchy, refined cards
*
* Section başlığı (Ekonomi/Spor/vb.) → büyük + Plus Jakarta Sans 800
* Card meta → tight, tabular nums, uppercase
* Card title → 800 + sıkı line-height + balance
* Card excerpt → 3 satır clamp, muted, pretty
* "TÜMÜNÜ GÖR" buton → pill + uppercase + hover transition
* ---------------------------------------------------------------------- */
/* — Section başlığı (kategori adı: Ekonomi, Spor, vs.) — */
.kamu1-section-head h2,
.kamu1-section-head h1,
.kamu1-dynamic-home-section > header h2,
.kamu1-dynamic-home-section > header h3,
.kamu1-dynamic-home-section h2.kamu1-section-title {
font-family: var(--kamu1-font-display) !important;
font-size: clamp(22px, 2.4vw, 30px) !important;
font-weight: 800 !important;
letter-spacing: -0.025em !important;
line-height: 1.1 !important;
margin: 0 !important;
text-wrap: balance;
color: inherit;
}
/* Section başlığı sol ikonu — daha belirgin */
.kamu1-section-head .kamu1-section-mark,
.kamu1-section-head [class*="icon"],
.kamu1-section-head svg {
flex-shrink: 0;
}
/* Section başlığı + içerik arası spacing */
.kamu1-section-head,
.kamu1-dynamic-home-section > header {
margin-bottom: 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
/* — Card meta (kategori chip + tarih + reading time) — */
.kamu1-card-meta {
display: flex !important;
flex-wrap: wrap;
gap: 10px !important;
align-items: center;
font-size: 11.5px !important;
font-family: var(--kamu1-font);
letter-spacing: 0.04em;
font-feature-settings: "tnum" on, "ss01" on;
margin-bottom: 12px;
}
.kamu1-card-meta time,
.kamu1-card-meta > span,
.kamu1-card-meta .kamu1-reading-time {
color: var(--kamu1-muted) !important;
font-weight: 700 !important;
text-transform: uppercase;
}
.kamu1-card-meta .kamu1-badge {
font-family: var(--kamu1-font-display);
font-size: 11px !important;
font-weight: 800 !important;
letter-spacing: 0.06em !important;
padding: 5px 10px !important;
border-radius: 6px !important;
text-transform: uppercase;
}
/* — Card başlığı — */
.kamu1-news-card h3,
.kamu1-news-card-body h3,
.kamu1-news-card h2,
.kamu1-news-card-body h2 {
font-family: var(--kamu1-font-display) !important;
font-weight: 800 !important;
font-size: clamp(17px, 1.35vw, 20px) !important;
line-height: 1.18 !important;
letter-spacing: -0.025em !important;
text-wrap: balance;
margin: 0 0 10px !important;
color: var(--kamu1-ink) !important;
}
.kamu1-news-card h3 a,
.kamu1-news-card-body h3 a {
color: inherit !important;
transition: color var(--kamu1-dur-1) var(--kamu1-ease-out);
}
.kamu1-news-card h3 a:hover,
.kamu1-news-card-body h3 a:hover {
color: var(--kamu1-red) !important;
}
/* — Card excerpt — 3 satır clamp, premium muted — */
.kamu1-news-card p,
.kamu1-news-card-body p,
.kamu1-news-card .kamu1-news-card-excerpt {
font-size: 14px !important;
line-height: 1.55 !important;
color: var(--kamu1-muted) !important;
text-wrap: pretty;
margin: 0 !important;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
/* Card body padding refined */
.kamu1-news-card-body {
padding: 16px 18px 18px !important;
display: flex;
flex-direction: column;
gap: 0;
}
/* — "TÜMÜNÜ GÖR" buton premium — */
.kamu1-section-head a,
.kamu1-section-head .kamu1-button,
.kamu1-dynamic-home-section > header a:not([class*="badge"]),
.kamu1-dynamic-home-section a[class*="view-all"],
a.kamu1-section-cta {
background: var(--kamu1-gold) !important;
color: var(--kamu1-night) !important;
font-family: var(--kamu1-font-display) !important;
font-weight: 800 !important;
font-size: 11.5px !important;
letter-spacing: 0.08em !important;
text-transform: uppercase;
padding: 10px 20px !important;
border-radius: 999px !important;
text-decoration: none !important;
transition: transform var(--kamu1-dur-2) var(--kamu1-ease-spring),
box-shadow var(--kamu1-dur-2) var(--kamu1-ease-out),
background-color var(--kamu1-dur-1);
display: inline-flex;
align-items: center;
gap: 6px;
box-shadow: 0 4px 12px color-mix(in oklab, var(--kamu1-gold) 35%, transparent);
white-space: nowrap;
}
.kamu1-section-head a:hover,
.kamu1-dynamic-home-section > header a:not([class*="badge"]):hover {
background: var(--kamu1-night) !important;
color: var(--kamu1-gold) !important;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(11,18,32,.35);
}
.kamu1-section-head a:active {
transform: translateY(0);
}
/* Dark mode'da Tümünü Gör butonu */
:root[data-theme="dark"] .kamu1-section-head a,
:root[data-kamu1-theme="dark"] .kamu1-section-head a {
background: var(--kamu1-gold) !important;
color: var(--kamu1-night) !important;
}
:root[data-theme="dark"] .kamu1-section-head a:hover,
:root[data-kamu1-theme="dark"] .kamu1-section-head a:hover {
background: #fbbf24 !important;
color: var(--kamu1-night) !important;
}
/* — Section content spacing — */
.kamu1-dynamic-home-section {
padding-top: 32px;
padding-bottom: 32px;
}
/* ----------------------------------------------------------------------
* 30) BENTO GRID — featured (lead) kartı stretch (masaüstü dengesizlik fix)
*
* Sorun: .kamu1-dynamic-bento'da lead kart grid-row: span 2 ama içerideki
* media + body toplamı sağ kartların 2× yüksekliğine ulaşmıyor → altta boşluk.
*
* Çözüm: media flex-grow:1 ile kalan alanı kaplasın, body kompakt kalsın.
* Sadece masaüstü (>=720px) için — tema'nın mobile kuralı korunsun.
* ---------------------------------------------------------------------- */
@media (min-width: 720px) {
.kamu1-dynamic-bento {
grid-auto-rows: 1fr;
}
.kamu1-dynamic-bento > .kamu1-news-card,
.kamu1-dynamic-bento .kamu1-news-card--lead,
.kamu1-dynamic-bento .kamu1-news-card--grid {
display: flex !important;
flex-direction: column;
height: 100%;
}
.kamu1-dynamic-bento .kamu1-news-card--lead .kamu1-news-card-media {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
display: block;
}
.kamu1-dynamic-bento .kamu1-news-card--lead .kamu1-news-card-media img,
.kamu1-dynamic-bento .kamu1-news-card--lead .kamu1-media-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.kamu1-dynamic-bento .kamu1-news-card--lead .kamu1-news-card-body {
flex-shrink: 0;
}
/* Sağ kolondaki grid kartlar da stretch */
.kamu1-dynamic-bento .kamu1-news-card--grid .kamu1-news-card-media {
flex-shrink: 0;
aspect-ratio: 16/9;
overflow: hidden;
}
.kamu1-dynamic-bento .kamu1-news-card--grid .kamu1-news-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.kamu1-dynamic-bento .kamu1-news-card--grid .kamu1-news-card-body {
flex: 1;
display: flex;
flex-direction: column;
}
}
/* Responsive — mobile section'da meta küçülsün */
@media (max-width: 720px) {
.kamu1-section-head h2,
.kamu1-dynamic-home-section > header h2 {
font-size: 22px !important;
}
.kamu1-card-meta { font-size: 10.5px !important; gap: 8px !important; }
.kamu1-news-card h3,
.kamu1-news-card-body h3 {
font-size: 16px !important;
line-height: 1.2 !important;
}
.kamu1-news-card p,
.kamu1-news-card-body p { font-size: 13.5px !important; }
.kamu1-section-head a {
font-size: 10.5px !important;
padding: 8px 16px !important;
}
}
/* ======================================================================
* § PHASE 1 — HEADER & LOGO & NAVIGATION POLISH
* ====================================================================== */
/* ----------------------------------------------------------------------
* 31) SITE HEADER — sticky polish + scroll-aware compact mode
* ---------------------------------------------------------------------- */
.kamu1-site-header {
transition: backdrop-filter var(--kamu1-dur-3) var(--kamu1-ease-out),
background var(--kamu1-dur-3) var(--kamu1-ease-out),
box-shadow var(--kamu1-dur-3) var(--kamu1-ease-out),
border-color var(--kamu1-dur-3) var(--kamu1-ease-out);
will-change: backdrop-filter, background;
}
/* Scroll halinde header compact (JS .is-scrolled class ekler) */
.kamu1-site-header.is-scrolled {
background: rgba(255,255,255,.94) !important;
box-shadow: 0 4px 20px rgba(11,18,32,.06);
border-bottom-color: transparent !important;
}
:root[data-theme="dark"] .kamu1-site-header.is-scrolled,
:root[data-kamu1-theme="dark"] .kamu1-site-header.is-scrolled {
background: rgba(11,18,32,.94) !important;
box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
/* Compact mod — inner padding küçülür, logo + actions küçülür */
.kamu1-site-header.is-scrolled .kamu1-main-header-inner {
min-height: 56px !important;
transition: min-height var(--kamu1-dur-2) var(--kamu1-ease-out);
}
.kamu1-main-header-inner {
transition: min-height var(--kamu1-dur-3) var(--kamu1-ease-out);
}
/* ----------------------------------------------------------------------
* 32) LOGO premium tipografi
* ---------------------------------------------------------------------- */
.kamu1-logo {
display: inline-flex !important;
align-items: center;
gap: 4px;
transition: transform var(--kamu1-dur-2) var(--kamu1-ease-spring);
}
.kamu1-logo:hover {
transform: scale(1.03);
}
.kamu1-logo:active {
transform: scale(0.98);
}
.kamu1-logo-text {
font-family: var(--kamu1-font-display) !important;
font-weight: 900 !important;
font-size: clamp(22px, 2.2vw, 28px) !important;
letter-spacing: -0.04em !important;
line-height: 1 !important;
color: var(--kamu1-ink) !important;
display: inline-flex;
align-items: baseline;
}
.kamu1-logo-text > span {
background: linear-gradient(135deg, var(--kamu1-red), var(--kamu1-red-dark));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-left: 2px;
font-weight: 900;
}
/* Dark mode'da logo */
:root[data-theme="dark"] .kamu1-logo-text,
:root[data-kamu1-theme="dark"] .kamu1-logo-text {
color: #ffffff !important;
}
/* Compact mod'da logo küçülür */
.kamu1-site-header.is-scrolled .kamu1-logo-text {
font-size: clamp(20px, 2vw, 24px) !important;
}
/* ----------------------------------------------------------------------
* 33) HEADER ACTIONS — search, flame, theme toggle
* ---------------------------------------------------------------------- */
.kamu1-header-actions {
display: inline-flex !important;
align-items: center;
gap: 10px !important;
}
/* Icon buttons — search, theme toggle, etc */
.kamu1-icon-button,
.kamu1-feed-flame {
width: 42px !important;
height: 42px !important;
min-width: 42px;
border-radius: 999px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
transition: background var(--kamu1-dur-2) var(--kamu1-ease-out),
transform var(--kamu1-dur-2) var(--kamu1-ease-spring),
box-shadow var(--kamu1-dur-2) var(--kamu1-ease-out) !important;
cursor: pointer;
border: 1px solid transparent !important;
background: rgba(11,18,32,.06) !important;
color: var(--kamu1-ink) !important;
}
.kamu1-icon-button:hover,
.kamu1-feed-flame:hover {
background: rgba(11,18,32,.10) !important;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(11,18,32,.10);
}
.kamu1-icon-button:active,
.kamu1-feed-flame:active {
transform: translateY(0);
background: rgba(11,18,32,.14) !important;
}
:root[data-theme="dark"] .kamu1-icon-button,
:root[data-theme="dark"] .kamu1-feed-flame,
:root[data-kamu1-theme="dark"] .kamu1-icon-button,
:root[data-kamu1-theme="dark"] .kamu1-feed-flame {
background: rgba(255,255,255,.08) !important;
color: #fff !important;
}
:root[data-theme="dark"] .kamu1-icon-button:hover,
:root[data-theme="dark"] .kamu1-feed-flame:hover,
:root[data-kamu1-theme="dark"] .kamu1-icon-button:hover,
:root[data-kamu1-theme="dark"] .kamu1-feed-flame:hover {
background: rgba(255,255,255,.14) !important;
}
/* Search ikonu — JS modern SVG ile değiştirecek; tek karakter fallback */
.kamu1-icon-button > span[aria-hidden="true"] {
font-size: 22px !important;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
.kamu1-icon-button > svg {
width: 20px;
height: 20px;
}
/* Theme toggle pozisyonu — actions içinde tutarlı */
.kamu1-theme-toggle {
width: 42px !important;
height: 42px !important;
border-radius: 999px !important;
background: rgba(11,18,32,.06) !important;
border: 1px solid transparent !important;
color: var(--kamu1-ink) !important;
}
.kamu1-theme-toggle:hover {
background: rgba(11,18,32,.10) !important;
transform: translateY(-1px);
}
:root[data-theme="dark"] .kamu1-theme-toggle,
:root[data-kamu1-theme="dark"] .kamu1-theme-toggle {
background: rgba(255,255,255,.08) !important;
color: #fff !important;
}
:root[data-theme="dark"] .kamu1-theme-toggle:hover,
:root[data-kamu1-theme="dark"] .kamu1-theme-toggle:hover {
background: rgba(255,255,255,.14) !important;
}
/* Flame icon pulse — daha sofistike (mevcut animasyonu yumuşat) */
.kamu1-feed-flame {
position: relative;
background: linear-gradient(135deg, rgba(220,38,38,.12), rgba(245,158,11,.12)) !important;
color: var(--kamu1-red) !important;
}
.kamu1-feed-flame:hover {
background: linear-gradient(135deg, rgba(220,38,38,.20), rgba(245,158,11,.20)) !important;
transform: translateY(-1px) rotate(-4deg);
}
.kamu1-feed-flame-pulse {
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid var(--kamu1-red);
opacity: 0;
animation: kamu1-flame-pulse 2.5s ease-out infinite;
pointer-events: none;
}
@keyframes kamu1-flame-pulse {
0% { opacity: 0; transform: scale(1); }
50% { opacity: 0.6; }
100% { opacity: 0; transform: scale(1.5); }
}
/* ----------------------------------------------------------------------
* 34) SEARCH OVERLAY premium UX
* ---------------------------------------------------------------------- */
[data-kamu1-search],
.kamu1-search-overlay {
backdrop-filter: blur(20px) saturate(180%) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
background: color-mix(in oklab, var(--kamu1-bg) 75%, transparent) !important;
}
:root[data-theme="dark"] .kamu1-search-overlay,
:root[data-kamu1-theme="dark"] .kamu1-search-overlay,
:root[data-theme="dark"] [data-kamu1-search],
:root[data-kamu1-theme="dark"] [data-kamu1-search] {
background: rgba(5,11,24,.85) !important;
}
/* Search input premium */
#kamu1-search-input,
[data-kamu1-search] input[type="search"],
[data-kamu1-search] input[type="text"] {
font-family: var(--kamu1-font-display) !important;
font-size: clamp(20px, 3vw, 32px) !important;
font-weight: 600 !important;
letter-spacing: -0.02em !important;
background: transparent !important;
border: 0 !important;
border-bottom: 2px solid var(--kamu1-line) !important;
padding: 18px 10px !important;
width: 100%;
color: var(--kamu1-ink) !important;
transition: border-color var(--kamu1-dur-2) var(--kamu1-ease-out);
}
#kamu1-search-input:focus,
[data-kamu1-search] input:focus {
outline: none !important;
border-bottom-color: var(--kamu1-red) !important;
box-shadow: none !important;
}
/* Search head, label, close button */
.kamu1-search-head h2,
.kamu1-search-head .kamu1-search-title {
font-family: var(--kamu1-font-display) !important;
font-weight: 800 !important;
letter-spacing: -0.025em !important;
}
/* Recent searches container (JS enjekte) */
.kbu-search-recents {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--kamu1-line);
}
.kbu-search-recents-title {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--kamu1-muted);
margin-bottom: 12px;
font-family: var(--kamu1-font-display);
}
.kbu-search-recents-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.kbu-search-recent {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--kamu1-surface-2);
color: var(--kamu1-ink);
padding: 8px 14px;
border-radius: 999px;
font-size: 13.5px;
font-weight: 600;
border: 1px solid var(--kamu1-line);
transition: all var(--kamu1-dur-1) var(--kamu1-ease-out);
cursor: pointer;
}
.kbu-search-recent:hover {
background: var(--kamu1-red-soft);
color: var(--kamu1-red);
border-color: transparent;
transform: translateY(-1px);
}
.kbu-search-recent .kbu-search-recent-icon {
opacity: .5;
width: 12px;
height: 12px;
}
/* Keyboard shortcut hint */
.kbu-search-shortcut {
font-size: 11px;
color: var(--kamu1-muted);
margin-top: 16px;
font-family: var(--kamu1-font);
}
.kbu-search-shortcut kbd {
display: inline-block;
background: var(--kamu1-surface-2);
border: 1px solid var(--kamu1-line);
border-bottom-width: 2px;
padding: 2px 8px;
border-radius: 6px;
font-family: ui-monospace, "SF Mono", Monaco, monospace;
font-size: 11px;
font-weight: 600;
color: var(--kamu1-ink);
}
/* Header'da klavye kısayolu hint */
.kbu-shortcut-hint {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
border-radius: 6px;
background: var(--kamu1-surface-2);
border: 1px solid var(--kamu1-line);
font-family: ui-monospace, "SF Mono", Monaco, monospace;
font-size: 11px;
color: var(--kamu1-muted);
font-weight: 600;
letter-spacing: 0.02em;
margin-left: 6px;
pointer-events: none;
}
@media (max-width: 720px) {
.kbu-shortcut-hint { display: none; }
}
/* ----------------------------------------------------------------------
* 35) RESPONSIVE — mobile header
* ---------------------------------------------------------------------- */
@media (max-width: 720px) {
.kamu1-icon-button,
.kamu1-feed-flame,
.kamu1-theme-toggle {
width: 38px !important;
height: 38px !important;
}
.kamu1-header-actions { gap: 6px !important; }
.kamu1-logo-text { font-size: 20px !important; }
}
/* ======================================================================
* § PHASE 2 — APP HERO SLIDER MODERNIZE
* ====================================================================== */
/* ----------------------------------------------------------------------
* 36) HERO SLIDER container — sadece görsel polish, tema'nın sizing'ine
* KARIŞMA (slide/link/img height verince track translate'i bozuluyor)
* position: relative KRİTİK — dots/nav/counter absolute referansı
* ---------------------------------------------------------------------- */
.kamu1-app-hero-slider {
position: relative !important;
border-radius: var(--kamu1-radius-lg);
box-shadow: var(--kamu1-sh-lg);
isolation: isolate;
}
/* ----------------------------------------------------------------------
* 37) HERO SLIDE — sadece overlay; tema height + position'una dokunma
* ---------------------------------------------------------------------- */
/* JS enjekte ettiği overlay — SAĞA YASLI (sol bölge görsel yazısı için serbest)
Kamu1'in görsellerindeki manşet metni sol-alt'a yaslı tasarlanır.
Chip + CTA sağ tarafta grupla, gradient sağ-alt köşeye odaklı. */
.kbu-hero-overlay {
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important; /* sağa yasla */
justify-content: flex-end !important;
gap: 10px;
padding: clamp(20px, 3vw, 32px) !important;
padding-bottom: 56px !important; /* dots'a yer aç */
padding-top: clamp(40px, 5vw, 70px) !important;
background:
radial-gradient(ellipse 80% 60% at 85% 100%,
rgba(0,0,0,0.55) 0%,
rgba(0,0,0,0.18) 50%,
transparent 80%) !important;
z-index: 2 !important;
pointer-events: none;
color: #fff;
box-sizing: border-box;
}
.kbu-hero-overlay > * {
pointer-events: auto;
}
/* Başlık metni — görseldeki başlık zaten okunabilir, gizliyoruz */
.kbu-hero-title {
display: none !important;
}
@media (max-width: 720px) {
.kbu-hero-overlay {
padding: 12px 16px !important;
padding-top: 40px !important;
}
}
.kbu-hero-category {
display: inline-flex;
align-items: center;
gap: 6px;
background: linear-gradient(135deg, var(--kamu1-red), var(--kamu1-red-dark));
color: #fff;
font-family: var(--kamu1-font-display);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 6px 14px;
border-radius: 999px;
margin-bottom: 0;
box-shadow: 0 6px 20px rgba(220,38,38,.35);
pointer-events: auto;
white-space: nowrap;
}
.kbu-hero-category-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 3px rgba(255,255,255,.25);
animation: kamu1-pulse 1.8s ease-in-out infinite;
}
.kbu-hero-title {
color: #ffffff !important;
font-family: var(--kamu1-font-display) !important;
font-weight: 800 !important;
font-size: clamp(20px, 3.2vw, 42px) !important;
letter-spacing: -0.025em !important;
line-height: 1.08 !important;
max-width: min(75%, 820px);
margin: 0 !important;
text-wrap: balance;
text-shadow: 0 2px 16px rgba(0,0,0,0.4);
}
.kbu-hero-cta {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255,255,255,0.16);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.25);
color: #fff;
font-family: var(--kamu1-font-display);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.04em;
padding: 8px 16px;
border-radius: 999px;
margin-top: 0;
transition: all var(--kamu1-dur-2) var(--kamu1-ease-spring);
pointer-events: auto;
white-space: nowrap;
}
.kamu1-app-hero-slider:hover .kbu-hero-cta {
background: rgba(255,255,255,0.26);
transform: translateY(-2px);
}
.kbu-hero-cta svg { width: 14px; height: 14px; }
@media (max-width: 720px) {
.kbu-hero-overlay {
padding: 14px 14px 50px !important;
padding-top: 40px !important;
gap: 8px;
/* mobilde gradient daha küçük alanda */
background:
radial-gradient(ellipse 90% 50% at 80% 100%,
rgba(0,0,0,0.55) 0%,
rgba(0,0,0,0.20) 60%,
transparent 90%) !important;
}
.kbu-hero-category {
font-size: 10px;
padding: 4px 10px;
}
.kbu-hero-cta {
font-size: 11px;
padding: 6px 12px;
}
.kbu-hero-cta svg { width: 12px; height: 12px; }
/* Mobil counter daha küçük + sağ üstte ama kompakt */
.kbu-hero-counter {
padding: 4px 10px !important;
font-size: 10px !important;
top: 12px !important;
right: 12px !important;
}
/* Dots biraz daha kompakt mobilde */
.kamu1-app-hero-dots {
padding: 3px 8px !important;
gap: 4px !important;
bottom: 12px !important;
}
.kamu1-app-hero-dot {
width: 22px !important;
height: 3px !important;
}
.kamu1-app-hero-dot.is-active {
width: 40px !important;
}
}
/* ----------------------------------------------------------------------
* 38) PROGRESS SEGMENTS — ORTADA, alt çubuk gibi
* ---------------------------------------------------------------------- */
.kamu1-app-hero-dots {
position: absolute !important;
bottom: 16px !important;
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
display: flex !important;
gap: 6px !important;
z-index: 3 !important;
margin: 0 !important;
padding: 4px 10px !important;
list-style: none;
background: rgba(0,0,0,0.25);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 999px;
}
.kamu1-app-hero-dot {
width: 32px !important;
height: 4px !important;
border-radius: 99px !important;
background: rgba(255,255,255,0.35) !important;
border: 0 !important;
padding: 0 !important;
cursor: pointer;
transition: width var(--kamu1-dur-3) var(--kamu1-ease-out),
background var(--kamu1-dur-2) var(--kamu1-ease-out);
position: relative;
overflow: hidden;
}
.kamu1-app-hero-dot:hover {
background: rgba(255,255,255,0.6) !important;
}
.kamu1-app-hero-dot.is-active {
background: rgba(255,255,255,0.3) !important;
width: 56px !important;
}
/* Active dot içinde progress fill (auto-play timer) */
.kamu1-app-hero-dot.is-active::after {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
background: #fff;
border-radius: 99px;
animation: kbu-hero-progress 6s linear forwards;
width: 100%;
transform-origin: left;
}
@keyframes kbu-hero-progress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
.kamu1-app-hero-slider:hover .kamu1-app-hero-dot.is-active::after {
animation-play-state: paused;
}
/* ----------------------------------------------------------------------
* 39) PREV / NEXT navigation modern
* ---------------------------------------------------------------------- */
.kamu1-app-hero-nav {
position: absolute !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 48px !important;
height: 48px !important;
border-radius: 50% !important;
background: rgba(255,255,255,0.16) !important;
backdrop-filter: blur(14px) saturate(150%);
-webkit-backdrop-filter: blur(14px) saturate(150%);
border: 1px solid rgba(255,255,255,0.22) !important;
color: #fff !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer;
z-index: 3;
opacity: 0;
transition: opacity var(--kamu1-dur-3) var(--kamu1-ease-out),
background var(--kamu1-dur-2),
transform var(--kamu1-dur-2) var(--kamu1-ease-spring);
}
.kamu1-app-hero-prev { left: 16px !important; }
.kamu1-app-hero-next { right: 16px !important; }
.kamu1-app-hero-slider:hover .kamu1-app-hero-nav { opacity: 1; }
.kamu1-app-hero-nav:hover {
background: rgba(255,255,255,0.32) !important;
transform: translateY(-50%) scale(1.08) !important;
}
.kamu1-app-hero-nav:active {
transform: translateY(-50%) scale(0.95) !important;
}
.kamu1-app-hero-nav svg {
width: 22px; height: 22px;
}
@media (max-width: 720px) {
/* Mobilde nav butonlarını GİZLE — swipe ile değiştirme aktif */
.kamu1-app-hero-nav,
.kamu1-app-hero-prev,
.kamu1-app-hero-next {
display: none !important;
}
}
/* ----------------------------------------------------------------------
* 40) SLIDE COUNTER (1/5) — JS enjekte
* ---------------------------------------------------------------------- */
.kbu-hero-counter {
position: absolute;
top: clamp(16px, 2vw, 22px);
right: clamp(20px, 3vw, 28px);
background: rgba(0,0,0,0.45);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
color: #fff;
padding: 6px 14px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
font-feature-settings: "tnum" on;
font-family: var(--kamu1-font-display);
z-index: 3;
border: 1px solid rgba(255,255,255,0.12);
}
.kbu-hero-counter-current {
color: #fff;
font-weight: 900;
}
.kbu-hero-counter-total {
opacity: 0.6;
}
/* ----------------------------------------------------------------------
* 41) KEN BURNS — daha sofistike zoom
* ---------------------------------------------------------------------- */
.kamu1-app-hero-slide .kamu1-app-hero-image {
transition: transform 7s ease-out;
transform-origin: center center;
}
.kamu1-app-hero-slide.is-active .kamu1-app-hero-image {
transform: scale(1.06);
}
.kamu1-app-hero-slider:hover .kamu1-app-hero-image {
transition-duration: 14s;
}
/* Görsel için override YAPMA — tema kendi yönetir */
/* ======================================================================
* § PHASE 3 — BREAKING TICKER POLISH
* ====================================================================== */
/* ----------------------------------------------------------------------
* 42) BREAKING container — modern pill, premium shadow
* ---------------------------------------------------------------------- */
.kamu1-breaking {
border-radius: var(--kamu1-radius-lg) !important;
box-shadow: var(--kamu1-sh-md) !important;
border: 1px solid var(--kamu1-line) !important;
background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(247,248,250,.96)) !important;
transition: box-shadow var(--kamu1-dur-2) var(--kamu1-ease-out),
transform var(--kamu1-dur-2) var(--kamu1-ease-out);
padding: 10px 14px !important;
gap: 14px !important;
}
.kamu1-breaking:hover {
box-shadow: var(--kamu1-sh-lg) !important;
}
/* ----------------------------------------------------------------------
* 43) "Son Dakika" label pill — gradient + pulse ring
* ---------------------------------------------------------------------- */
.kamu1-breaking-label {
background: linear-gradient(135deg, var(--kamu1-red), var(--kamu1-red-dark)) !important;
font-family: var(--kamu1-font-display) !important;
font-weight: 800 !important;
font-size: 12px !important;
letter-spacing: 0.08em !important;
padding: 10px 16px !important;
box-shadow: 0 6px 20px color-mix(in oklab, var(--kamu1-red) 30%, transparent) !important;
border-radius: 999px !important;
white-space: nowrap;
position: relative;
color: #fff !important;
}
.kamu1-breaking-label span {
width: 8px !important;
height: 8px !important;
background: #fff !important;
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(255,255,255,0.4);
animation: kbu-breaking-pulse 1.8s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes kbu-breaking-pulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(255,255,255,0.4); transform: scale(1); }
50% { box-shadow: 0 0 0 8px rgba(255,255,255,0); transform: scale(1.15); }
}
/* ----------------------------------------------------------------------
* 44) Track — fade mask kenarlarda yumuşak
* ---------------------------------------------------------------------- */
.kamu1-breaking-track {
mask-image: linear-gradient(90deg,
transparent 0,
#000 60px,
#000 calc(100% - 60px),
transparent 100%) !important;
-webkit-mask-image: linear-gradient(90deg,
transparent 0,
#000 60px,
#000 calc(100% - 60px),
transparent 100%) !important;
}
/* ----------------------------------------------------------------------
* 45) Haber link tipografi — modern, hover state
* ---------------------------------------------------------------------- */
.kamu1-breaking-loop a {
font-family: var(--kamu1-font) !important;
font-weight: 600 !important;
font-size: 14.5px !important;
letter-spacing: -0.01em !important;
color: var(--kamu1-ink) !important;
transition: color var(--kamu1-dur-1) var(--kamu1-ease-out);
gap: 10px !important;
}
.kamu1-breaking-loop a strong {
font-weight: 700 !important;
}
.kamu1-breaking-loop a:hover {
color: var(--kamu1-red) !important;
}
.kamu1-breaking-loop a:hover strong {
text-decoration: underline;
text-decoration-color: var(--kamu1-red);
text-underline-offset: 3px;
}
/* Haber öncesi kırmızı dot — daha refined */
.kamu1-breaking-loop a::before {
width: 6px !important;
height: 6px !important;
background: var(--kamu1-red) !important;
box-shadow: 0 0 0 2px color-mix(in oklab, var(--kamu1-red) 20%, transparent);
}
/* ----------------------------------------------------------------------
* 46) Time amber pill — premium tarih/saat
* ---------------------------------------------------------------------- */
.kamu1-breaking-loop time {
background: color-mix(in oklab, var(--kamu1-gold) 12%, var(--kamu1-surface)) !important;
color: var(--kamu1-gold) !important;
padding: 3px 9px !important;
border-radius: 999px !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
font-feature-settings: "tnum" on;
border: 1px solid color-mix(in oklab, var(--kamu1-gold) 22%, transparent);
white-space: nowrap;
font-family: var(--kamu1-font-display) !important;
}
/* ----------------------------------------------------------------------
* 47) Toggle "DURDUR" buton — modern pill
* ---------------------------------------------------------------------- */
.kamu1-breaking-toggle {
background: var(--kamu1-surface-2) !important;
color: var(--kamu1-ink-soft) !important;
border: 1px solid var(--kamu1-line) !important;
font-family: var(--kamu1-font-display) !important;
font-weight: 800 !important;
font-size: 11px !important;
letter-spacing: 0.08em !important;
padding: 8px 16px !important;
min-width: auto !important;
min-height: 36px !important;
border-radius: 999px !important;
transition: all var(--kamu1-dur-1) var(--kamu1-ease-out) !important;
cursor: pointer;
box-shadow: none !important;
}
.kamu1-breaking-toggle:hover {
background: var(--kamu1-ink) !important;
color: #fff !important;
border-color: var(--kamu1-ink) !important;
transform: translateY(-1px);
}
.kamu1-breaking-toggle:active {
transform: translateY(0);
}
/* Aktif/durduruldu durum */
.kamu1-breaking-toggle[aria-pressed="true"] {
background: var(--kamu1-red-soft) !important;
color: var(--kamu1-red) !important;
border-color: color-mix(in oklab, var(--kamu1-red) 30%, transparent) !important;
}
/* ----------------------------------------------------------------------
* 48) Dark mode — breaking ticker
* ---------------------------------------------------------------------- */
:root[data-theme="dark"] .kamu1-breaking,
:root[data-kamu1-theme="dark"] .kamu1-breaking {
background: linear-gradient(135deg,
var(--kamu1-surface),
var(--kamu1-surface-2)) !important;
border-color: var(--kamu1-line) !important;
}
:root[data-theme="dark"] .kamu1-breaking-loop a,
:root[data-kamu1-theme="dark"] .kamu1-breaking-loop a {
color: var(--kamu1-ink-aaa, #f8fafc) !important;
}
:root[data-theme="dark"] .kamu1-breaking-loop a:hover,
:root[data-kamu1-theme="dark"] .kamu1-breaking-loop a:hover {
color: var(--kamu1-red) !important;
}
:root[data-theme="dark"] .kamu1-breaking-toggle,
:root[data-kamu1-theme="dark"] .kamu1-breaking-toggle {
background: var(--kamu1-surface-2) !important;
color: var(--kamu1-ink-soft) !important;
border-color: var(--kamu1-line) !important;
}
:root[data-theme="dark"] .kamu1-breaking-toggle:hover,
:root[data-kamu1-theme="dark"] .kamu1-breaking-toggle:hover {
background: #fff !important;
color: var(--kamu1-night) !important;
}
:root[data-theme="dark"] .kamu1-breaking-loop time,
:root[data-kamu1-theme="dark"] .kamu1-breaking-loop time {
background: color-mix(in oklab, var(--kamu1-gold) 18%, transparent) !important;
color: var(--kamu1-gold) !important;
}
/* ----------------------------------------------------------------------
* 49) Mobile — sıkı + animation slower (tema 38s çok hızlı, okunmuyor)
* ---------------------------------------------------------------------- */
@media (max-width: 980px) {
.kamu1-breaking-loop {
animation-duration: 95s !important; /* tema'nın 38s'si yerine yavaş */
}
}
@media (max-width: 720px) {
.kamu1-breaking {
padding: 10px 12px !important;
gap: 8px !important;
}
.kamu1-breaking-label {
font-size: 10px !important;
padding: 6px 12px !important;
letter-spacing: 0.08em !important;
}
.kamu1-breaking-label span {
width: 6px !important;
height: 6px !important;
}
.kamu1-breaking-loop {
animation-duration: 90s !important;
gap: 24px !important;
}
.kamu1-breaking-loop a {
font-size: 13px !important;
gap: 8px !important;
}
.kamu1-breaking-loop time {
font-size: 10px !important;
padding: 2px 7px !important;
}
}
@media (max-width: 480px) {
.kamu1-breaking-loop {
animation-duration: 80s !important;
}
}
/* Touch ile basılınca pause (mobil için) */
.kamu1-breaking-track:active .kamu1-breaking-loop,
.kamu1-breaking-track:hover .kamu1-breaking-loop {
animation-play-state: paused !important;
}
/* ======================================================================
* § PHASE 4 — MARKET STRIP PREMIUM (Public Job Radar bekliyor)
* ====================================================================== */
/* ----------------------------------------------------------------------
* 50) MARKET container — modern premium pill
* ---------------------------------------------------------------------- */
.kamu1-market-strip {
display: grid !important;
grid-template-columns: auto 1fr !important;
gap: 18px !important;
align-items: center !important;
background: linear-gradient(135deg,
rgba(255,255,255,.98),
rgba(247,248,250,.95)) !important;
border: 1px solid var(--kamu1-line) !important;
border-radius: var(--kamu1-radius-lg) !important;
padding: 12px 18px !important;
box-shadow: var(--kamu1-sh-sm) !important;
margin-top: 20px;
transition: box-shadow var(--kamu1-dur-2) var(--kamu1-ease-out);
}
.kamu1-market-strip:hover {
box-shadow: var(--kamu1-sh-md) !important;
}
/* ----------------------------------------------------------------------
* 51) "CANLI PİYASA" eyebrow + yeşil pulse
* ---------------------------------------------------------------------- */
.kamu1-market-strip-head {
display: inline-flex !important;
align-items: center;
gap: 10px;
padding-right: 16px;
border-right: 1px solid var(--kamu1-line);
flex-shrink: 0;
}
.kamu1-market-pulse {
width: 8px !important;
height: 8px !important;
border-radius: 50%;
background: var(--kamu1-green) !important;
box-shadow: 0 0 0 3px color-mix(in oklab, var(--kamu1-green) 25%, transparent);
animation: kbu-market-pulse 1.8s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes kbu-market-pulse {
0%, 100% {
box-shadow: 0 0 0 3px color-mix(in oklab, var(--kamu1-green) 28%, transparent);
transform: scale(1);
}
50% {
box-shadow: 0 0 0 7px color-mix(in oklab, var(--kamu1-green) 4%, transparent);
transform: scale(1.2);
}
}
.kamu1-market-eyebrow {
font-family: var(--kamu1-font-display) !important;
font-weight: 800 !important;
font-size: 11px !important;
letter-spacing: 0.1em !important;
text-transform: uppercase;
color: var(--kamu1-muted-strong) !important;
white-space: nowrap;
}
/* ----------------------------------------------------------------------
* 52) Market track — horizontal scroll, snap, scrollbar gizli
* ---------------------------------------------------------------------- */
.kamu1-market-strip-track {
display: flex !important;
gap: 12px !important;
overflow-x: auto;
flex: 1;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
mask-image: linear-gradient(90deg,
#000 0,
#000 calc(100% - 28px),
transparent 100%);
-webkit-mask-image: linear-gradient(90deg,
#000 0,
#000 calc(100% - 28px),
transparent 100%);
}
.kamu1-market-strip-track::-webkit-scrollbar { display: none; }
/* ----------------------------------------------------------------------
* 53) Market items — pill, hover
* ---------------------------------------------------------------------- */
.kamu1-market-item {
display: inline-flex !important;
align-items: center;
gap: 8px;
padding: 7px 13px !important;
border-radius: 999px !important;
background: var(--kamu1-surface-2) !important;
border: 1px solid transparent !important;
flex-shrink: 0;
scroll-snap-align: start;
transition: all var(--kamu1-dur-1) var(--kamu1-ease-out);
}
.kamu1-market-item:hover {
background: var(--kamu1-surface) !important;
border-color: var(--kamu1-line) !important;
transform: translateY(-1px);
box-shadow: var(--kamu1-sh-sm);
}
.kamu1-market-label {
font-size: 11.5px !important;
font-weight: 700 !important;
font-family: var(--kamu1-font-display) !important;
letter-spacing: 0.04em !important;
text-transform: uppercase;
color: var(--kamu1-muted-strong) !important;
}
.kamu1-market-value {
font-size: 13.5px !important;
font-weight: 800 !important;
color: var(--kamu1-ink) !important;
font-feature-settings: "tnum" on, "ss01" on;
font-family: var(--kamu1-font-display) !important;
letter-spacing: -0.015em !important;
}
/* Variant renkleri — sol dot ile */
.kamu1-market-item--currency .kamu1-market-label::before,
.kamu1-market-item--metal .kamu1-market-label::before,
.kamu1-market-item--index .kamu1-market-label::before,
.kamu1-market-item--crypto .kamu1-market-label::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 6px;
vertical-align: 1px;
}
.kamu1-market-item--currency .kamu1-market-label::before { background: var(--kamu1-blue); }
.kamu1-market-item--metal .kamu1-market-label::before { background: var(--kamu1-gold); }
.kamu1-market-item--index .kamu1-market-label::before { background: var(--kamu1-green); }
.kamu1-market-item--crypto .kamu1-market-label::before { background: var(--kamu1-red); }
/* Item arasında ince ayraç (alternatif) */
.kamu1-market-item + .kamu1-market-item {
position: relative;
}
/* ----------------------------------------------------------------------
* 54) Dark mode
* ---------------------------------------------------------------------- */
:root[data-theme="dark"] .kamu1-market-strip,
:root[data-kamu1-theme="dark"] .kamu1-market-strip {
background: linear-gradient(135deg,
var(--kamu1-surface),
var(--kamu1-surface-2)) !important;
border-color: var(--kamu1-line) !important;
}
:root[data-theme="dark"] .kamu1-market-item,
:root[data-kamu1-theme="dark"] .kamu1-market-item {
background: rgba(255,255,255,0.04) !important;
}
:root[data-theme="dark"] .kamu1-market-item:hover,
:root[data-kamu1-theme="dark"] .kamu1-market-item:hover {
background: rgba(255,255,255,0.08) !important;
}
:root[data-theme="dark"] .kamu1-market-value,
:root[data-kamu1-theme="dark"] .kamu1-market-value {
color: var(--kamu1-ink-aaa, #f8fafc) !important;
}
:root[data-theme="dark"] .kamu1-market-eyebrow,
:root[data-kamu1-theme="dark"] .kamu1-market-eyebrow,
:root[data-theme="dark"] .kamu1-market-label,
:root[data-kamu1-theme="dark"] .kamu1-market-label {
color: var(--kamu1-ink-soft) !important;
}
:root[data-theme="dark"] .kamu1-market-strip-head,
:root[data-kamu1-theme="dark"] .kamu1-market-strip-head {
border-right-color: var(--kamu1-line) !important;
}
/* ----------------------------------------------------------------------
* 55) Mobile market strip
* ---------------------------------------------------------------------- */
@media (max-width: 720px) {
.kamu1-market-strip {
grid-template-columns: 1fr !important;
gap: 10px !important;
padding: 10px 12px !important;
}
.kamu1-market-strip-head {
padding-right: 0;
border-right: 0;
padding-bottom: 6px;
border-bottom: 1px solid var(--kamu1-line);
}
.kamu1-market-strip-track {
gap: 8px !important;
}
.kamu1-market-item {
padding: 5px 10px !important;
gap: 6px;
}
.kamu1-market-label { font-size: 10.5px !important; }
.kamu1-market-value { font-size: 12px !important; }
}
/* ======================================================================
* § PHASE 4b — PUBLIC JOB RADAR (template hazır, customizer'dan açıldığında devreye girer)
* ====================================================================== */
/* ----------------------------------------------------------------------
* 56) Public Job Radar — kamu1'in fark yaratan widget'ı
* Tema'da template-parts/home/public-job-radar.php var
* Class beklenenler: .kamu1-job-radar, .kamu1-job-card, .kamu1-deadline
* ---------------------------------------------------------------------- */
.kamu1-job-radar,
.kamu1-public-job-radar {
background: linear-gradient(135deg,
var(--kamu1-night) 0%,
color-mix(in oklab, var(--kamu1-night) 80%, var(--kamu1-red) 20%) 100%) !important;
border-radius: var(--kamu1-radius-lg) !important;
padding: clamp(20px, 3vw, 32px) !important;
color: #fff;
position: relative;
overflow: hidden;
box-shadow: var(--kamu1-sh-lg);
margin-top: 24px;
}
.kamu1-job-radar::before,
.kamu1-public-job-radar::before {
content: "";
position: absolute;
width: 400px; height: 400px;
background: radial-gradient(circle,
color-mix(in oklab, var(--kamu1-gold) 22%, transparent) 0%,
transparent 70%);
top: -150px; right: -100px;
pointer-events: none;
}
.kamu1-job-radar-head,
.kamu1-public-job-radar-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 20px;
position: relative; z-index: 1;
}
.kamu1-job-radar-title,
.kamu1-public-job-radar-title {
font-family: var(--kamu1-font-display) !important;
font-size: clamp(20px, 2.4vw, 28px) !important;
font-weight: 800 !important;
letter-spacing: -0.025em !important;
color: #fff !important;
margin: 0;
}
.kamu1-job-card,
.kamu1-public-job-card,
[class*="job-card"] {
background: rgba(255,255,255,0.06) !important;
border: 1px solid rgba(255,255,255,0.1) !important;
border-radius: var(--kamu1-radius) !important;
padding: 16px !important;
color: #fff;
transition: all var(--kamu1-dur-2) var(--kamu1-ease-out);
position: relative; z-index: 1;
}
.kamu1-job-card:hover,
[class*="job-card"]:hover {
background: rgba(255,255,255,0.10) !important;
transform: translateY(-2px);
border-color: rgba(255,255,255,0.18) !important;
}
/* Deadline mini countdown */
.kamu1-deadline,
.kamu1-deadline-mini,
[class*="deadline"] {
display: inline-flex;
align-items: center;
gap: 6px;
background: color-mix(in oklab, var(--kamu1-gold) 22%, transparent) !important;
color: var(--kamu1-gold) !important;
font-family: var(--kamu1-font-display) !important;
font-weight: 800 !important;
font-size: 11px !important;
letter-spacing: 0.04em;
padding: 5px 10px;
border-radius: 999px;
border: 1px solid color-mix(in oklab, var(--kamu1-gold) 30%, transparent);
}
.kamu1-deadline::before,
.kamu1-deadline-mini::before,
[class*="deadline"]::before {
content: "";
width: 5px; height: 5px;
border-radius: 50%;
background: var(--kamu1-gold);
box-shadow: 0 0 0 2px color-mix(in oklab, var(--kamu1-gold) 25%, transparent);
animation: kbu-market-pulse 1.6s ease-in-out infinite;
}
/* ----------------------------------------------------------------------
* 57) POPULAR POSTS / NUMBERED LIST — kontrast + premium polish (v1.0.71)
*
* Sorun: tema bu widget için kartı sabit beyaz veriyor ve metni
* `var(--kamu1-ink)` ile boyuyor. Dark mode'da ink açık renge dönünce
* beyaz kart + açık metin → metin okunmaz hâle geliyordu.
*
* Çözüm: dark mode'da kapsayıcı kırmızı bg daha derin/mat bir tona,
* iç kart koyu lacivert glass surface'a, başlık linkleri parlak beyaza.
* Light mode için yumuşak hover micro-interaction eklendi.
* ---------------------------------------------------------------------- */
/* Universal — light + dark hover polish */
.kamu1-dynamic-numbered li {
transition: transform .25s ease, background-color .25s ease;
border-radius: 10px;
padding: 9px 10px;
}
.kamu1-dynamic-numbered li:hover {
background: color-mix(in oklab, var(--kamu1-red) 8%, transparent);
transform: translateX(3px);
}
.kamu1-dynamic-numbered a {
transition: color .2s ease;
}
/* Dark mode kapsayıcı — daha derin, kirli kırmızı (göz yormaz) */
:root[data-theme="dark"] .kamu1-dynamic-home-section--popular_posts,
:root[data-kamu1-theme="dark"] .kamu1-dynamic-home-section--popular_posts,
:root[data-theme="dark"] .kamu1-dynamic-home-section--numbered_list,
:root[data-kamu1-theme="dark"] .kamu1-dynamic-home-section--numbered_list {
background:
radial-gradient(circle at 82% 18%, rgba(254,215,170,0.08) 0, transparent 42%),
radial-gradient(circle at 18% 82%, rgba(254,226,226,0.05) 0, transparent 44%),
linear-gradient(135deg, #3f0d0d 0%, #5b1212 36%, #7a1818 100%) !important;
box-shadow: 0 18px 48px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04) !important;
}
/* İç kart — koyu glass surface */
:root[data-theme="dark"] .kamu1-dynamic-home-section--popular_posts .kamu1-dynamic-numbered,
:root[data-kamu1-theme="dark"] .kamu1-dynamic-home-section--popular_posts .kamu1-dynamic-numbered,
:root[data-theme="dark"] .kamu1-dynamic-home-section--numbered_list .kamu1-dynamic-numbered,
:root[data-kamu1-theme="dark"] .kamu1-dynamic-home-section--numbered_list .kamu1-dynamic-numbered {
background: rgba(15, 23, 42, 0.88) !important;
border: 1px solid rgba(248, 250, 252, 0.08) !important;
box-shadow:
0 12px 32px rgba(0,0,0,0.5),
inset 0 1px 0 rgba(255,255,255,0.04) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* Başlık linkleri — beyaz, kontrastlı */
:root[data-theme="dark"] .kamu1-dynamic-home-section--popular_posts .kamu1-dynamic-numbered a,
:root[data-kamu1-theme="dark"] .kamu1-dynamic-home-section--popular_posts .kamu1-dynamic-numbered a,
:root[data-theme="dark"] .kamu1-dynamic-home-section--numbered_list .kamu1-dynamic-numbered a,
:root[data-kamu1-theme="dark"] .kamu1-dynamic-home-section--numbered_list .kamu1-dynamic-numbered a {
color: #f8fafc !important;
-webkit-text-fill-color: #f8fafc;
text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
:root[data-theme="dark"] .kamu1-dynamic-home-section--popular_posts .kamu1-dynamic-numbered a:hover,
:root[data-kamu1-theme="dark"] .kamu1-dynamic-home-section--popular_posts .kamu1-dynamic-numbered a:hover,
:root[data-theme="dark"] .kamu1-dynamic-home-section--numbered_list .kamu1-dynamic-numbered a:hover,
:root[data-kamu1-theme="dark"] .kamu1-dynamic-home-section--numbered_list .kamu1-dynamic-numbered a:hover {
color: #fbbf24 !important;
-webkit-text-fill-color: #fbbf24;
}
/* Liste item hover — dark mode subtle */
:root[data-theme="dark"] .kamu1-dynamic-numbered li:hover,
:root[data-kamu1-theme="dark"] .kamu1-dynamic-numbered li:hover {
background: rgba(248, 250, 252, 0.05);
}
/* Divider line dark mode */
:root[data-theme="dark"] .kamu1-dynamic-numbered li,
:root[data-kamu1-theme="dark"] .kamu1-dynamic-numbered li {
border-bottom-color: rgba(248, 250, 252, 0.06) !important;
}
/* "Tümü →" pill dark mode — sıcak amber */
:root[data-theme="dark"] .kamu1-dynamic-home-section--popular_posts .kamu1-module-title a,
:root[data-kamu1-theme="dark"] .kamu1-dynamic-home-section--popular_posts .kamu1-module-title a,
:root[data-theme="dark"] .kamu1-dynamic-home-section--numbered_list .kamu1-module-title a,
:root[data-kamu1-theme="dark"] .kamu1-dynamic-home-section--numbered_list .kamu1-module-title a {
color: #7f1d1d !important;
background: linear-gradient(135deg, #fde68a, #fbbf24) !important;
box-shadow: 0 4px 14px rgba(251, 191, 36, 0.4) !important;
border: 0 !important;
}
/* Mobil — 2 sütun çok dar kalıyor, tek sütuna düşür */
@media (max-width: 540px) {
.kamu1-dynamic-numbered {
grid-template-columns: 1fr !important;
gap: 4px !important;
}
.kamu1-dynamic-numbered li {
grid-template-columns: 36px 1fr !important;
padding: 8px 6px !important;
}
.kamu1-dynamic-numbered span {
width: 32px !important;
height: 32px !important;
font-size: 11px !important;
}
.kamu1-dynamic-numbered a {
font-size: 14.5px !important;
line-height: 1.3 !important;
}
}
/* ----------------------------------------------------------------------
* 58) PHASE 5 — Kategori section variant'ları finetune (v1.0.72)
*
* editor_picks → ★ icon, 3-col grid balance
* mosaic_grid → lead kart editorial typo + 16:11 media ratio
* split_cards → wide kart body centered, sol büyük kart vurgusu
* tüm kartlar → media zoom on hover, dark border, focus halo
* ---------------------------------------------------------------------- */
/* === Universal kart polish === */
.kamu1-news-card { position: relative; }
.kamu1-news-card-media {
position: relative;
}
.kamu1-news-card-media img {
transition: transform .45s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
.kamu1-news-card:hover .kamu1-news-card-media img {
transform: scale(1.045);
}
.kamu1-news-card h3 {
text-wrap: balance;
}
/* Focus halo — outline yerine soft glow */
.kamu1-news-card:focus-within {
box-shadow:
0 0 0 3px color-mix(in oklab, var(--kamu1-red) 55%, transparent),
0 18px 46px rgba(11,18,32,.10);
}
/* === editor_picks — ★ icon module title h2'sinde === */
.kamu1-dynamic-home-section--editor_picks .kamu1-module-title h2::before {
content: "★";
margin-right: 10px;
color: var(--kamu1-gold);
font-size: 0.85em;
vertical-align: 2px;
filter: drop-shadow(0 1px 4px rgba(218, 165, 32, 0.35));
}
@media (min-width: 720px) {
.kamu1-dynamic-grid { gap: 22px; }
}
/* === mosaic_grid — lead kart editorial === */
.kamu1-dynamic-mosaic > .kamu1-news-card--lead h3 {
letter-spacing: -0.022em;
line-height: 1.05;
}
/* Lead kart column layout — media tam 16:9, body altta esnek */
@media (min-width: 720px) {
.kamu1-dynamic-mosaic > .kamu1-news-card--lead {
display: flex !important;
flex-direction: column !important;
}
.kamu1-dynamic-mosaic > .kamu1-news-card--lead .kamu1-news-card-media {
aspect-ratio: 16 / 9 !important;
height: auto !important;
min-height: 0 !important;
width: 100%;
}
.kamu1-dynamic-mosaic > .kamu1-news-card--lead .kamu1-news-card-body {
flex: 1;
}
}
/* === split_cards — sol büyük kart + wide kart body centered === */
.kamu1-dynamic-split > .kamu1-news-card:first-child h3 {
letter-spacing: -0.022em;
font-size: clamp(24px, 2.2vw, 36px);
line-height: 1.08;
}
.kamu1-news-card--wide .kamu1-news-card-body {
padding: 20px 22px;
display: flex;
flex-direction: column;
justify-content: center;
}
/* === Dark mode kart border + shadow tutarlılığı === */
:root[data-theme="dark"] .kamu1-news-card,
:root[data-kamu1-theme="dark"] .kamu1-news-card {
border-color: rgba(248, 250, 252, 0.06) !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.32);
}
:root[data-theme="dark"] .kamu1-news-card:hover,
:root[data-kamu1-theme="dark"] .kamu1-news-card:hover {
border-color: rgba(248, 250, 252, 0.14) !important;
box-shadow: 0 18px 48px rgba(0,0,0,0.55);
}
/* Dark mode media background — neutral gray, kart koyu bg ile uyumlu */
:root[data-theme="dark"] .kamu1-news-card-media,
:root[data-kamu1-theme="dark"] .kamu1-news-card-media {
background: #0f172a;
}
/* === Mobil mosaic — ilk kart full width === */
@media (max-width: 720px) {
.kamu1-dynamic-mosaic > .kamu1-news-card:first-child {
grid-column: 1 / -1;
}
.kamu1-dynamic-grid { gap: 14px; }
}
/* ----------------------------------------------------------------------
* 59) TOC — article single sayfada otomatik içindekiler kutusu
* ---------------------------------------------------------------------- */
.kbu-toc {
display: block;
margin: 28px 0 32px;
padding: 0;
border: 1px solid rgba(199, 25, 32, 0.18);
border-radius: 14px;
background: linear-gradient(180deg,
color-mix(in oklab, var(--kamu1-red) 4%, #fff) 0%,
#fff 70%);
box-shadow: 0 6px 20px rgba(11, 18, 32, 0.05);
overflow: hidden;
font-family: var(--kamu1-font-body, Inter, system-ui);
break-inside: avoid;
}
.kbu-toc-head {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 14px 18px;
background: transparent;
border: 0;
cursor: pointer;
color: var(--kamu1-ink);
font-size: 14px;
font-weight: 800;
letter-spacing: 0.02em;
text-align: left;
}
.kbu-toc-head svg:first-child {
color: var(--kamu1-red);
flex-shrink: 0;
}
.kbu-toc-head span {
flex: 1;
text-transform: uppercase;
font-size: 12.5px;
letter-spacing: 0.06em;
}
.kbu-toc-chevron {
transition: transform .25s ease;
color: var(--kamu1-ink-soft);
}
.kbu-toc.kbu-toc--collapsed .kbu-toc-chevron {
transform: rotate(-90deg);
}
.kbu-toc-list {
margin: 0;
padding: 0 18px 18px 38px;
list-style: decimal;
counter-reset: kbu-toc-counter;
border-top: 1px dashed rgba(199, 25, 32, 0.14);
padding-top: 14px;
max-height: 800px;
overflow: hidden;
transition: max-height .35s ease, padding .25s ease;
}
.kbu-toc.kbu-toc--collapsed .kbu-toc-list {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
border-top-color: transparent;
}
.kbu-toc-item {
margin: 0;
padding: 4px 0;
color: var(--kamu1-ink-soft);
font-size: 14px;
line-height: 1.45;
}
.kbu-toc-item--h3 {
padding-left: 14px;
font-size: 13px;
list-style: '— ';
}
.kbu-toc-item a {
color: inherit;
text-decoration: none;
transition: color .15s ease;
border-bottom: 1px solid transparent;
}
.kbu-toc-item a:hover {
color: var(--kamu1-red);
border-bottom-color: color-mix(in oklab, var(--kamu1-red) 40%, transparent);
}
.kbu-toc-item a.is-active {
color: var(--kamu1-red);
font-weight: 800;
}
/* Dark mode TOC */
:root[data-theme="dark"] .kbu-toc,
:root[data-kamu1-theme="dark"] .kbu-toc {
border-color: rgba(248, 250, 252, 0.12);
background: linear-gradient(180deg,
rgba(248, 250, 252, 0.04) 0%,
rgba(15, 23, 42, 0.6) 100%);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
:root[data-theme="dark"] .kbu-toc-head,
:root[data-kamu1-theme="dark"] .kbu-toc-head {
color: var(--kamu1-ink);
}
:root[data-theme="dark"] .kbu-toc-list,
:root[data-kamu1-theme="dark"] .kbu-toc-list {
border-top-color: rgba(248, 250, 252, 0.1);
}
:root[data-theme="dark"] .kbu-toc-item,
:root[data-kamu1-theme="dark"] .kbu-toc-item {
color: var(--kamu1-ink-soft);
}
:root[data-theme="dark"] .kbu-toc-item a:hover,
:root[data-kamu1-theme="dark"] .kbu-toc-item a:hover,
:root[data-theme="dark"] .kbu-toc-item a.is-active,
:root[data-kamu1-theme="dark"] .kbu-toc-item a.is-active {
color: #fca5a5;
}
/* ----------------------------------------------------------------------
* 59b) TEMA TOC POLISH — `.kamu1-toc` widget'ı için editorial kutu
*
* Tema kendi TOC widget'ını render eder (.kamu1-toc + data-kamu1-toc).
* Sade görünmesini engelleyelim ve kbu-toc ile aynı estetik kimlikte
* gösterelim. Yapı:
* ---------------------------------------------------------------------- */
.kamu1-toc {
display: block !important;
margin: 28px 0 32px;
padding: 0;
border: 1px solid rgba(199, 25, 32, 0.18);
border-radius: 14px;
background: linear-gradient(180deg,
color-mix(in oklab, var(--kamu1-red) 4%, #fff) 0%,
#fff 70%);
box-shadow: 0 6px 20px rgba(11, 18, 32, 0.05);
overflow: hidden;
font-family: var(--kamu1-font-body, Inter, system-ui);
break-inside: avoid;
}
/* hidden attr ile gelirse görünür kalsın */
.kamu1-toc[hidden] {
display: block !important;
}
.kamu1-toc [data-kamu1-toc-toggle],
.kamu1-toc > button {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 14px 18px;
background: transparent;
border: 0;
cursor: pointer;
color: var(--kamu1-ink);
font-family: var(--kamu1-font-display, 'Plus Jakarta Sans', Inter, system-ui);
font-size: 13px;
font-weight: 800;
letter-spacing: 0.06em;
text-align: left;
text-transform: uppercase;
position: relative;
}
.kamu1-toc [data-kamu1-toc-toggle]::before,
.kamu1-toc > button::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
background: var(--kamu1-red);
-webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
flex-shrink: 0;
}
.kamu1-toc [data-kamu1-toc-toggle]::after,
.kamu1-toc > button::after {
content: "";
margin-left: auto;
width: 14px;
height: 14px;
background: var(--kamu1-ink-soft);
-webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
transition: transform .25s ease;
}
.kamu1-toc[aria-expanded="false"] [data-kamu1-toc-toggle]::after,
.kamu1-toc.is-collapsed [data-kamu1-toc-toggle]::after,
.kamu1-toc [data-kamu1-toc-toggle][aria-expanded="false"]::after {
transform: rotate(-90deg);
}
.kamu1-toc > ol {
margin: 0;
padding: 14px 18px 18px 38px;
list-style: decimal;
border-top: 1px dashed rgba(199, 25, 32, 0.14);
}
.kamu1-toc > ol li {
margin: 0;
padding: 5px 0;
color: var(--kamu1-ink-soft);
font-size: 14.5px;
line-height: 1.45;
}
.kamu1-toc > ol li::marker {
color: var(--kamu1-red);
font-weight: 800;
}
.kamu1-toc > ol ol {
padding-left: 1.4em;
margin-top: 4px;
list-style: '— ';
}
.kamu1-toc > ol ol li {
font-size: 13.5px;
}
.kamu1-toc a {
color: inherit;
text-decoration: none;
transition: color .15s ease;
border-bottom: 1px solid transparent;
}
.kamu1-toc a:hover {
color: var(--kamu1-red);
border-bottom-color: color-mix(in oklab, var(--kamu1-red) 40%, transparent);
}
.kamu1-toc a.is-active,
.kamu1-toc li.is-active > a {
color: var(--kamu1-red);
font-weight: 800;
}
/* Dark mode tema TOC */
:root[data-theme="dark"] .kamu1-toc,
:root[data-kamu1-theme="dark"] .kamu1-toc {
border-color: rgba(248, 250, 252, 0.12);
background: linear-gradient(180deg,
rgba(248, 250, 252, 0.04) 0%,
rgba(15, 23, 42, 0.6) 100%);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
:root[data-theme="dark"] .kamu1-toc [data-kamu1-toc-toggle],
:root[data-kamu1-theme="dark"] .kamu1-toc [data-kamu1-toc-toggle],
:root[data-theme="dark"] .kamu1-toc > button,
:root[data-kamu1-theme="dark"] .kamu1-toc > button {
color: var(--kamu1-ink-aaa);
}
:root[data-theme="dark"] .kamu1-toc > ol,
:root[data-kamu1-theme="dark"] .kamu1-toc > ol {
border-top-color: rgba(248, 250, 252, 0.1);
}
:root[data-theme="dark"] .kamu1-toc > ol li,
:root[data-kamu1-theme="dark"] .kamu1-toc > ol li {
color: var(--kamu1-ink-soft);
}
:root[data-theme="dark"] .kamu1-toc a:hover,
:root[data-kamu1-theme="dark"] .kamu1-toc a:hover,
:root[data-theme="dark"] .kamu1-toc a.is-active,
:root[data-kamu1-theme="dark"] .kamu1-toc a.is-active,
:root[data-theme="dark"] .kamu1-toc li.is-active > a,
:root[data-kamu1-theme="dark"] .kamu1-toc li.is-active > a {
color: #fca5a5;
}
:root[data-theme="dark"] .kamu1-toc > ol li::marker,
:root[data-kamu1-theme="dark"] .kamu1-toc > ol li::marker {
color: #fca5a5;
}
/* ----------------------------------------------------------------------
* 60) CONTENT TYPOGRAPHY — okunabilirlik + editorial polish
* ---------------------------------------------------------------------- */
.kamu1-content {
font-family: var(--kamu1-font-body, Inter, system-ui);
font-size: clamp(16.5px, 1.05vw, 18.5px);
line-height: 1.78;
color: var(--kamu1-ink);
letter-spacing: 0.005em;
}
.kamu1-content > p {
margin: 0 0 1.15em;
text-wrap: pretty;
hanging-punctuation: first last;
}
/* İlk paragraf — soft lead (dropcap yerine biraz daha büyük) */
.kamu1-content > p:first-of-type {
font-size: 1.06em;
color: color-mix(in oklab, var(--kamu1-ink) 92%, var(--kamu1-night));
}
/* H2 — editorial divider + sıcak gradient */
.kamu1-content h2 {
position: relative;
margin: 2em 0 0.6em;
padding-top: 0.6em;
font-family: var(--kamu1-font-display, 'Plus Jakarta Sans', Inter, system-ui);
font-size: clamp(22px, 1.7vw, 28px);
font-weight: 800;
letter-spacing: -0.018em;
line-height: 1.18;
color: var(--kamu1-ink-aaa);
text-wrap: balance;
}
.kamu1-content h2::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 56px;
height: 3px;
background: linear-gradient(90deg, var(--kamu1-red), var(--kamu1-gold));
border-radius: 2px;
}
/* H3 */
.kamu1-content h3 {
margin: 1.6em 0 0.5em;
font-family: var(--kamu1-font-display, 'Plus Jakarta Sans', Inter, system-ui);
font-size: clamp(18px, 1.35vw, 22px);
font-weight: 800;
letter-spacing: -0.012em;
line-height: 1.22;
color: var(--kamu1-ink-aaa);
}
/* Inline link — soft underline animasyonu */
.kamu1-content p a,
.kamu1-content li a {
color: var(--kamu1-red);
text-decoration: none;
background-image: linear-gradient(currentColor, currentColor);
background-size: 100% 1px;
background-position: 0 100%;
background-repeat: no-repeat;
padding-bottom: 1px;
transition: background-size .25s ease, color .15s ease;
}
.kamu1-content p a:hover,
.kamu1-content li a:hover {
background-size: 0 1px;
color: var(--kamu1-night);
}
/* Listeler */
.kamu1-content ul,
.kamu1-content ol {
margin: 0 0 1.2em;
padding-left: 1.6em;
}
.kamu1-content ul li::marker {
color: var(--kamu1-red);
}
.kamu1-content ol li::marker {
color: var(--kamu1-red);
font-weight: 800;
}
.kamu1-content li {
margin-bottom: 0.45em;
}
/* Blockquote — sıcak editorial alıntı */
.kamu1-content blockquote {
margin: 1.5em 0;
padding: 18px 22px 18px 26px;
border-left: 4px solid var(--kamu1-red);
background: color-mix(in oklab, var(--kamu1-red) 4%, transparent);
border-radius: 0 12px 12px 0;
font-style: italic;
font-size: 1.06em;
line-height: 1.6;
color: color-mix(in oklab, var(--kamu1-ink) 88%, var(--kamu1-red));
position: relative;
}
.kamu1-content blockquote::before {
content: "\201C";
position: absolute;
left: 8px;
top: -4px;
font-size: 2.2em;
line-height: 1;
color: color-mix(in oklab, var(--kamu1-red) 30%, transparent);
font-family: Georgia, serif;
}
/* Inline code + pre */
.kamu1-content code {
font-family: ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
font-size: 0.92em;
padding: 2px 7px;
border-radius: 6px;
background: color-mix(in oklab, var(--kamu1-night) 6%, transparent);
color: var(--kamu1-night);
}
.kamu1-content pre {
margin: 1.3em 0;
padding: 16px 18px;
border-radius: 12px;
overflow-x: auto;
background: #0f172a;
color: #f1f5f9;
font-size: 14px;
line-height: 1.55;
}
.kamu1-content pre code {
background: transparent;
color: inherit;
padding: 0;
}
/* Resim + figure caption */
.kamu1-content img,
.kamu1-content figure img {
max-width: 100%;
height: auto;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(11, 18, 32, 0.08);
}
.kamu1-content figure {
margin: 1.6em 0;
}
.kamu1-content figcaption {
margin-top: 8px;
font-size: 13.5px;
font-style: italic;
color: var(--kamu1-ink-soft);
text-align: center;
}
/* Table */
.kamu1-content table {
width: 100%;
margin: 1.4em 0;
border-collapse: collapse;
font-size: 14.5px;
overflow-x: auto;
display: block;
}
.kamu1-content table th,
.kamu1-content table td {
padding: 10px 14px;
border-bottom: 1px solid rgba(221, 227, 234, 0.7);
text-align: left;
}
.kamu1-content table thead th {
background: color-mix(in oklab, var(--kamu1-red) 8%, transparent);
color: var(--kamu1-ink-aaa);
font-weight: 800;
}
/* HR divider */
.kamu1-content hr {
margin: 2.2em auto;
border: 0;
height: 1px;
width: 60%;
background: linear-gradient(90deg, transparent, var(--kamu1-red), transparent);
opacity: 0.5;
}
/* Dark mode content tipografi */
:root[data-theme="dark"] .kamu1-content,
:root[data-kamu1-theme="dark"] .kamu1-content {
color: var(--kamu1-ink);
}
:root[data-theme="dark"] .kamu1-content h2,
:root[data-kamu1-theme="dark"] .kamu1-content h2,
:root[data-theme="dark"] .kamu1-content h3,
:root[data-kamu1-theme="dark"] .kamu1-content h3 {
color: var(--kamu1-ink-aaa);
}
:root[data-theme="dark"] .kamu1-content p a,
:root[data-kamu1-theme="dark"] .kamu1-content p a,
:root[data-theme="dark"] .kamu1-content li a,
:root[data-kamu1-theme="dark"] .kamu1-content li a {
color: #fca5a5;
}
:root[data-theme="dark"] .kamu1-content p a:hover,
:root[data-kamu1-theme="dark"] .kamu1-content p a:hover,
:root[data-theme="dark"] .kamu1-content li a:hover,
:root[data-kamu1-theme="dark"] .kamu1-content li a:hover {
color: #fbbf24;
}
:root[data-theme="dark"] .kamu1-content blockquote,
:root[data-kamu1-theme="dark"] .kamu1-content blockquote {
background: rgba(252, 165, 165, 0.06);
border-left-color: #fca5a5;
color: var(--kamu1-ink);
}
:root[data-theme="dark"] .kamu1-content code,
:root[data-kamu1-theme="dark"] .kamu1-content code {
background: rgba(248, 250, 252, 0.08);
color: #fde68a;
}
:root[data-theme="dark"] .kamu1-content table th,
:root[data-kamu1-theme="dark"] .kamu1-content table th,
:root[data-theme="dark"] .kamu1-content table td,
:root[data-kamu1-theme="dark"] .kamu1-content table td {
border-bottom-color: rgba(248, 250, 252, 0.08);
}
:root[data-theme="dark"] .kamu1-content table thead th,
:root[data-kamu1-theme="dark"] .kamu1-content table thead th {
background: rgba(252, 165, 165, 0.08);
}
/* ----------------------------------------------------------------------
* 61) RELATED NEWS — Benzer haberler section polish
* ---------------------------------------------------------------------- */
.kamu1-related {
margin-top: 48px;
padding-top: 32px;
position: relative;
border-top: 1px solid rgba(221, 227, 234, 0.5);
}
.kamu1-related .kamu1-section-head {
margin-bottom: 22px;
}
.kamu1-related .kamu1-kicker {
margin: 0 0 4px;
font-size: 11px;
font-weight: 950;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--kamu1-red);
}
.kamu1-related h2 {
margin: 0;
font-family: var(--kamu1-font-display, 'Plus Jakarta Sans');
font-size: clamp(22px, 2vw, 30px);
font-weight: 900;
letter-spacing: -0.02em;
line-height: 1.1;
color: var(--kamu1-ink-aaa);
}
.kamu1-related-slider {
display: flex;
gap: 18px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding: 4px;
padding: 4px 4px 22px;
scrollbar-width: thin;
scrollbar-color: var(--kamu1-red) transparent;
-webkit-overflow-scrolling: touch;
}
.kamu1-related-slider::-webkit-scrollbar {
height: 6px;
}
.kamu1-related-slider::-webkit-scrollbar-track {
background: transparent;
}
.kamu1-related-slider::-webkit-scrollbar-thumb {
background: color-mix(in oklab, var(--kamu1-red) 45%, transparent);
border-radius: 3px;
}
.kamu1-related-slide {
flex: 0 0 280px;
scroll-snap-align: start;
}
@media (min-width: 720px) {
.kamu1-related-slide {
flex: 0 0 320px;
}
}
.kamu1-news-card--related {
height: 100%;
display: flex;
flex-direction: column;
}
.kamu1-news-card--related .kamu1-news-card-body {
padding: 14px 16px;
flex: 1;
}
.kamu1-news-card--related h3 {
font-size: 15.5px;
line-height: 1.3;
margin: 0;
text-wrap: balance;
}
/* Dark mode related */
:root[data-theme="dark"] .kamu1-related,
:root[data-kamu1-theme="dark"] .kamu1-related {
border-top-color: rgba(248, 250, 252, 0.08);
}
:root[data-theme="dark"] .kamu1-related h2,
:root[data-kamu1-theme="dark"] .kamu1-related h2 {
color: var(--kamu1-ink-aaa);
}
:root[data-theme="dark"] .kamu1-related .kamu1-kicker,
:root[data-kamu1-theme="dark"] .kamu1-related .kamu1-kicker {
color: #fca5a5;
}
/* ----------------------------------------------------------------------
* 62) PHASE 7 — Newsletter signup section (footer üstü)
* ---------------------------------------------------------------------- */
.kbu-newsletter {
position: relative;
margin: 0;
padding: 56px 24px;
background:
radial-gradient(circle at 18% 30%, rgba(254, 215, 170, 0.18) 0, transparent 45%),
radial-gradient(circle at 82% 75%, rgba(252, 165, 165, 0.22) 0, transparent 50%),
linear-gradient(135deg, #7f1d1d 0%, #991b1b 45%, #b91c1c 100%);
color: #f8fafc;
overflow: hidden;
border-bottom: 4px solid #fbbf24;
}
.kbu-newsletter::before {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(45deg,
rgba(255, 255, 255, 0.02) 0 80px,
transparent 80px 160px);
pointer-events: none;
}
.kbu-newsletter-inner {
position: relative;
max-width: 980px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 36px;
align-items: center;
}
.kbu-newsletter-text {
min-width: 0;
}
.kbu-newsletter-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 10px;
padding: 6px 14px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 999px;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #fef3c7;
backdrop-filter: blur(8px);
}
.kbu-newsletter-kicker svg {
color: #fde68a;
}
.kbu-newsletter h3 {
margin: 0 0 8px;
font-family: var(--kamu1-font-display, 'Plus Jakarta Sans', Inter, system-ui);
font-size: clamp(24px, 2.4vw, 34px);
font-weight: 900;
letter-spacing: -0.022em;
line-height: 1.12;
color: #fff;
text-wrap: balance;
}
.kbu-newsletter-desc {
margin: 0;
font-size: 15px;
line-height: 1.55;
color: rgba(248, 250, 252, 0.85);
max-width: 42ch;
text-wrap: pretty;
}
.kbu-newsletter-form {
min-width: 0;
}
.kbu-newsletter-field {
position: relative;
display: flex;
gap: 0;
background: rgba(255, 255, 255, 0.95);
border-radius: 14px;
padding: 6px;
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.25);
overflow: hidden;
}
.kbu-newsletter-field:focus-within {
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(251, 191, 36, 0.5);
}
.kbu-newsletter-field input[type="email"] {
flex: 1;
min-width: 0;
padding: 14px 18px;
border: 0;
background: transparent;
font-family: inherit;
font-size: 15px;
color: var(--kamu1-night);
outline: none;
}
.kbu-newsletter-field input[type="email"]::placeholder {
color: rgba(11, 18, 32, 0.45);
}
.kbu-newsletter-field input.is-invalid {
box-shadow: inset 0 0 0 2px #ef4444;
border-radius: 10px;
}
.kbu-newsletter-field button[type="submit"] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
border: 0;
border-radius: 10px;
background: linear-gradient(135deg, #0b1220 0%, #1e293b 100%);
color: #fff;
font-family: var(--kamu1-font-display, 'Plus Jakarta Sans', Inter, system-ui);
font-size: 14.5px;
font-weight: 800;
letter-spacing: 0.02em;
cursor: pointer;
transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
white-space: nowrap;
}
.kbu-newsletter-field button[type="submit"]:hover:not(:disabled) {
background: linear-gradient(135deg, #1e293b 0%, #0b1220 100%);
transform: translateX(2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
.kbu-newsletter-field button[type="submit"]:disabled {
opacity: 0.6;
cursor: wait;
}
.kbu-newsletter-field button[type="submit"] svg {
transition: transform .2s ease;
}
.kbu-newsletter-field button[type="submit"]:hover:not(:disabled) svg {
transform: translateX(3px);
}
.kbu-newsletter-msg {
margin: 12px 0 0;
min-height: 18px;
font-size: 13.5px;
font-weight: 600;
line-height: 1.4;
color: rgba(248, 250, 252, 0.9);
}
.kbu-newsletter-msg.is-success {
color: #bbf7d0;
}
.kbu-newsletter-msg.is-error {
color: #fecaca;
}
.kbu-newsletter-fineprint {
margin: 8px 0 0;
font-size: 12px;
color: rgba(248, 250, 252, 0.6);
letter-spacing: 0.01em;
}
@media (max-width: 760px) {
.kbu-newsletter {
padding: 40px 20px;
}
.kbu-newsletter-inner {
grid-template-columns: 1fr;
gap: 24px;
}
.kbu-newsletter-field {
flex-direction: column;
gap: 6px;
padding: 6px;
}
.kbu-newsletter-field button[type="submit"] {
width: 100%;
justify-content: center;
padding: 14px;
}
}
/* ----------------------------------------------------------------------
* 63) FOOTER MODERNIZE — grid + logo + nav
* ---------------------------------------------------------------------- */
footer {
margin-top: 0 !important;
}
.kamu1-footer-grid {
display: grid !important;
grid-template-columns: 1.4fr 1fr !important;
gap: 40px !important;
padding: 48px 24px !important;
align-items: start;
}
@media (max-width: 760px) {
.kamu1-footer-grid {
grid-template-columns: 1fr !important;
gap: 28px !important;
padding: 36px 20px !important;
}
}
/* Tema footer'ı her modda koyu bg (kamu1-site-footer → var(--kamu1-night))
bu yüzden text renklerini light mode'da bile beyaz-tonlu vermeliyiz. */
.kamu1-footer-grid > div:first-child p {
margin: 14px 0 0;
font-size: 14.5px;
line-height: 1.6;
color: rgba(248, 250, 252, 0.78) !important;
max-width: 48ch;
}
.kamu1-footer-grid .kamu1-logo {
font-size: 26px;
}
.kamu1-footer-grid .kamu1-logo-text {
color: #fff !important;
}
.kamu1-footer-grid .kamu1-logo-text span {
color: var(--kamu1-red) !important;
}
.kamu1-footer-grid nav .menu {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 24px;
}
.kamu1-footer-grid nav .menu li {
margin: 0;
}
.kamu1-footer-grid nav .menu a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 0;
font-size: 14px;
font-weight: 600;
color: rgba(248, 250, 252, 0.85) !important;
text-decoration: none;
transition: color .15s ease, transform .15s ease;
}
.kamu1-footer-grid nav .menu a::before {
content: "›";
color: var(--kamu1-red);
font-weight: 900;
transition: transform .2s ease;
}
.kamu1-footer-grid nav .menu a:hover {
color: #fca5a5 !important;
}
.kamu1-footer-grid nav .menu a:hover::before {
transform: translateX(3px);
}
/* ----------------------------------------------------------------------
* 64) SOSYAL ROW — footer grid sonu
* ---------------------------------------------------------------------- */
.kbu-social-row {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 16px;
padding-top: 28px;
margin-top: 8px;
border-top: 1px dashed rgba(248, 250, 252, 0.12);
flex-wrap: wrap;
}
.kbu-social-label {
font-size: 12px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(248, 250, 252, 0.65);
}
.kbu-social-icons {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.kbu-social-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(252, 165, 165, 0.12);
color: #fca5a5;
transition: background .2s ease, color .2s ease, transform .2s ease;
text-decoration: none;
}
.kbu-social-icon:hover {
background: var(--kamu1-red);
color: #fff;
transform: translateY(-2px);
}
/* ----------------------------------------------------------------------
* 65) COPYRIGHT BANT — footer en alt
* ---------------------------------------------------------------------- */
.kbu-copyright {
background: var(--kamu1-night);
color: rgba(248, 250, 252, 0.7);
padding: 16px 24px;
font-size: 13px;
line-height: 1.5;
}
.kbu-copyright-inner {
max-width: 1280px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 8px 24px;
}
.kbu-copyright strong {
color: #fff;
font-weight: 800;
}
.kbu-copyright-meta {
font-size: 12px;
opacity: 0.7;
}
@media (max-width: 540px) {
.kbu-copyright-inner {
flex-direction: column;
text-align: center;
gap: 6px;
}
}
/* ----------------------------------------------------------------------
* 66) FOOTER DARK MODE
* ---------------------------------------------------------------------- */
:root[data-theme="dark"] footer,
:root[data-kamu1-theme="dark"] footer {
background: #0a0f1a;
}
:root[data-theme="dark"] .kamu1-footer-grid > div:first-child p,
:root[data-kamu1-theme="dark"] .kamu1-footer-grid > div:first-child p,
:root[data-theme="dark"] .kamu1-footer-grid nav .menu a,
:root[data-kamu1-theme="dark"] .kamu1-footer-grid nav .menu a {
color: rgba(241, 245, 249, 0.7);
}
:root[data-theme="dark"] .kamu1-footer-grid nav .menu a:hover,
:root[data-kamu1-theme="dark"] .kamu1-footer-grid nav .menu a:hover {
color: #fca5a5;
}
:root[data-theme="dark"] .kamu1-footer-grid nav .menu a::before,
:root[data-kamu1-theme="dark"] .kamu1-footer-grid nav .menu a::before {
color: #fca5a5;
}
:root[data-theme="dark"] .kbu-social-row,
:root[data-kamu1-theme="dark"] .kbu-social-row {
border-top-color: rgba(248, 250, 252, 0.08);
}
:root[data-theme="dark"] .kbu-social-label,
:root[data-kamu1-theme="dark"] .kbu-social-label {
color: rgba(241, 245, 249, 0.6);
}
:root[data-theme="dark"] .kbu-social-icon,
:root[data-kamu1-theme="dark"] .kbu-social-icon {
background: rgba(252, 165, 165, 0.12);
color: #fca5a5;
}
:root[data-theme="dark"] .kbu-social-icon:hover,
:root[data-kamu1-theme="dark"] .kbu-social-icon:hover {
background: #fca5a5;
color: #0b1220;
}
:root[data-theme="dark"] .kbu-copyright,
:root[data-kamu1-theme="dark"] .kbu-copyright {
background: #050810;
color: rgba(248, 250, 252, 0.55);
}
/* Newsletter dark mode — gradient zaten koyu kırmızı, tweak gerekmez
ama altın amber kenarı dark'da biraz mat tutalım */
:root[data-theme="dark"] .kbu-newsletter,
:root[data-kamu1-theme="dark"] .kbu-newsletter {
border-bottom-color: #d97706;
}
/* ----------------------------------------------------------------------
* 68) SPLIT_CARDS lead + compact — banner görsel crop fix (v1.0.78)
*
* Sorun: `.kamu1-news-card--wide` (lead) varsayılan olarak sol-media
* sağ-body yatay split; `grid-row: span 3` ile uzun bir dikey kolona
* yayılıyor. 16:9 yatay banner görseller bu dar uzun kapsayıcıda
* ortadan crop oluyor → "NEM... KAT... TARIHLER..." gibi yarı metinler.
* Compact kartlarda da 140px dar media kolonu 16:9 görseli ortadan
* keserek sayıların yarısını kırpıyordu.
*
* Çözüm:
* 1) split_cards içindeki lead'i column layout'a çevir (media üstte
* tam 16:9, body altta), grid-row:span 3 büyüklüğü body'nin esnek
* uzamasıyla doldurulur — crop yok.
* 2) Compact kart media'da görsel üst-merkeze yaslansın (banner
* görsellerde başlık genelde yukarıda yer alır).
* 3) Compact kart sol media kolonunu biraz genişlet (140 → 160px).
* ---------------------------------------------------------------------- */
/* 1) Lead kart — column layout (sadece split_cards içinde) */
@media (min-width: 720px) {
.kamu1-dynamic-home-section--split_cards .kamu1-dynamic-split > .kamu1-news-card--wide:first-child {
display: flex !important;
flex-direction: column !important;
grid-template-columns: none !important;
}
.kamu1-dynamic-home-section--split_cards .kamu1-dynamic-split > .kamu1-news-card--wide:first-child .kamu1-news-card-media {
aspect-ratio: 16 / 9 !important;
height: auto !important;
min-height: 0 !important;
width: 100%;
}
.kamu1-dynamic-home-section--split_cards .kamu1-dynamic-split > .kamu1-news-card--wide:first-child .kamu1-news-card-body {
flex: 1;
padding: 22px 24px !important;
}
.kamu1-dynamic-home-section--split_cards .kamu1-dynamic-split > .kamu1-news-card--wide:first-child h3 {
font-size: clamp(22px, 2vw, 30px);
line-height: 1.12;
letter-spacing: -0.022em;
margin: 6px 0 10px;
}
.kamu1-dynamic-home-section--split_cards .kamu1-dynamic-split > .kamu1-news-card--wide:first-child p {
font-size: 14.5px;
line-height: 1.55;
margin: 0;
color: var(--kamu1-ink-soft);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
/* 2) Compact kart — banner görsellerinde SOL kenar görünsün
* Editör site genelinde "metin sol + görsel sağ" düzeninde banner
* üretmiş. Compact dar media kolonunda ortayı göstermek "0", "128",
* "95" gibi sayıların yarısını gösterir. Sol kenar yaslaması ile
* banner'ın metin başlangıcı (önemli içerik) görünür.
*/
.kamu1-news-card--compact .kamu1-news-card-media {
overflow: hidden;
}
.kamu1-news-card--compact .kamu1-news-card-media img,
.kamu1-news-card--compact .kamu1-media-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 0% 50% !important;
}
/* 3) Compact media kolonu belirgin şekilde genişlet — banner görseller
* yatay tasarlanmış, daha geniş alanda daha çok içerik görünür. */
@media (min-width: 720px) {
.kamu1-news-card--compact {
grid-template-columns: 220px 1fr !important;
}
}
@media (min-width: 1100px) {
.kamu1-news-card--compact {
grid-template-columns: 260px 1fr !important;
}
}
/* Wide kart (split_cards içindeki ek wide kartlar) için de aynı:
* `--wide:nth-child(n+2)` veya `--wide:not(:first-child)` lead
* dışındaki wide kartları kapsar. */
@media (min-width: 720px) {
.kamu1-dynamic-home-section--split_cards .kamu1-news-card--wide:not(:first-child) {
grid-template-columns: 240px 1fr !important;
}
.kamu1-dynamic-home-section--split_cards .kamu1-news-card--wide:not(:first-child) .kamu1-media-img {
object-position: 0% 50% !important;
}
}
/* Mosaic_grid içindeki küçük kartlar — column tema default; ek tweak
* gerekmez ama görsel pozisyon hafif düzelt */
.kamu1-dynamic-home-section--mosaic_grid .kamu1-news-card:not(.kamu1-news-card--lead) .kamu1-media-img {
object-position: 50% 40%;
}
/* ----------------------------------------------------------------------
* 67) COMMUNITY CTA `.kamu1-content` injection fix (v1.0.76)
*
* Community section makale sonuna `the_content` filter ile inject
* ediliyor → `.kamu1-content` içinde kalıyor → § 60'taki
* `.kamu1-content h2` kuralı koyu metin + kırmızı-altın divider çubuğu
* uyguluyor. Section'ın bg'i koyu olduğu için light mode'da
* "Yalnız değilsin" kayboluyordu. Override ile reset:
* ---------------------------------------------------------------------- */
.kamu1-community-text h2,
.kamu1-content .kamu1-community-text h2 {
color: #fff !important;
-webkit-text-fill-color: #fff;
padding-top: 0 !important;
margin: 0 0 16px !important;
font-size: clamp(26px, 3.4vw, 38px) !important;
letter-spacing: -0.03em !important;
line-height: 1.05 !important;
}
.kamu1-community-text h2::before {
display: none !important;
content: none !important;
}
/* Accent span — § 60 link/code/genel kurallarından korunmuş kalsın */
.kamu1-content .kamu1-community-text h2 .accent,
.kamu1-community-text h2 .accent {
background: linear-gradient(135deg, var(--kamu1-gold), #fbbf24);
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
-webkit-text-fill-color: transparent;
}
/* Eyebrow chip — § 60'tan etkilenmesin (span ama emin olalım) */
.kamu1-content .kamu1-community-eyebrow,
.kamu1-community-eyebrow {
color: #fda4af !important;
-webkit-text-fill-color: #fda4af;
}
/* Community içindeki p ve liste de § 60 inline-link stillerinden korunsun */
.kamu1-content .kamu1-community-text > p {
color: #cbd5e1 !important;
font-size: 15px !important;
}
.kamu1-content .kamu1-community-list li {
color: #e2e8f0;
}
.kamu1-content .kamu1-community-list li a {
color: #fff !important;
background-image: none !important;
}
/* CTA button — § 60 inline link override etmesin */
.kamu1-content .kamu1-community-cta {
background-image: none !important;
color: var(--kamu1-night) !important;
-webkit-text-fill-color: var(--kamu1-night);
}
/* ----------------------------------------------------------------------
* 71) /akis/ — Son Dakika Akış sayfa dark mode (v1.0.81)
*
* Tema bu özel sayfa için kendi `--kamu1-card / --kamu1-line /
* --kamu1-ink / --kamu1-muted / --kamu1-brand / --kamu1-ink-soft`
* değişkenlerini kullanıyor ama dark mode'da bunlar override edilmemiş.
* → beyaz kart bg + açık başlık metni → okunmaz hâle geliyordu.
*
* Aşağıda hem fallback değişkenleri hem de direkt selector'lerle
* dark mode kontrastını garantiye alıyoruz.
* ---------------------------------------------------------------------- */
:root[data-theme="dark"],
:root[data-kamu1-theme="dark"] {
--kamu1-card: #1e293b;
--kamu1-line: rgba(248, 250, 252, 0.08);
--kamu1-brand: #fca5a5;
--kamu1-muted: #94a3b8;
}
/* Direkt selector override (variable fallback safety) */
:root[data-theme="dark"] .kamu1-feed-row-card,
:root[data-kamu1-theme="dark"] .kamu1-feed-row-card {
background: #1e293b !important;
border-color: rgba(248, 250, 252, 0.08) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
:root[data-theme="dark"] .kamu1-feed-row-card:hover,
:root[data-kamu1-theme="dark"] .kamu1-feed-row-card:hover {
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55) !important;
border-color: rgba(252, 165, 165, 0.22) !important;
}
:root[data-theme="dark"] .kamu1-feed-row-title,
:root[data-kamu1-theme="dark"] .kamu1-feed-row-title {
color: #f8fafc !important;
-webkit-text-fill-color: #f8fafc;
}
:root[data-theme="dark"] .kamu1-feed-row a:hover .kamu1-feed-row-title,
:root[data-kamu1-theme="dark"] .kamu1-feed-row a:hover .kamu1-feed-row-title {
color: #fca5a5 !important;
-webkit-text-fill-color: #fca5a5;
}
:root[data-theme="dark"] .kamu1-feed-row-excerpt,
:root[data-kamu1-theme="dark"] .kamu1-feed-row-excerpt {
color: rgba(241, 245, 249, 0.62) !important;
}
:root[data-theme="dark"] .kamu1-feed-row-cat,
:root[data-kamu1-theme="dark"] .kamu1-feed-row-cat {
color: #fca5a5 !important;
}
:root[data-theme="dark"] .kamu1-feed-time-hhmm,
:root[data-kamu1-theme="dark"] .kamu1-feed-time-hhmm {
color: #fca5a5 !important;
}
:root[data-theme="dark"] .kamu1-feed-time-rel,
:root[data-kamu1-theme="dark"] .kamu1-feed-time-rel {
color: rgba(241, 245, 249, 0.45) !important;
}
:root[data-theme="dark"] .kamu1-feed-dot,
:root[data-kamu1-theme="dark"] .kamu1-feed-dot {
background: #fca5a5 !important;
border-color: #0a0f1a !important;
box-shadow: 0 0 0 4px rgba(252, 165, 165, 0.18) !important;
}
:root[data-theme="dark"] .kamu1-feed-line,
:root[data-kamu1-theme="dark"] .kamu1-feed-line {
background: rgba(248, 250, 252, 0.08) !important;
}
:root[data-theme="dark"] .kamu1-feed-day-header,
:root[data-kamu1-theme="dark"] .kamu1-feed-day-header {
color: rgba(241, 245, 249, 0.55) !important;
border-bottom-color: rgba(248, 250, 252, 0.08) !important;
}
:root[data-theme="dark"] .kamu1-feed-stream-head h1,
:root[data-kamu1-theme="dark"] .kamu1-feed-stream-head h1 {
color: #f8fafc !important;
-webkit-text-fill-color: #f8fafc;
}
:root[data-theme="dark"] .kamu1-feed-stream-eyebrow,
:root[data-kamu1-theme="dark"] .kamu1-feed-stream-eyebrow {
color: #fca5a5 !important;
}
:root[data-theme="dark"] .kamu1-feed-stream-viewall,
:root[data-kamu1-theme="dark"] .kamu1-feed-stream-viewall {
color: rgba(241, 245, 249, 0.7) !important;
}
:root[data-theme="dark"] .kamu1-feed-stream-viewall:hover,
:root[data-kamu1-theme="dark"] .kamu1-feed-stream-viewall:hover {
color: #fca5a5 !important;
}
/* Thumbnail görsel — dark mode'da bg neutral kalsın */
:root[data-theme="dark"] .kamu1-feed-row-thumb,
:root[data-kamu1-theme="dark"] .kamu1-feed-row-thumb {
background: #0f172a;
}
/* "Ana sayfa →" üst sağda link — koyu kartlarda görünür kalsın */
:root[data-theme="dark"] .kamu1-feed-stream-viewall::before,
:root[data-kamu1-theme="dark"] .kamu1-feed-stream-viewall::before {
color: inherit;
}
/* Pagination — varsa */
:root[data-theme="dark"] .kamu1-feed-pagination a,
:root[data-kamu1-theme="dark"] .kamu1-feed-pagination a,
:root[data-theme="dark"] .kamu1-feed-pagination span,
:root[data-kamu1-theme="dark"] .kamu1-feed-pagination span {
color: rgba(241, 245, 249, 0.8) !important;
border-color: rgba(248, 250, 252, 0.12) !important;
}
/* ----------------------------------------------------------------------
* 69) PHASE 8 — PWA install banner
* ---------------------------------------------------------------------- */
.kbu-install-banner {
position: fixed;
left: 50%;
bottom: 22px;
transform: translate(-50%, calc(100% + 40px));
z-index: 9999;
display: flex;
align-items: center;
gap: 14px;
max-width: 460px;
width: calc(100% - 32px);
padding: 14px 16px;
background: var(--kamu1-surface);
border: 1px solid rgba(199, 25, 32, 0.18);
border-radius: 16px;
box-shadow:
0 20px 50px rgba(11, 18, 32, 0.18),
0 0 0 1px rgba(11, 18, 32, 0.04);
transition: transform .42s cubic-bezier(0.22, 1, 0.36, 1), opacity .3s ease;
opacity: 0;
font-family: var(--kamu1-font-body, Inter, system-ui);
}
.kbu-install-banner--visible {
transform: translate(-50%, 0);
opacity: 1;
}
.kbu-install-banner--hiding {
transform: translate(-50%, calc(100% + 40px));
opacity: 0;
}
.kbu-install-icon {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 12px;
background: linear-gradient(135deg, var(--kamu1-red), #ef4444);
color: #fff;
display: grid;
place-items: center;
box-shadow: 0 6px 14px rgba(199, 25, 32, 0.28);
}
.kbu-install-text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.kbu-install-text strong {
color: var(--kamu1-ink-aaa);
font-size: 14.5px;
font-weight: 800;
letter-spacing: -0.005em;
line-height: 1.2;
}
.kbu-install-text span {
color: var(--kamu1-ink-soft);
font-size: 12px;
line-height: 1.35;
}
.kbu-install-btn {
flex-shrink: 0;
padding: 9px 16px;
background: var(--kamu1-night);
color: #fff;
border: 0;
border-radius: 10px;
font-family: inherit;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.02em;
cursor: pointer;
transition: background .15s ease, transform .15s ease;
}
.kbu-install-btn:hover {
background: var(--kamu1-red);
transform: translateY(-1px);
}
.kbu-install-close {
flex-shrink: 0;
width: 30px;
height: 30px;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--kamu1-ink-soft);
cursor: pointer;
display: grid;
place-items: center;
transition: background .15s ease;
}
.kbu-install-close:hover {
background: rgba(11, 18, 32, 0.06);
color: var(--kamu1-ink);
}
@media (max-width: 540px) {
.kbu-install-banner {
bottom: 80px; /* sticky-share altında kalmasın */
padding: 12px 14px;
gap: 10px;
}
.kbu-install-icon { width: 40px; height: 40px; }
.kbu-install-text span { display: none; }
.kbu-install-btn { padding: 8px 12px; font-size: 12px; }
}
/* Dark mode install banner */
:root[data-theme="dark"] .kbu-install-banner,
:root[data-kamu1-theme="dark"] .kbu-install-banner {
background: #1e293b;
border-color: rgba(248, 250, 252, 0.1);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
:root[data-theme="dark"] .kbu-install-text strong,
:root[data-kamu1-theme="dark"] .kbu-install-text strong {
color: #f8fafc;
}
:root[data-theme="dark"] .kbu-install-btn,
:root[data-kamu1-theme="dark"] .kbu-install-btn {
background: var(--kamu1-red);
}
:root[data-theme="dark"] .kbu-install-btn:hover,
:root[data-kamu1-theme="dark"] .kbu-install-btn:hover {
background: #fca5a5;
color: #0b1220;
}
/* ----------------------------------------------------------------------
* 70) BOOKMARKS — button + header trigger + drawer + toast
* ---------------------------------------------------------------------- */
/* Sticky-share içine eklenen yer imi butonu */
.kbu-bookmark-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin: 0;
border: 1px solid rgba(11, 18, 32, 0.08);
border-radius: 50%;
background: var(--kamu1-surface);
color: var(--kamu1-ink-soft);
cursor: pointer;
transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.kbu-bookmark-btn:hover {
background: color-mix(in oklab, var(--kamu1-red) 8%, var(--kamu1-surface));
border-color: rgba(199, 25, 32, 0.32);
color: var(--kamu1-red);
transform: translateY(-1px);
}
.kbu-bookmark-btn.is-active {
background: var(--kamu1-red);
border-color: var(--kamu1-red);
color: #fff;
box-shadow: 0 6px 14px rgba(199, 25, 32, 0.32);
}
.kbu-bookmark-btn.is-active:hover {
background: var(--kamu1-night);
border-color: var(--kamu1-night);
}
/* Header'a eklenen yer imi toggle */
.kbu-bookmarks-toggle {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin-right: 6px;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--kamu1-ink-soft);
cursor: pointer;
transition: background .15s ease, color .15s ease;
}
.kbu-bookmarks-toggle:hover {
background: color-mix(in oklab, var(--kamu1-red) 10%, transparent);
color: var(--kamu1-red);
}
.kbu-bookmarks-badge {
position: absolute;
top: 4px;
right: 4px;
min-width: 16px;
height: 16px;
padding: 0 5px;
border-radius: 999px;
background: var(--kamu1-red);
color: #fff;
font-size: 10px;
font-weight: 900;
line-height: 16px;
letter-spacing: 0.02em;
display: inline-block;
text-align: center;
box-shadow: 0 2px 6px rgba(199, 25, 32, 0.4);
}
/* Drawer — yer imi listesi paneli */
.kbu-drawer {
position: fixed;
inset: 0;
z-index: 10000;
pointer-events: none;
}
.kbu-drawer-backdrop {
position: absolute;
inset: 0;
background: rgba(11, 18, 32, 0.5);
opacity: 0;
transition: opacity .3s ease;
pointer-events: auto;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.kbu-drawer--visible .kbu-drawer-backdrop {
opacity: 1;
}
.kbu-drawer-panel {
position: absolute;
top: 0;
right: 0;
height: 100dvh;
width: min(420px, 92vw);
background: var(--kamu1-surface);
box-shadow: -20px 0 60px rgba(11, 18, 32, 0.18);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform .32s cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: auto;
}
.kbu-drawer--visible .kbu-drawer-panel {
transform: translateX(0);
}
.kbu-drawer-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 18px 20px;
border-bottom: 1px solid rgba(11, 18, 32, 0.06);
flex-shrink: 0;
}
.kbu-drawer-head h2 {
margin: 0;
font-family: var(--kamu1-font-display, 'Plus Jakarta Sans', Inter, system-ui);
font-size: 18px;
font-weight: 900;
letter-spacing: -0.015em;
color: var(--kamu1-ink-aaa);
display: flex;
align-items: center;
gap: 10px;
}
.kbu-drawer-count {
display: inline-grid;
place-items: center;
min-width: 26px;
padding: 0 8px;
height: 22px;
border-radius: 999px;
background: var(--kamu1-red);
color: #fff;
font-size: 12px;
font-weight: 900;
letter-spacing: 0;
}
.kbu-drawer-close {
display: inline-grid;
place-items: center;
width: 36px;
height: 36px;
border: 0;
border-radius: 50%;
background: rgba(11, 18, 32, 0.05);
color: var(--kamu1-ink-soft);
cursor: pointer;
transition: background .15s ease, color .15s ease;
}
.kbu-drawer-close:hover {
background: var(--kamu1-red);
color: #fff;
}
.kbu-drawer-body {
flex: 1;
overflow-y: auto;
overscroll-behavior: contain;
padding: 8px 0 20px;
}
.kbu-drawer-empty {
padding: 60px 24px;
text-align: center;
color: var(--kamu1-ink-soft);
}
.kbu-drawer-empty svg {
color: color-mix(in oklab, var(--kamu1-red) 20%, transparent);
margin: 0 auto 14px;
display: block;
}
.kbu-drawer-empty p {
margin: 0 0 6px;
font-size: 15px;
font-weight: 700;
color: var(--kamu1-ink);
}
.kbu-drawer-empty small {
font-size: 13px;
line-height: 1.45;
display: block;
max-width: 260px;
margin: 0 auto;
}
.kbu-drawer-list {
list-style: none;
margin: 0;
padding: 0;
}
.kbu-drawer-item {
display: grid;
grid-template-columns: 72px 1fr 32px;
gap: 12px;
padding: 12px 20px;
border-bottom: 1px solid rgba(11, 18, 32, 0.05);
align-items: center;
transition: opacity .22s ease, transform .22s ease, background .15s ease;
}
.kbu-drawer-item:hover {
background: color-mix(in oklab, var(--kamu1-red) 4%, transparent);
}
.kbu-drawer-item-media {
display: block;
width: 72px;
height: 56px;
border-radius: 8px;
overflow: hidden;
background: var(--kamu1-night);
}
.kbu-drawer-item-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.kbu-drawer-item-body {
min-width: 0;
}
.kbu-drawer-item-title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 14px;
font-weight: 700;
line-height: 1.32;
color: var(--kamu1-ink-aaa);
text-decoration: none;
}
.kbu-drawer-item-title:hover {
color: var(--kamu1-red);
}
.kbu-drawer-item-body p {
display: none;
}
.kbu-drawer-item-body time {
display: block;
margin-top: 4px;
font-size: 11.5px;
color: var(--kamu1-ink-soft);
letter-spacing: 0.02em;
}
.kbu-drawer-item-remove {
display: inline-grid;
place-items: center;
width: 28px;
height: 28px;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--kamu1-ink-soft);
cursor: pointer;
transition: background .15s ease, color .15s ease;
}
.kbu-drawer-item-remove:hover {
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
}
body.kbu-drawer-open {
overflow: hidden;
}
/* Dark mode drawer */
:root[data-theme="dark"] .kbu-drawer-panel,
:root[data-kamu1-theme="dark"] .kbu-drawer-panel {
background: #1e293b;
}
:root[data-theme="dark"] .kbu-drawer-head,
:root[data-kamu1-theme="dark"] .kbu-drawer-head {
border-bottom-color: rgba(248, 250, 252, 0.08);
}
:root[data-theme="dark"] .kbu-drawer-item,
:root[data-kamu1-theme="dark"] .kbu-drawer-item {
border-bottom-color: rgba(248, 250, 252, 0.06);
}
:root[data-theme="dark"] .kbu-drawer-close,
:root[data-kamu1-theme="dark"] .kbu-drawer-close {
background: rgba(248, 250, 252, 0.08);
}
/* Toast (geçici bildirim) */
.kbu-toast {
position: fixed;
left: 50%;
bottom: 26px;
transform: translate(-50%, 30px);
z-index: 10001;
padding: 11px 18px;
background: var(--kamu1-night);
color: #fff;
border-radius: 999px;
font-family: var(--kamu1-font-body, Inter, system-ui);
font-size: 13.5px;
font-weight: 700;
letter-spacing: 0.01em;
box-shadow: 0 12px 32px rgba(11, 18, 32, 0.25);
opacity: 0;
transition: opacity .25s ease, transform .25s ease;
pointer-events: none;
white-space: nowrap;
max-width: 80vw;
}
.kbu-toast--visible {
opacity: 1;
transform: translate(-50%, 0);
}
@media (max-width: 540px) {
.kbu-toast {
bottom: 90px;
font-size: 13px;
padding: 10px 16px;
}
}
/* ----------------------------------------------------------------------
* 24) PRINT styles
* ---------------------------------------------------------------------- */
@media print {
.kamu1-app-hero-slider,
.kamu1-breaking,
.kamu1-market-strip,
.kamu1-utility-bar,
.kamu1-sticky-share,
.kamu1-back-to-top,
.kamu1-reading-progress,
.kamu1-theme-toggle,
.kamu1-community-section,
.kbu-newsletter,
.kbu-social-row,
.kbu-copyright,
.kbu-toc,
.kbu-install-banner,
.kbu-bookmark-btn,
.kbu-bookmarks-toggle,
.kbu-drawer,
.kbu-toast { display: none !important; }
body { background: #fff; color: #000; }
a { color: #000; text-decoration: underline; }
}