/* ============================================================================
   HOMI Elementor Kiti — bolt-tarzı bloklar + ortak cila.
   Koyu yüzeyler, saç-teli kenarlıklar, monospace üst-etiketler, altın spotlight,
   scramble başlık, sekmeler, bento, referanslar, logo marquee.
   Renkler token'lardan (tokens.css) → tutarlı, tema bağımsız.
   ========================================================================== */

:root {
  --homi-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
}

/* ── İmleç spotlight parıltısı (viewport-fixed, koyu yüzeylerde) ────────── */
.homi-spot {
  position: fixed;
  top: 0;
  left: 0;
  width: 560px;
  height: 560px;
  margin: -280px 0 0 -280px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  background: radial-gradient(circle, rgba(240, 196, 121, .18), rgba(240, 196, 121, .06) 38%, transparent 70%);
  transition: opacity .5s ease;
  will-change: transform, opacity;
}
.homi-spot.is-on { opacity: 1; }
@media (hover: none), (pointer: coarse) { .homi-spot { display: none; } }

/* ── Ortak: monospace, aralıklı, BÜYÜK HARF üst-etiket (bolt imzası) ────── */
.homi-eyebrow,
.hero__eyebrow,
.intro__eyebrow,
.sec-eyebrow,
.proc__eyebrow,
.homi-sec-head__eyebrow {
  font-family: var(--homi-mono);
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 500;
  color: var(--accent, #f0c479);
}

/* ── Ortak kart cilası: koyu yüzey + saç-teli kenarlık + hover yükselme ── */
.homi-card,
.homi-bento__cell,
.homi-tst__card,
.card,
.member {
  position: relative;
  background: var(--surface, #141a3a);
  border: 1px solid var(--border, rgba(255, 255, 255, .09));
  border-radius: var(--radius-lg, 16px);
  transition: transform .5s var(--ease, cubic-bezier(.22, 1, .36, 1)),
              border-color .4s ease, box-shadow .5s ease;
}
.homi-card:hover,
.homi-bento__cell:hover,
.homi-tst__card:hover,
.card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent, #f0c479) 45%, var(--border, rgba(255,255,255,.1)));
  box-shadow: 0 22px 60px -30px rgba(0, 0, 0, .7);
}

/* ── Scramble / çözülen başlık ─────────────────────────────────────────── */
.homi-scramble {
  font-family: var(--font-head, Georgia, serif);
  font-weight: 600;
  font-size: var(--step-6, clamp(2.4rem, 1.6rem + 4vw, 5rem));
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--heading, #f4f2ea);
  margin: 0;
}
.homi-scramble[data-scramble] { font-variant-ligatures: none; }

/* ── Özellik sekmeleri (otomatik ilerleyen + progress bar) ─────────────── */
.homi-tabs__panels {
  position: relative;
  border: 1px solid var(--border, rgba(255, 255, 255, .09));
  border-radius: var(--radius-lg, 16px);
  background: var(--surface, #141a3a);
  overflow: hidden;
  min-height: clamp(220px, 40vh, 460px);
}
.homi-tabs__panel {
  position: absolute;
  inset: 0;
  padding: clamp(20px, 3vw, 40px);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events: none;
}
.homi-tabs__panel.is-active { opacity: 1; transform: none; pointer-events: auto; }
.homi-tabs__panel img { max-width: 100%; height: auto; border-radius: 12px; display: block; }
.homi-tabs__panel h3 { font-family: var(--font-head, serif); font-size: var(--step-3, 1.8rem); margin: 0 0 .4em; color: var(--heading); }
.homi-tabs__panel p { color: var(--text-soft, #9aa0b4); line-height: 1.6; margin: 0; }

.homi-tabs__nav {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-top: 18px;
}
.homi-tab {
  text-align: left;
  background: none;
  border: 0;
  padding: 14px 4px 0;
  cursor: pointer;
  color: var(--text-soft, #9aa0b4);
  font: inherit;
  border-top: 1px solid transparent;
  transition: color .3s ease;
}
.homi-tab.is-active { color: var(--heading, #fff); }
.homi-tab__label { display: block; font-weight: 600; font-size: 14px; }
.homi-tab__bar { display: block; height: 2px; margin-top: 10px; background: var(--border, rgba(255,255,255,.12)); border-radius: 2px; overflow: hidden; }
.homi-tab__bar > span { display: block; height: 100%; width: 0; background: var(--accent, #f0c479); }

/* ── Bento ızgara ──────────────────────────────────────────────────────── */
.homi-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
}
.homi-bento__cell {
  grid-column: span 1;
  padding: clamp(20px, 2.2vw, 32px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 200px;
  overflow: hidden;
}
.homi-bento__cell.is-wide  { grid-column: span 2; }
.homi-bento__cell.is-large { grid-column: span 2; grid-row: span 2; min-height: 420px; }
.homi-bento__icon { font-size: 26px; margin-bottom: auto; }
.homi-bento__title { font-family: var(--font-head, serif); font-size: var(--step-2, 1.5rem); margin: 0 0 .35em; color: var(--heading); }
.homi-bento__text { color: var(--text-soft, #9aa0b4); line-height: 1.55; margin: 0; }
@media (max-width: 900px) { .homi-bento { grid-template-columns: repeat(2, 1fr); } .homi-bento__cell.is-large { grid-row: auto; min-height: 220px; } }
@media (max-width: 520px) { .homi-bento { grid-template-columns: 1fr; } .homi-bento__cell, .homi-bento__cell.is-wide, .homi-bento__cell.is-large { grid-column: auto; } }

/* ── Referanslar (serif italik alıntı + mono etiket) ──────────────────── */
.homi-tst {
  display: grid;
  gap: clamp(14px, 1.6vw, 24px);
  grid-template-columns: repeat(3, 1fr);
}
.homi-tst__card {
  padding: clamp(22px, 2.4vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 1.4em;
}
.homi-tst__quote {
  font-family: var(--font-head, Georgia, serif);
  font-style: italic;
  font-size: var(--step-1, 1.2rem);
  line-height: 1.5;
  color: var(--text, #e9eaf2);
  margin: 0;
}
.homi-tst__meta { margin-top: auto; display: flex; align-items: center; gap: .6em; }
.homi-tst__label { font-family: var(--homi-mono); text-transform: uppercase; letter-spacing: .18em; font-size: 11px; color: var(--accent, #f0c479); }
.homi-tst__author { font-size: 13px; color: var(--text-soft, #9aa0b4); }
@media (max-width: 900px) { .homi-tst { grid-template-columns: 1fr; } }

/* ── Logo şeridi (marquee) ────────────────────────────────────────────── */
.homi-marquee { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.homi-marquee__track { display: flex; align-items: center; gap: clamp(36px, 6vw, 90px); width: max-content; animation: homi-marq var(--homi-marq, 32s) linear infinite; }
.homi-marquee:hover .homi-marquee__track { animation-play-state: paused; }
.homi-marquee__item img { height: clamp(22px, 3vw, 38px); width: auto; display: block; opacity: .6; filter: grayscale(1); transition: opacity .3s ease, filter .3s ease; }
.homi-marquee__item:hover img { opacity: 1; filter: none; }
@keyframes homi-marq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .homi-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; } }

/* ── Ortak scroll-reveal (sections.js data-reveal ile) — cila ─────────── */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease, ease), transform .7s var(--ease, ease); }
[data-reveal].is-in, .is-in [data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ── Scroll Banner (kare-kare şerit) ─────────────────────────────────── */
.homi-frameband {
  position: relative;
  width: 100%;
  aspect-ratio: 2.5 / 1;   /* varsayılan; widget'tan ayarlanır / yükseklikle ezilir */
  overflow: hidden;
  background: #05070f;
}
.homi-frameband canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.homi-frameband__overlay { position: absolute; inset: 0; background: #000; opacity: .3; pointer-events: none; z-index: 1; }
.homi-frameband__text {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center; justify-items: center;
  padding: clamp(20px, 4vw, 60px);
  text-align: center; color: #fff;
}
.homi-frameband__text > * {
  margin: 0;
  font-family: var(--font-head);
  font-weight: bold;
  font-size: clamp(1.4rem, 3.4vw, 3.4rem);
  line-height: 1.1;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .5);
}
.homi-frameband-data { display: none; }
/* Tam genişlik (kenardan kenara) — prefix_class ile açılır */
.homi-fb-full-yes .homi-frameband { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }