/* ═══════════════════════════════════════════════════════════════════
   HABERPORTAL TANITIM SİTESİ — LACİVERT + BEBEK MAVİSİ, AÇIK TEMA

   Patron (10 Eyl 2026): "genel tonlarımızı lacivert bebek mavisi yapsan
   güzel olur, ben karanlık sevmiyorum."

   Şablon Webflow'dan geliyor ve renkleri iki katmanda tutuyor:
     --swatch--*  → ham renkler
     --dark/grey/blue--*  → bölüm temaları (`color-mode` özniteliği seçer)
   Bu dosya YALNIZ o değişkenleri yeniden tanımlar; tek bir kural bile
   seçici ezmez. Böylece şablon güncellense de renk kararı burada kalır.

   KOYU BÖLÜMLER AÇILDI: `color-mode="dark"` bölümleri artık lacivert
   ZEMİN değil, lacivert YAZI + çok açık mavi zemin kullanıyor. Karartma
   yerine kontrast; okunurluk korunuyor.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Nötrler artık lacivert ailesinden: gri yerine mavi-gri. */
  --swatch--n-100: #ffffff;
  --swatch--n-200: #eef5fc;   /* sayfa zemini */
  --swatch--n-300: #dbe9f7;
  --swatch--n-400: #a9c6e4;
  --swatch--n-500: #6d93bd;
  --swatch--n-600: #3f6291;   /* gövde metni */
  --swatch--n-700: #1c3f74;
  --swatch--n-800: #0f2b57;   /* başlık laciverti */
  --swatch--n-900: #081b3c;   /* en koyu lacivert */

  /* Vurgu: bebek mavisi */
  --swatch--a-100: #eaf6ff;
  --swatch--a-200: #c5e6fb;
  --swatch--a-400: #7cc4f2;   /* ana vurgu */
  --swatch--a-500: #4ba7e6;
  --swatch--a-700: #1c6fae;

  /* Bilgi tonları da aynı aileye çekildi */
  --swatch--i-200: #d8ecfb;
  --swatch--i-400: #8fcaf4;
  --swatch--i-800: #14548c;
  --swatch--blue-400: #7cc4f2;
}

/* Varsayılan (temasız) bölümler: açık zemin, lacivert yazı */
:root {
  --color--background: var(--swatch--n-200);
  --color--background-secondary: var(--swatch--n-100);
  --color--background-faded: #e3eefb;
  --color--text: var(--swatch--n-800);
  --color--text-body: var(--swatch--n-600);
  --color--text-accent: var(--swatch--a-500);
}

/* "dark" bölümler AÇILDI — patron karanlık istemiyor */
[color-mode="dark"] {
  --dark--background: var(--swatch--n-200);
  --dark--background-secondary: #ffffff;
  --dark--background-faded: #dbe9f7;
  --dark--text: var(--swatch--n-800);
  --dark--text-body: var(--swatch--n-600);
  --dark--text-accent: var(--swatch--a-700);
  --dark--accent: var(--swatch--a-500);
  --dark--index: var(--swatch--n-500);
  --dark--faded-color: #3f629199;
  --dark--button-bg: var(--swatch--n-800);
  --dark--button-bg-hover: var(--swatch--n-900);
  --dark--button-text: #ffffff;
  --dark--button-border: var(--swatch--n-300);
}

/* "grey" bölümler: gri değil, açık mavi kart zemini */
[color-mode="grey"] {
  --grey--background: var(--swatch--n-300);
  --grey--background-secondary: var(--swatch--n-200);
  --grey--background-faded: #ffffffcc;
  --grey--text: var(--swatch--n-800);
  --grey--text-body: var(--swatch--n-700);
  --grey--text-accent: var(--swatch--n-900);
  --grey--accent: var(--swatch--a-700);
  --grey--faded-color: var(--swatch--n-600);
  --grey--button-bg: var(--swatch--n-800);
  --grey--button-bg-hover: var(--swatch--n-900);
  --grey--button-text: #ffffff;
  --grey--button-border: var(--swatch--n-400);
}

