/* =========================================================================
   Doku ve derinlik katmani

   Sorun: duz kirik beyaz zemin + duz beyaz kartlar = mekanik his.
   Cozum: cok hafif grenli doku, yumusak turuncu isiklar, bolum numaralarinin
   filigrani ve kartlarda ince bir isik gradyani. Hicbiri gorsel dosya
   gerektirmiyor — hepsi CSS, yani ek istek ve LCP maliyeti yok.
   ========================================================================= */

/* ---------- Gren ----------
   Tek bir inline SVG turbulansi. Sabit konumda, tiklama gecirmez, cok dusuk
   opaklikta. Ekrani "kagit" hissettirir, dosya boyutu ~0. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Gren, kendi uzerinde yigin olusturan katmanlarin altinda kalmali */
.masthead, .overlay-nav, .mobile-bar, .offer-bar, .qm { z-index: 60; }
.qm { z-index: 120; }

/* ---------- Yumusak isiklar ----------
   Bolumlere derinlik veren, kenardan sizan turuncu parilti. */
.section, .hero, .cta { position: relative; }

.bloom { position: relative; overflow: hidden; }
.bloom::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(52vw, 620px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(237, 109, 30, 0.13) 0%, transparent 68%);
  pointer-events: none;
}
.bloom > * { position: relative; z-index: 1; }

.bloom--tl::before { top: -22%; left: -14%; }
.bloom--tr::before { top: -26%; right: -12%; }
.bloom--br::before { bottom: -30%; right: -14%; }
.bloom--bl::before { bottom: -28%; left: -16%; }

.section--dark .bloom::before,
.cta .bloom::before { background: radial-gradient(circle, rgba(237, 109, 30, 0.18) 0%, transparent 66%); }

/* ---------- Bolum numarasi filigrani ----------
   Buyuk, sonuk bir numara. Editorial his verir, okumayi engellemez. */
.section-head { position: relative; }
.section-head[data-num]::before {
  content: attr(data-num);
  position: absolute;
  top: -0.42em;
  right: 0;
  z-index: -1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(5rem, 13vw, 11rem);
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--ink);
  opacity: 0.045;
  pointer-events: none;
  user-select: none;
}
@media (min-width: 900px) {
  .section-head[data-num]::before { right: -1rem; }
}
.section--dark .section-head[data-num]::before { color: #fff; opacity: 0.06; }

/* ---------- Kartlarda isik ----------
   Ustten asagi cok hafif bir aydinlanma; kart duz bir dikdortgen olmaktan cikar. */
.card, .quote-card, .lead-form, .plan, .versus__col, .aside-links, .module {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 42%);
}
.section--dark .card, .section--dark .module {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0) 45%);
}

/* Karta gelince ustunde ince turuncu bir cizgi belirsin */
.card { position: relative; }
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-deep));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.card:hover::before { transform: scaleX(1); }
.post-card::before { display: none; }   /* kapak gorseli var, cizgi gereksiz */

/* ---------- Bolumler arasi gecis ----------
   Acik ve koyu bolumlerin birlesme yerinde sert cizgi yerine yumusak gecis. */
.section--surface { position: relative; }
.section--surface::before,
.section--surface::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2.5rem;
  pointer-events: none;
}
.section--surface::before { top: 0; background: linear-gradient(var(--bg), transparent); }
.section--surface::after  { bottom: 0; background: linear-gradient(transparent, var(--bg)); }

/* ---------- Hero'da ince izgara ----------
   Cok sonuk bir teknik izgara; bos alani olu birakmaz. */
.hero--grid::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 80% 62% at 50% 0%, #000 12%, transparent 76%);
}
.hero--grid > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  body::after { display: none; }
}

/* =========================================================================
   Fiyat seridi — hero'nun hemen altinda, donusum bilgisini yukari tasir
   ========================================================================= */
.price-bar {
  background: var(--dark);
  color: var(--ink-onDarkDim);
  padding-block: clamp(1.1rem, 2.2vw, 1.5rem);
}
.price-bar__grid {
  display: grid;
  gap: 1rem;
  align-items: center;
}
@media (min-width: 1000px) {
  .price-bar__grid { grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(1.5rem, 3vw, 3rem); }
}

.price-bar__figure { display: grid; gap: 0.1rem; }
.price-bar__figure span {
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
}
.price-bar__figure strong {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}

.price-bar__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  font-size: var(--fs-sm);
}
.price-bar__facts span { display: inline-flex; align-items: center; gap: 0.45em; }
.price-bar__facts svg { color: var(--accent); flex: none; }

.price-bar .btn { white-space: nowrap; }

/* =========================================================================
   Tilki markasi
   "Libart" tilki demek. Logodaki geometrik tilki burada hem kelime markasinin
   yaninda kucuk bir isaret, hem de bolum zeminlerinde cok sonuk bir filigran
   olarak kullaniliyor.
   ========================================================================= */

/* ---------- Kelime markasinin yanindaki isaret ---------- */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.fox--mark {
  width: 1.45rem;
  height: auto;
  flex: none;
  color: var(--ink);
  transition: transform 0.4s var(--ease);
}
.wordmark:hover .fox--mark { transform: translateY(-2px) rotate(-4deg); }
.footer .fox--mark { color: #fff; }

/* ---------- Zemin filigrani ---------- */
.fox--watermark {
  position: absolute;
  pointer-events: none;
  user-select: none;
  color: var(--ink);
  opacity: 0.04;
  z-index: 0;
  --fox-accent: currentColor;   /* filigranda turuncu burun gozukmesin */
}
.section--dark .fox--watermark,
.cta .fox--watermark,
.hero--dark .fox--watermark { color: #fff; opacity: 0.05; }

.band .fox--watermark { color: #fff; opacity: 0.12; }

/* Yerlesimler */
.fox--wm-tr { top: -6%;  right: -3%;  width: min(34vw, 420px); }
.fox--wm-bl { bottom: -12%; left: -5%; width: min(30vw, 380px); }
.fox--wm-r  { top: 50%; right: -4%; translate: 0 -50%; width: min(26vw, 320px); }

/* Filigranin uzerinde kalan icerik.
   :not(.fox--watermark) sart: bu kuralin ozgullugu .fox--watermark'tan yuksek
   oldugu icin filigranin position:absolute degerini eziyordu. */
.hero > *:not(.fox--watermark),
.cta  > *:not(.fox--watermark),
.band > *:not(.fox--watermark) { position: relative; z-index: 1; }

@media (max-width: 760px) {
  .fox--watermark { opacity: 0.03; }
  .fox--wm-r { display: none; }
}