/* "blue" bölümler: bebek mavisi zemin, lacivert yazı */
[color-mode="blue"] {
  --blue--background: var(--swatch--a-200);
  --blue--background-secondary: #ffffffa6;
  --blue--background-faded: #ffffff66;
  --blue--text: var(--swatch--n-900);
  --blue--text-body: var(--swatch--n-700);
  --blue--index: var(--swatch--a-700);
  --blue--accent: var(--swatch--n-900);
  --blue--text-accent: var(--swatch--n-900);
  --blue--faded-color: #7cc4f2;
  --blue--button-bg: var(--swatch--n-800);
  --blue--button-bg-hover: var(--swatch--n-900);
  --blue--button-text: #ffffff;
  --blue--button-border: #0f2b5733;
}

/* Sayfa zemini: şablon body'ye koyu renk basıyordu */
body { background-color: var(--swatch--n-200); color: var(--swatch--n-800); }

/* Sabit (inline) koyu değerler — şablonun tek tek yazdığı yerler */
.hp-modal-form input, .hp-modal-form textarea, .hp-modal-form select { background: #fff; color: var(--swatch--n-800); border-color: var(--swatch--n-300); }
.hp-form-hata { color: #b3261e; }


/* ═══════════════════════════════════════════════════════════════════
   ÜRÜN GÖSTERİM PANELLERİ LACİVERT KALIR — ÖLÇÜMLE (10 Eyl 2026)

   Patron: "yazı renkleri hâlâ birçok yerde sorunlu."
   HATAM: sayfayı açığa çevirirken bu blokların yazılarını da beyaz
   bırakmıştım; tarayıcıda ölçtüm, 112 metin 3:1 kontrastın altındaydı
   (beyaz yazı açık zeminde). `*` ile renk zorlamak da ters tepti: beyaz
   hapın üstündeki beyaz yazıyı görünmez yaptı.

   DOĞRU ÇÖZÜM: bu bloklar ÜRÜN EKRANI gösteriyor ve yazıları zaten açık
   renk yazılmış. Sayfa açık, paneller lacivert — kontrast kendiliğinden
   doğru, tek tek yazı rengi kovalamak gerekmiyor.
   ═══════════════════════════════════════════════════════════════════ */

.hp-tasarla-section,
.hp-promo-showcase,
.hp-cockpit-hud,
.hp-bento-visual-host,
.hp-bento-card-surface,
.hp-paper-canvas,
.hp-paper-masthead,
.hp-bik-grid, .hp-bik-card,
.hp-revenue-grid, .hp-rev-item,
.hp-perf-card, .hp-data-item,
.hp-hud-body, .hp-font-grid,
.hp-ai-pipeline, .hp-block-palette,
.hp-paper-modules-strip, .hp-tg-msg,
.hp-contact-channels {
  background-color: #0b1f3f;
  border-radius: inherit;
}

/* Panellerin İÇİ: şablonun kendi açık yazı renkleri korunur; yalnız
   lacivert-üstü-lacivert kalanlar açığa çekilir. */
.hp-tasarla-section [style*="color:#0f172a"],
.hp-promo-showcase [style*="color:#0f172a"] { color: #e6f1fb !important; }

/* Kahraman altındaki şerit: lacivert zemin ⇒ beyaz yazı (ölçüm: 1:1) */
.c1, .c2, .c3, .c4, .c5, .c6 { color: #ffffff !important; }

/* Çerez kutusu: "grey" teması orta maviye boyuyordu */
.cookie { background-color: #ffffff !important; border: 1px solid var(--swatch--n-300) !important; }
.cookie .heading-style-h5, .cookie .p-small, .cookie a { color: var(--swatch--n-800) !important; }

/* Sayaç şeridi satır içi beyaz-saydam yazıyor (üretilmiş HTML) */
.hp-metric-col div { color: var(--swatch--n-600) !important; }
.hp-metric-col div:first-child { color: var(--swatch--a-700) !important; }

/* ───── İKİNCİ ÖLÇÜM SONRASI KALANLAR (10 Eyl 2026) ───── */

/* Alt bilgi bağlantıları: beyaz %40 opaklıkla yazılmış, açık zeminde yok oluyor */
.is-footer-link, .button_dropdown.is-footer, .footer a, .footer .p-small { color: var(--swatch--n-700) !important; }
.is-footer-link:hover { color: var(--swatch--n-900) !important; }

/* Üst şeritteki ikincil düğme yazıları: lacivert zemin ⇒ beyaz */
.nav__wrapper .button__text, .nav__wrapper .button_nav { color: #ffffff !important; }
.nav__wrapper .basic_secondary { color: #ffffff !important; }

/* Camgöbeği vurgu (#66E8FA) açık zeminde okunmuyor; KOYU panellerde kalsın */
.subtitle { color: var(--swatch--a-700) !important; }
[style*="color:#66E8FA"]:not([class*="hp-"]) { color: var(--swatch--a-700) !important; }

/* Lacivert yaptığım panellerin içinde kalan koyu yazılar açığa çekilir */
.hp-tasarla-section, .hp-promo-showcase, .hp-cockpit-hud, .hp-bento-visual-host,
.hp-bik-card, .hp-rev-item, .hp-perf-card, .hp-data-item, .hp-hud-body,
.hp-paper-canvas, .hp-tg-msg, .hp-contact-channels { color: #dce9f7; }
.hp-tasarla-section h1, .hp-tasarla-section h2, .hp-tasarla-section h3,
.hp-promo-showcase h2, .hp-promo-showcase h3, .hp-cockpit-hud h3 { color: #ffffff; }

/* ───── ÜÇÜNCÜ ÖLÇÜM: son sekiz kalem ───── */

/* Vurgulu sözcük kendi vurgu zemininin üstündeydi (aynı renk) */
[color-mode="blue"] .word, .is-highlight .word { color: var(--swatch--n-900) !important; }

/* Lacivert zeminli başlık ve satırlar: beyaz */
.hp-modal-card .heading-style-h4,
.hp-modal-header .heading-style-h4 { color: #ffffff !important; }
[color-mode="blue"] .line, .cta__wrap .line { color: #ffffff !important; }

/* Yüzen menüdeki ikincil düğme: lacivert zemin ⇒ beyaz */
.floating__nav-modules .button__text,
.floating__nav-modules .basic_secondary { color: #ffffff !important; }

/* Şablonun soluk slate rengi (#94a3b8) açık zeminde zayıf kalıyordu */
[style*="color:#94a3b8"]:not([class*="hp-"]),
[style*="color: #94a3b8"]:not([class*="hp-"]) { color: var(--swatch--n-600) !important; }
.hp-preset-chip { background-color: #12305c !important; color: #dce9f7 !important; }

/* Animasyonlu sözcükler: şablon her birine ayrı renk basıyor (beyaz/camgöbeği).
   Açık zeminde ikisi de kayboluyor; başlık rengine bağlanır. */
.section:not([color-mode="dark"]) .word,
.section:not([color-mode="dark"]) .word * { color: var(--swatch--n-800) !important; }
[color-mode="blue"] .word { color: var(--swatch--n-900) !important; }

/* Kalan iki kalem: koyu panel içinde lacivert yazı, açık zeminde soluk slate */
.hp-modal-card, .hp-modal-card .heading-style-h4, .hp-modal-card h3 { color: #ffffff !important; }
[style*="#94a3b8"]:not([class*="hp-"]):not(.hp-tasarla-section *):not(#tasarla *) { color: var(--swatch--n-600) !important; }
[class*="hp-"] [style*="#94a3b8"] { color: #b9cbe0 !important; }
[style*="color:#1c3f74"], [style*="color: #1c3f74"] { color: #dce9f7 !important; }
.nav__wrapper .button__text.basic_secondary, .basic_secondary { color: inherit !important; }
.nav__wrapper .basic_secondary, .floating__nav-modules .basic_secondary { color: #ffffff !important; }

/* Son altı kalem — hepsi ölçümle bulundu, tek tek kapatılıyor. */
.heading-style-h4 { color: inherit; }
[color-mode="dark"] .heading-style-h4, .hp-modal-card .heading-style-h4 { color: #ffffff !important; }
.button__text.basic_secondary { color: #ffffff !important; }
.section:not([color-mode="dark"]) .button__text.basic_secondary { color: var(--swatch--n-800) !important; }
.nav__wrapper .button__text.basic_secondary, .floating__nav-modules .button__text.basic_secondary { color: #ffffff !important; }
[class*="hp-"] [style*="color:#1c3f74"], [class*="hp-"] [style*="color: #1c3f74"] { color: #cfe0f2 !important; }
[style*="94a3b8"]:not([class*="hp-"]):not(.hp-tasarla-section *):not(#tasarla *) { color: var(--swatch--n-600) !important; }
[color-mode="blue"] .word, [color-mode="blue"] .word * { color: #ffffff !important; }

/* Canlı Tasarım Stüdyosu (#tasarla) Kokpit Kontrast Düzenlemeleri */
.hp-layout-card {
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #E2E8F0 !important;
}
.hp-layout-card strong {
  color: #FFFFFF !important;
}
.hp-layout-card p {
  color: #CBD5E1 !important;
}
.hp-layout-card .hp-layout-badge {
  color: #94A3B8 !important;
  background: rgba(255, 255, 255, 0.08) !important;
}
.hp-layout-card.active {
  background: rgba(102, 232, 250, 0.12) !important;
  border: 1px solid #66E8FA !important;
  box-shadow: 0 0 20px rgba(102, 232, 250, 0.2) !important;
}
.hp-layout-card.active strong {
  color: #FFFFFF !important;
}
.hp-layout-card.active .hp-layout-badge {
  background: rgba(102, 232, 250, 0.25) !important;
  color: #66E8FA !important;
}
.hp-preset-chip {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #E2E8F0 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}
.hp-preset-chip:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #FFFFFF !important;
}
.hp-preset-chip.active {
  background: rgba(102, 232, 250, 0.2) !important;
  border-color: #66E8FA !important;
  color: #66E8FA !important;
  font-weight: 700 !important;
}
.hp-palette-card {
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.hp-palette-info strong {
  color: #FFFFFF !important;
}
.hp-palette-info small {
  color: #CBD5E1 !important;
}
.hp-font-card {
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.hp-font-info strong {
  color: #FFFFFF !important;
}
.hp-font-info small {
  color: #CBD5E1 !important;
}
.hp-module-toggle {
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.hp-module-left strong {
  color: #FFFFFF !important;
}
.hp-module-left small {
  color: #CBD5E1 !important;
}
.hp-studio-guarantee, .hp-studio-guarantee * {
  color: #CBD5E1 !important;
}

/* LACİVERT PANELLERİN İÇİNDE DEĞİŞKENLER TERSİNE ÇEVRİLİR.
   Tek tek yazı kovalamak yerine, panelin içinde "koyu yazı" anlamına gelen
   token'lar AÇIK renge bağlanır; şablonun hangi token'ı kullandığı önemsiz. */
.hp-tasarla-section, .hp-promo-showcase, .hp-cockpit-hud, .hp-bento-visual-host,
.hp-bento-card-surface, .hp-paper-canvas, .hp-bik-grid, .hp-bik-card,
.hp-revenue-grid, .hp-rev-item, .hp-perf-card, .hp-data-item, .hp-hud-body,
.hp-font-grid, .hp-ai-pipeline, .hp-block-palette, .hp-paper-modules-strip,
.hp-tg-msg, .hp-contact-channels, .hp-layout-card, .hp-studio-guarantee {
  --swatch--n-900: #ffffff;
  --swatch--n-800: #ffffff;
  --swatch--n-700: #cfe0f2;
  --swatch--n-600: #b9cbe0;
  --swatch--n-500: #9db4cd;
  --color--text: #ffffff;
  --color--text-body: #cfe0f2;
}

/* SON İKİ KALEM — ölçümle: `.word`/`.line` beyaz yazıyor ama zemin açık.
   Bu öğeler animasyon için satır satır bölünmüş başlıklar; rengi ATASI
   belirler. Açık bölümde lacivert, koyu/mavi bölümde beyaz. */
.section:not([color-mode="dark"]):not([color-mode="blue"]) .line,
.section:not([color-mode="dark"]):not([color-mode="blue"]) .word,
.padding-section:not([color-mode="dark"]) .line,
.padding-section:not([color-mode="dark"]) .word { color: var(--swatch--n-800) !important; }
[color-mode="dark"] .line, [color-mode="dark"] .word,
[color-mode="blue"] .line, [color-mode="blue"] .word { color: #ffffff !important; }
/* Koyu panellerin içindeki satırlar açık kalsın */
[class*="hp-"] .line, [class*="hp-"] .word { color: inherit !important; }

/* ÇAKIŞMA ÇÖZÜMÜ: `color-mode="dark"` artık AÇIK zemin demek, ama lacivert
   yaptığım paneller de içlerinde bu bloklardan taşıyor. Panel içindeki
   tema kutusu saydam kalır ki lacivert zemin görünsün ve beyaz yazı okunsun. */
.hp-tasarla-section [color-mode="dark"],
.hp-promo-showcase [color-mode="dark"],
.hp-cockpit-hud [color-mode="dark"],
.hp-bento-visual-host [color-mode="dark"] { background-color: transparent !important; }
.hp-tasarla-section .line, .hp-tasarla-section .word,
.hp-promo-showcase .line, .hp-promo-showcase .word { color: #ffffff !important; }

/* Son üç kalem: koyu panelde alt başlık ve mavi bantta bölünmüş başlık. */
[class*="hp-"] .subtitle { color: var(--swatch--a-400) !important; }
.section [style*="background"] .line, .section [style*="background"] .word { color: inherit; }
[color-mode="grey"] .line, [color-mode="grey"] .word { color: var(--swatch--n-900) !important; }

/* CTA bandı: dış kutu `blue`, iç kutu `grey` — iç kutu dışın koyu mavisini
   miras alıyor ama yazıyı lacivert yapıyordu. İçte açık yazı kullanılır. */
.is-cta .cta__inner-wrap,
.is-cta .cta__inner-wrap *,
[color-mode="blue"] [color-mode="grey"],
[color-mode="blue"] [color-mode="grey"] * { color: #ffffff !important; }
.section.is-cta .button_main { background-color: #ffffff !important; }
.section.is-cta .button_main, .section.is-cta .button_main * { color: var(--swatch--n-900) !important; }

/* Sıra/özgüllük çakışması: yukarıdaki `[color-mode="grey"] .word` kuralı
   CTA bandındakini de yakalıyordu. Mavi bandın içindekiler beyaz kalır. */
.section.is-cta [color-mode="grey"] .line,
.section.is-cta [color-mode="grey"] .word,
[color-mode="blue"] [color-mode="grey"] .line,
[color-mode="blue"] [color-mode="grey"] .word { color: #ffffff !important; }

/* ═══ KENAR SAHNELERİ (10 Eyl 2026) ═══
   Patron: "videoları sitenin muhtelif yerlerine dağıt, oraya geldik mi mouse
   ile etkileşime girsin, videonun içeriği ile alakalı metinler olsun."
   Kart sayfayı BÖLMEZ: bölüm geçişinde kenardan girer, geçilince çıkar.
   Klipler 9:16, çerçeve de 9:16 — `cover` kırpmıyor. */
.hp-sahne { position: relative; height: 0; }
.hp-sahne, .hp-sahne * { box-sizing: border-box; }
.hp-sahne-kart {
  position: fixed; top: 50%; z-index: 40; width: min(430px, 34vw);
  display: flex; gap: 1.15rem; align-items: center;
  padding: 1.1rem 1.2rem; border-radius: 20px;
  background: linear-gradient(150deg, rgb(9 26 52 / .96), rgb(14 44 88 / .96));
  border: 1px solid rgb(125 211 252 / .45);
  box-shadow: 0 26px 60px rgb(3 12 28 / .5), 0 0 0 1px rgb(255 255 255 / .06), 0 0 46px rgb(56 189 248 / .16);
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .45s ease, transform .55s cubic-bezier(.22,.8,.3,1), visibility 0s .55s;
}
.hp-sahne--sol .hp-sahne-kart { left: clamp(12px, 2.4vw, 40px); transform: translate(-24px, -50%) scale(.96); }
.hp-sahne--sag .hp-sahne-kart { right: clamp(12px, 2.4vw, 40px); flex-direction: row-reverse; transform: translate(24px, -50%) scale(.96); }
.hp-sahne.acik .hp-sahne-kart {
  opacity: 1; pointer-events: auto; visibility: visible;
  transform: translate(0, -50%) scale(1); transition-delay: 0s;
}

.hp-sahne-metin { flex: 1 1 auto; min-width: 0; }
.hp-sahne-kicker {
  display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .66rem; letter-spacing: .17em; color: #7dd3fc; margin-bottom: .4rem;
}
.hp-sahne-baslik { color: #fff; font-size: 1.12rem; line-height: 1.25; margin: 0 0 .45rem; font-weight: 700; }
.hp-sahne-aciklama { color: #cfe3f7; font-size: .84rem; line-height: 1.5; margin: 0 0 .6rem; }
.hp-sahne-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .28rem; }
.hp-sahne-liste li { color: #a9c9e8; font-size: .77rem; line-height: 1.35; padding-left: 1rem; position: relative; }
.hp-sahne-liste li::before { content: ""; position: absolute; left: 0; top: .45em; width: 6px; height: 6px; border-radius: 50%; background: #38bdf8; }

.hp-phone { margin: 0; width: 172px; flex: 0 0 172px; perspective: 900px; }
.hp-phone-screen {
  position: relative;
  aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: #04101f;
  border: 3px solid #24467a; box-shadow: 0 18px 40px rgb(0 0 0 / .45);
  transform: rotateY(var(--egim-y, 0deg)) rotateX(var(--egim-x, 0deg));
  transition: transform .18s ease-out;
}
.hp-phone-screen video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* İmleç ışığı: fare cama düşen yansıma gibi ekranda gezer. */
.hp-phone-parlama {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s ease;
  background: radial-gradient(circle at var(--isik-x, 50%) var(--isik-y, 50%), rgb(125 211 252 / .38), transparent 58%);
}
/* SES DÜĞMESİ — kliplerde Türkçe seslendirme var; tarayıcı sessiz başlatmaya
   zorluyor, açma kararı ziyaretçinin. Bir kez açılınca sonraki sahneler de
   sesli gelir. */
.hp-ses {
  position: absolute; left: 8px; right: 8px; bottom: 8px;
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .42rem .5rem; border: 0; border-radius: 11px; cursor: pointer;
  font: inherit; font-size: .72rem; font-weight: 600; letter-spacing: .01em;
  color: #06192f; background: rgb(186 230 253 / .93);
  backdrop-filter: blur(6px); transition: background .2s ease, transform .2s ease;
}
.hp-ses:hover { background: #e0f2fe; transform: translateY(-1px); }
.hp-ses:focus-visible { outline: 2px solid #7dd3fc; outline-offset: 3px; }
.hp-ses-ikon {
  width: 15px; height: 15px; flex: none;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306192f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4z' fill='%2306192f'/%3E%3Cpath d='M17 9l4 6M21 9l-4 6'/%3E%3C/svg%3E");
}
.hp-ses[aria-pressed="true"] .hp-ses-ikon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306192f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4z' fill='%2306192f'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M18.5 6a8.5 8.5 0 0 1 0 12'/%3E%3C/svg%3E");
}
.hp-ses[aria-pressed="true"] { background: rgb(125 211 252 / .96); }

.hp-phone figcaption { margin-top: .6rem; text-align: center; color: #fff; font-size: .8rem; font-weight: 600; line-height: 1.3; }
.hp-phone figcaption span { display: block; color: #7dd3fc; font-weight: 500; font-size: .7rem; margin-top: .15rem; }

/* Dar ekranda kenara sabitlenmez — içeriği örterdi; akışta durur. */
@media (max-width: 1179px) {
  .hp-sahne { height: auto; }
  .hp-sahne-kart {
    position: static; box-sizing: border-box;
    width: calc(100% - 2rem); max-width: 620px; margin: 2.5rem auto;
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
    flex-direction: column; text-align: center;
  }
  /* Yandaki kaydırma dönüşümü mobilde kartı ekrandan taşırıyordu (ölçüldü:
     scrollWidth 391 > 390, kart L-1). Sınıf seçicisi media query'de de
     spesifik kalıyor; ikisini birlikte sıfırlamak gerekiyor. */
  .hp-sahne--sol .hp-sahne-kart,
  .hp-sahne--sag .hp-sahne-kart { transform: none; flex-direction: column; }
  .hp-sahne-liste li { text-align: left; }
  /* Sütun yönünde `flex-basis` YÜKSEKLİK olur — telefon 172px yerine
     172px boyunda esneyip ekranı kaplıyordu. */
  .hp-phone { flex: none; width: 172px; }
}
@media (min-width: 1180px) and (prefers-reduced-motion: reduce) {
  .hp-sahne-kart, .hp-phone-screen { transition: opacity .2s linear; }
  .hp-sahne--sag .hp-sahne-kart, .hp-sahne--sol .hp-sahne-kart { transform: translate(0, -50%); }
}


/* ═══ HERO SÜSÜ TELEFONDA GİZLENİR (11 Eyl 2026) ═══
   `.rive__hero` mutlak konumlu bir süs katmanı: halkalar, parıltı ve
   dolaşan etiket şeritleri. Masaüstünde metnin yanında duruyor; 390px'te
   üstüne biniyordu. ÖLÇÜLDÜ: katman t410, hero paragrafı 352..470 —
   20 piksellik şerit tam paragrafın son satırlarının üstünde, iki kat
   yazı üst üste okunmaz hâlde. Süs olduğu için dar ekranda kaldırılır.  */
@media (max-width: 900px) {
  .rive__hero { display: none; }
}

/* CTA bandı: Webflow'un absolute/height:0 örtüşmesini iptal et.
   CTA kartı Bento ızgarası ile Footer arasında doğal akışta (relative) yer alır;
   ne yukarıdaki Bento kartlarına (05, 06) ne de aşağıdaki Footer'a biner. */
.section.is-cta {
  position: relative !important;
  z-index: 5 !important;
  pointer-events: auto !important;
  padding: 70px 0 50px 0 !important;
  background-color: transparent !important;
  height: auto !important;
  transform: none !important;
}
.section.is-cta .padding-section.is-cta {
  position: relative !important;
  height: auto !important;
  background-color: transparent !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 20px !important;
}
.section.is-cta .cta__inner-wrap {
  position: relative !important;
  margin: 0 auto !important;
  width: 100% !important;
}
.section.footer .footer__spacer {
  padding-top: 50px !important;
  min-height: 50px !important;
}
.section.footer .footer__spacer .spacer-8, .section.footer .footer__spacer .spacer-4 { padding-bottom: 0; }
.section.footer .padding-section > .spacer-4 { padding-bottom: 24px; }
.section.footer .padding-section > .spacer-10 { padding-bottom: 48px; }
.hp-footer-quick-links a { color: rgba(255, 255, 255, 0.7) !important; font-size: 12.5px !important; font-weight: 600 !important; text-decoration: none !important; transition: all 0.2s ease !important; }
.hp-footer-quick-links a:hover { color: #38BDF8 !important; }

/* MENÜ PERDESİ AÇILIŞTA AÇIK KALIYORDU — SAYFA BUĞULU GELİYORDU (18 Eyl 2026).

   Patron: "ekran buğulu geliyor". Tarayıcıda ÖLÇÜLDÜ (canlı, haber-portal.com):
     div.nav__overlay -> 1920x848, backdrop-filter: blur(15px), opacity 1, visible
   Bu, MODÜLLER/ÇÖZÜMLER açılır menüsünün arka perdesi; başlık çubuğu daha
   üstte olduğu için net görünüyor, altındaki her şey buğulu ve gri kalıyordu.

   CSS aslında DOĞRU yazılmış: perde varsayılanda `opacity:0; visibility:hidden`,
   yalnız `.nav-component[data-show-modules="true"]` iken açılıyor. Ölçümde
   `data-show-modules` değeri "false"tu — yani CSS gizlemek istiyordu.

   PERDEYİ AÇIK TUTAN ŞEY SATIR İÇİ STİL:
     style="opacity: 1; visibility: visible; transform: none; clip-path: none"
   Kaynak HTML'de böyle bir stil YOK (index.html'de yalın `class="nav__overlay"`);
   bunu çalışma anında Webflow etkileşim betiği (IX2) yazıyor ve başlangıç
   durumunu "açık" olarak bırakıyor. Satır içi stil normal CSS kurallarını
   yener; bu yüzden gizleme kuralı hiç tutmuyordu.

   Dışa aktarılmış betiği düzeltemiyoruz, ama `!important` satır içi stili
   yener. İKİ kural yazıldı: ilki her durumda gizler, ikincisi (öznitelik
   seçici fazladan özgüllük kattığı için) menü gerçekten açıldığında onu
   yener. Böylece perde çalışmaya devam eder, yalnız açılışta kapalı gelir. */
.nav-component .nav__overlay {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.nav-component[data-show-modules="true"] .nav__overlay {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ═══════════════════════════════════════════════════════════════════
   HABERPORTAL KINETIC SPLIT LOGO (CONCEPT 1: "HP" MORF & AÇILIM)
   ═══════════════════════════════════════════════════════════════════ */
.hp-logo-link {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  padding: 0 10px !important;
  height: 38px !important;
  background: transparent !important;
  border-color: transparent !important;
  overflow: visible !important;
}
.hp-logo-link:hover {
  background: rgba(102, 232, 250, 0.05) !important;
  border-color: rgba(102, 232, 250, 0.2) !important;
}

.hp-split-logo {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  position: relative;
  height: 34px;
  line-height: 1;
}

/* Sol Çapa: H */
.hp-letter-h {
  font-size: 22px;
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: -0.6px;
  line-height: 1;
  position: relative;
  display: inline-block;
  transition: filter 0.3s ease, transform 0.3s ease;
}

/* Açılan Orta Gövde: aber */
.hp-expand-aber {
  display: inline-flex;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  transform: translateX(-4px);
  font-size: 21px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.5px;
  line-height: 1;
  transition: max-width 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, transform 0.4s ease;
  white-space: nowrap;
}

/* Sağ Çapa Sarıcı: P */
.hp-letter-p-wrap {
  display: inline-flex;
  align-items: center;
  position: relative;
  margin-left: 1px;
  line-height: 1;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.hp-letter-p {
  font-size: 22px;
  font-weight: 900;
  background: linear-gradient(135deg, #66E8FA 0%, #38BDF8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.6px;
  line-height: 1;
  display: inline-block;
  transition: filter 0.3s ease, transform 0.3s ease;
}

/* Açılan Bitiş Gövdesi: ortal */
.hp-expand-ortal {
  display: inline-flex;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  transform: translateX(-4px);
  font-size: 21px;
  font-weight: 500;
  background: linear-gradient(135deg, #66E8FA 0%, #38BDF8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.5px;
  line-height: 1;
  transition: max-width 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, transform 0.4s ease;
  white-space: nowrap;
}

/* Canlı Yayın Camgöbeği Nabız Noktası */
.hp-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #66E8FA;
  box-shadow: 0 0 8px #66E8FA, 0 0 16px rgba(102, 232, 250, 0.6);
  display: inline-block;
  margin-left: 4px;
  margin-bottom: 2px;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.3s ease 0.2s, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s;
  animation: hpLivePulse 2s infinite ease-in-out;
}

@keyframes hpLivePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 6px #66E8FA; }
  50% { transform: scale(1.4); box-shadow: 0 0 14px #66E8FA, 0 0 22px #38BDF8; }
}

/* Açılmış (Expanded) Durum Kuralları */
.hp-split-logo.is-expanded .hp-expand-aber {
  max-width: 72px;
  opacity: 1;
  transform: translateX(0);
}

.hp-split-logo.is-expanded .hp-expand-ortal {
  max-width: 82px;
  opacity: 1;
  transform: translateX(0);
}

.hp-split-logo.is-expanded .hp-live-dot {
  opacity: 1;
  transform: scale(1);
}

/* Hover Işıltısı */
.hp-split-logo:hover .hp-letter-h {
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.4));
}
.hp-split-logo:hover .hp-letter-p {
  filter: drop-shadow(0 0 10px rgba(102, 232, 250, 0.8));
}
.hp-split-logo:hover .hp-live-dot {
  box-shadow: 0 0 12px #66E8FA, 0 0 24px #38BDF8;
}

/* Footer ve Mobil Uyumluluk */
.hp-split-logo.is-footer-logo .hp-letter-h { font-size: 20px; }
.hp-split-logo.is-footer-logo .hp-expand-aber { font-size: 19px; }
.hp-split-logo.is-footer-logo .hp-letter-p { font-size: 20px; }
.hp-split-logo.is-footer-logo .hp-expand-ortal { font-size: 19px; }

/* Koyu Zemin Dışı / Açık Tema Gerekirse */
.hp-split-logo.is-dark-theme .hp-letter-h,
.hp-split-logo.is-dark-theme .hp-expand-aber {
  color: #0F172A;
}
.hp-split-logo.is-dark-theme .hp-letter-p,
.hp-split-logo.is-dark-theme .hp-expand-ortal {
  background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hp-split-logo.is-dark-theme .hp-live-dot {
  background: #0284C7;
  box-shadow: 0 0 8px #0284C7;
}