/* ============================================================
   GESU ANA SAYFA — anasayfa.css  (W17 · 05.09.2026 · W28 hero hareketi 05.09 · W29 6 dil + RTL · W32 Astra #3 kanıt bandı ≥16px, ?v=4)
   Yalnız ana sayfa (6 dil) bileşenleri. Tailwind yardımcıları
   düzen için, buradaki sınıflar karakter için.
   Kural: içerik opacity:0 ile BAŞLAMAZ (Madde 12.2) — .acil
   yalnız html.js varken gizlenir, IntersectionObserver açar.
   ============================================================ */

:root {
  --lacivert: #0c1929;
  --lacivert-2: #132d4a;
  --mavi: #2b4a99;
  --turkuaz: #00ace9;
  --turuncu: #e85e0c;
  --kum: #f4f6f9;
  --murekkep: #0f172a;
  --gri: #4b5563;
  --cizgi: rgba(12, 25, 41, 0.08);
  --serif: 'DM Serif Display', Georgia, serif;
  --sans: 'Source Sans 3', system-ui, sans-serif;
}

/* Yazı ailesi (eski satır içi <style>'dan taşındı) */
h1, h2, .font-display { font-family: var(--serif); }
body { font-family: var(--sans); letter-spacing: 0.01em; }

/* ---------- Bölüm ritmi ---------- */
.bolum { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.bolum-dar { padding-block: clamp(2.5rem, 5vw, 4rem); }
.bolum-kum { background: var(--kum); }
.bolum-koyu { background: var(--lacivert); color: #fff; }
.bolum-koyu-degrade {
  background: linear-gradient(160deg, var(--lacivert) 0%, var(--lacivert-2) 55%, var(--lacivert) 100%);
  color: #fff;
}

.etiket {
  display: inline-flex; align-items: center; gap: .6rem;
  /* 06.09 canlı mobil denetimi: .78rem = 12,48px, Madde 12.4 eşiği 13px */
  font-family: var(--sans); font-size: .8125rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--turkuaz);
}
.etiket::before { content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px; }
.etiket-orta { justify-content: center; }
.etiket-orta::after { content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px; }

.baslik-2 {
  font-family: var(--serif); font-weight: 400; line-height: 1.12; letter-spacing: -0.01em;
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.75rem); color: var(--murekkep);
}
.bolum-koyu .baslik-2, .bolum-koyu-degrade .baslik-2 { color: #fff; }
.alt-satir { font-size: clamp(1rem, .95rem + .3vw, 1.15rem); line-height: 1.6; color: var(--gri); }
.bolum-koyu .alt-satir, .bolum-koyu-degrade .alt-satir { color: rgba(255,255,255,.72); }

/* ---------- Düğmeler ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 52px; padding: .8rem 1.6rem; border-radius: 14px;
  font-weight: 700; font-size: 1.05rem; line-height: 1.2; text-decoration: none;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn-turuncu { background: var(--turuncu); color: #fff; box-shadow: 0 10px 26px -12px rgba(232,94,12,.75); }
.btn-turuncu:hover { background: #cf500a; transform: translateY(-1px); }
.btn-cam {
  background: rgba(255,255,255,.1); color: #fff; border: 1.5px solid rgba(255,255,255,.45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.btn-cam:hover { background: rgba(255,255,255,.2); border-color: #fff; }
.btn-mavi { background: var(--mavi); color: #fff; }
.btn-mavi:hover { background: #22397a; transform: translateY(-1px); }
.btn-cerceve { border: 2px solid var(--mavi); color: var(--mavi); background: transparent; }
.btn-cerceve:hover { background: var(--mavi); color: #fff; }
.btn svg { width: 1.15em; height: 1.15em; }

/* ---------- HERO ---------- */
.hero { position: relative; background: var(--lacivert); color: #fff; isolation: isolate; }
.hero-medya { position: relative; z-index: 0; overflow: hidden; aspect-ratio: 4 / 3; max-height: 62vh; background: var(--lacivert); max-width: 100%; }
/* 06.09: mobilde yaklaşma animasyonu kareyi 3px taşırıyordu (Madde 12.4) */
.hero-medya img, .hero-video { max-width: 100%; }
/* W28 — poster + video aynı sarmalayıcıda: yavaş yaklaşma ikisine birden uygulanır, video açılınca kare kaymaz */
.hero-medya-ic { position: absolute; inset: 0; transform-origin: 55% 60%; overflow: hidden; }
.hero-medya img, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.hero-video { opacity: 0; transition: opacity 1.4s ease; z-index: 1; background: transparent; }
.hero-video.oynuyor { opacity: 1; }
/* 06.09 canlı mobil denetimi: scale(1.07) kareyi 5px taşırıyordu → ölçek yerine yavaş kaydırma (Madde 12.4) */
html.js .hero-medya-ic { animation: hero-yaklas 14s cubic-bezier(.2,.6,.2,1) both; }
@keyframes hero-yaklas { from { transform: scale(1.07) translateZ(0); } to { transform: scale(1) translateZ(0); } }
@media (max-width: 767px) { html.js .hero-medya-ic { animation: none; } .hero-medya img, .hero-video { width: 100%; max-width: 100%; } }

/* W28 — SOYUT su ışıltısı (Madde 13.1 son satır: stok değil, CSS ile üretilmiş; iddia taşımaz).
   Yalnız transform/opacity animasyonu (compositor), video/poster üstünde, örtünün ALTINDA:
   metin bölgesini örtü karartır, ışıltı fotoğrafın açık kalan tarafında yaşar. */
.hero-isilti { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.hero-isilti::before {
  content: ""; position: absolute; inset: -35%;
  background:
    radial-gradient(38% 46% at 32% 68%, rgba(0,172,233,.30) 0%, rgba(0,172,233,0) 70%),
    radial-gradient(30% 40% at 76% 26%, rgba(127,227,255,.22) 0%, rgba(127,227,255,0) 70%);
  mix-blend-mode: screen; will-change: transform;
  animation: isilti-gez 20s ease-in-out infinite alternate;
}
.hero-isilti::after {
  content: ""; position: absolute; top: -25%; bottom: -25%; left: 0; width: 34%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.07) 42%, rgba(168,240,255,.17) 50%, rgba(255,255,255,.06) 58%, rgba(255,255,255,0) 100%);
  transform: translateX(-160%) skewX(-14deg); will-change: transform;
  animation: isik-supur 12s cubic-bezier(.45,0,.2,1) infinite;
}
@keyframes isilti-gez {
  from { transform: translate3d(-6%, 3%, 0) scale(1); }
  to   { transform: translate3d(7%, -5%, 0) scale(1.12); }
}
@keyframes isik-supur {
  0%   { transform: translateX(-160%) skewX(-14deg); opacity: 0; }
  12%  { opacity: 1; }
  55%  { opacity: 1; }
  70%  { transform: translateX(420%) skewX(-14deg); opacity: 0; }
  100% { transform: translateX(420%) skewX(-14deg); opacity: 0; }
}
/* dalga çizgileri — 2880 birimlik yol, 1440'ta kendini tekrar eder; %50 kaydırınca dikişsiz döner */
.hero-dalga { position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(84px, 13vw, 170px); z-index: 2; pointer-events: none; overflow: hidden; }
.hero-dalga svg { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; display: block; will-change: transform; animation: dalga-kay 18s linear infinite; }
.hero-dalga svg + svg { animation-duration: 27s; animation-direction: reverse; opacity: .7; }
.hero-dalga path { fill: none; stroke: #7fe3ff; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.hero-dalga .d1 { stroke-opacity: .48; }
.hero-dalga .d2 { stroke-opacity: .32; }
.hero-dalga .d3 { stroke-opacity: .22; }
.hero-dalga .dolgu { fill: rgba(0,172,233,.14); stroke: none; }
@keyframes dalga-kay { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

.hero-ortu { position: absolute; inset: 0; z-index: 3; background: linear-gradient(180deg, rgba(12,25,41,.06) 0%, rgba(12,25,41,0) 40%, rgba(12,25,41,.22) 72%, rgba(12,25,41,.96) 100%); }

/* W28 — tek seferlik açılış: yalnız html.js varken; betik yoksa hiçbir şey gizli başlamaz (Madde 12.2) */
html.js .hero-icerik > * { animation: hero-gir .85s cubic-bezier(.2,.7,.2,1) both; }
html.js .hero-icerik > :nth-child(1) { animation-delay: .05s; }
html.js .hero-icerik > :nth-child(2) { animation-delay: .16s; }
html.js .hero-icerik > :nth-child(3) { animation-delay: .30s; }
html.js .hero-icerik > :nth-child(4) { animation-delay: .44s; }
html.js .hero-icerik > :nth-child(5) { animation-delay: .58s; }
@keyframes hero-gir { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero-kaynak {
  position: absolute; left: 1rem; bottom: .9rem; z-index: 4; max-width: calc(100% - 2rem);
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.92);
  background: rgba(12,25,41,.62); border: 1px solid rgba(255,255,255,.18);
  padding: .4rem .7rem; border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
@media (max-width: 767px) { .hero-kaynak { font-size: .8125rem; padding: .3rem .6rem; bottom: .7rem; } }
.hero-kaynak svg { width: 14px; height: 14px; color: var(--turkuaz); flex-shrink: 0; }
.hero-icerik { position: relative; z-index: 2; padding: 1.5rem 1rem 2.5rem; max-width: 80rem; margin-inline: auto; }
.hero-icerik .etiket { color: #7fe3ff; margin-bottom: 1rem; }
.hero-baslik {
  font-family: var(--serif); font-weight: 400; letter-spacing: -0.015em; line-height: 1.06;
  font-size: clamp(2.35rem, 1.6rem + 3.4vw, 4.1rem); color: #fff; max-width: 15ch;
  text-wrap: balance;
}
.hero-alt {
  margin-top: 1.1rem; font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem); line-height: 1.55;
  color: rgba(255,255,255,.86); max-width: 38rem; font-weight: 300;
}
.hero-alt strong { color: #fff; font-weight: 700; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; align-items: center; }
.hero-cta .btn { flex: 1 1 14rem; }
.hero-wa {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .5rem .3rem;
  color: #a8f0ff; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(168,240,255,.45);
}
.hero-wa:hover { color: #fff; }
.hero-rozet { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; padding: 0; list-style: none; }
.hero-rozet li {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: .35rem .85rem;
  border-radius: 999px; font-size: .875rem; font-weight: 600; color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.07);
}
.hero-rozet svg { width: 15px; height: 15px; color: var(--turkuaz); }

@media (min-width: 768px) {
  .hero-medya { aspect-ratio: 16 / 9; max-height: 58vh; }
}
@media (min-width: 1024px) {
  .hero { min-height: min(86vh, 820px); display: flex; align-items: center; }
  .hero-medya { position: absolute; inset: 0; aspect-ratio: auto; max-height: none; }
  .hero-medya img, .hero-video { object-position: 50% 50%; }
  .hero-dalga { height: clamp(120px, 15vw, 210px); }
  .hero-ortu {
    background:
      linear-gradient(90deg, rgba(12,25,41,.94) 0%, rgba(12,25,41,.82) 34%, rgba(12,25,41,.38) 60%, rgba(12,25,41,.08) 100%),
      linear-gradient(180deg, rgba(12,25,41,.15) 0%, rgba(12,25,41,0) 30%, rgba(12,25,41,.55) 100%);
  }
  .hero-kaynak { left: auto; right: 6.5rem; bottom: 1.25rem; max-width: min(44rem, calc(100% - 3rem)); } /* sağda WhatsApp düğmesine yer bırakır */
  .hero-icerik { padding: 5rem 2rem 6rem; width: 100%; }
  .hero-icerik > * { max-width: 44rem; }
  .hero-cta .btn { flex: 0 0 auto; min-width: 12rem; }
}

/* ---------- KANIT BANDI ---------- */
.rakam { font-family: var(--sans); font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; }
.rakam-buyuk { font-size: clamp(2.4rem, 2rem + 2vw, 3.6rem); color: #fff; }
.rakam-buyuk .ek { color: var(--turuncu); }
.rakam-buyuk .birim { font-size: .42em; font-weight: 700; color: rgba(255,255,255,.8); margin-left: .15em; vertical-align: top; }
.rakam-etiket { margin-top: .5rem; font-size: 1rem; font-weight: 600; color: rgba(255,255,255,.8); }
/* Astra #3 (05.09): mobilde kanıt açıklamaları ≥16px, satır aralığı 1.5 — Madde 12.4 */
.kanit-satir {
  display: flex; gap: .7rem; align-items: flex-start; min-height: 44px;
  padding: .7rem .2rem; color: rgba(255,255,255,.86); font-size: 1rem; line-height: 1.5; text-decoration: none;
  border-top: 1px solid rgba(255,255,255,.1);
}
.kanit-satir:hover { color: #fff; }
.kanit-satir strong { color: #fff; }
.kanit-satir .text-white\/55 { color: rgba(255,255,255,.7); }
.kanit-satir svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--turkuaz); margin-top: .1rem; }
.cam-kart { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; }

/* ---------- Kartlar ---------- */
.kart {
  display: flex; flex-direction: column; background: #fff; border-radius: 20px; overflow: hidden;
  border: 1px solid var(--cizgi); box-shadow: 0 14px 34px -22px rgba(12,25,41,.35);
  text-decoration: none; color: inherit;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.kart-foto { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--kum); }
.kart-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.kart-govde { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.kart-baslik { font-family: var(--sans); font-weight: 700; font-size: 1.25rem; line-height: 1.25; color: var(--murekkep); }
.kart-metin { margin-top: .55rem; font-size: .95rem; line-height: 1.55; color: var(--gri); }
.kart-ok { margin-top: auto; padding-top: 1rem; display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .92rem; color: var(--mavi); }
.kart-ok svg { width: 16px; height: 16px; transition: transform .2s ease; }
.rozet {
  position: absolute; top: .85rem; left: .85rem; z-index: 1; display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .8rem; border-radius: 999px; font-size: .8125rem; font-weight: 800; letter-spacing: .02em; color: #fff;
  background: rgba(12,25,41,.78); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(4px);
}
.rozet svg { width: 13px; height: 13px; color: var(--turkuaz); }
.rozet-turuncu { background: var(--turuncu); border-color: transparent; }
.rozet-turuncu svg { color: #fff; }
.rozet-mavi { background: var(--mavi); border-color: transparent; }
.rozet-mavi svg { color: #fff; }
.karo { display: block; position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--lacivert); color: #fff; text-decoration: none; }
.karo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.karo-yazi {
  position: absolute; inset: auto 0 0 0; padding: 2.2rem .95rem .85rem;
  background: linear-gradient(180deg, rgba(12,25,41,0) 0%, rgba(12,25,41,.88) 70%);
}
.karo-yazi strong { display: block; font-size: 1.05rem; }
.karo-yazi span { display: block; font-size: .84rem; color: rgba(255,255,255,.78); margin-top: .1rem; }
.pill {
  display: inline-flex; align-items: center; min-height: 44px; padding: .55rem 1.05rem; border-radius: 999px;
  border: 1px solid #d5dbe5; font-size: .92rem; font-weight: 600; color: #374151; text-decoration: none; background: #fff;
  transition: border-color .18s, color .18s, background-color .18s;
}
.pill:hover { border-color: var(--mavi); color: var(--mavi); }
.pill-vurgu { background: rgba(43,74,153,.06); border-color: rgba(43,74,153,.35); color: var(--mavi); }
.pill-vurgu:hover { background: var(--mavi); color: #fff; }
.sayi-kart { border-radius: 18px; padding: 1.25rem 1rem; text-align: center; }
.sayi-kart .rakam { font-size: clamp(1.9rem, 1.6rem + 1.2vw, 2.6rem); }

/* Yatay kaydırmalı fabrika şeridi */
.serit { display: flex; gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .25rem 1rem 1rem; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.serit > figure { flex: 0 0 min(78vw, 360px); scroll-snap-align: start; margin: 0; }
.serit img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; display: block; }
.serit figcaption { margin-top: .5rem; font-size: .875rem; color: rgba(255,255,255,.75); line-height: 1.35; }
@media (min-width: 1024px) { .serit > figure { flex-basis: 300px; } }

/* SSS */
.sss details { border-top: 1px solid var(--cizgi); }
.sss details:last-child { border-bottom: 1px solid var(--cizgi); }
.sss summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 56px; padding: .9rem .25rem; font-weight: 700; font-size: 1.05rem; color: var(--murekkep);
}
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--turkuaz); flex-shrink: 0; transition: transform .2s; }
.sss details[open] summary::after { transform: rotate(45deg); }
.sss .cevap { padding: 0 .25rem 1.1rem; color: var(--gri); line-height: 1.6; font-size: .98rem; max-width: 62rem; }

/* ---------- RTL (Arapça ana sayfa, W29) — düzen aynalanır, sayılar dir="ltr" ile HTML'de korunur ---------- */
[dir="rtl"] .hero-kaynak { left: auto; right: 1rem; }
[dir="rtl"] .rozet { left: auto; right: .85rem; }
[dir="rtl"] .hero-isilti::after { left: auto; right: 0; transform: translateX(160%) skewX(14deg); animation-name: isik-supur-rtl; }
@keyframes isik-supur-rtl {
  0%   { transform: translateX(160%) skewX(14deg); opacity: 0; }
  12%  { opacity: 1; }
  55%  { opacity: 1; }
  70%  { transform: translateX(-420%) skewX(14deg); opacity: 0; }
  100% { transform: translateX(-420%) skewX(14deg); opacity: 0; }
}
[dir="rtl"] svg:has(> use[href="#i-arrow-right"]) { transform: scaleX(-1); }
[dir="rtl"] .etiket { letter-spacing: 0; }
@media (hover: hover) { [dir="rtl"] .kart:hover .kart-ok svg { transform: scaleX(-1) translateX(3px); } }
@media (min-width: 1024px) {
  [dir="rtl"] .hero-ortu {
    background:
      linear-gradient(270deg, rgba(12,25,41,.94) 0%, rgba(12,25,41,.82) 34%, rgba(12,25,41,.38) 60%, rgba(12,25,41,.08) 100%),
      linear-gradient(180deg, rgba(12,25,41,.15) 0%, rgba(12,25,41,0) 30%, rgba(12,25,41,.55) 100%);
  }
  [dir="rtl"] .hero-kaynak { right: auto; left: 12.5rem; } /* solda ÖNERİLER düğmesine (notlar.js) yer bırakır */
}

/* ---------- Hareket (bir kez, amaçlı) ---------- */
html.js .acil { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
html.js .acil.goster { opacity: 1; transform: none; }
@media (hover: hover) {
  .kart:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -24px rgba(12,25,41,.45); border-color: rgba(43,74,153,.25); }
  .kart:hover .kart-foto img, .karo:hover img { transform: scale(1.04); }
  .kart:hover .kart-ok svg { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  html.js .acil { opacity: 1; transform: none; transition: none; }
  .kart, .kart-foto img, .karo img, .btn { transition: none; }
  /* W28 — hero hareketsiz: poster kalır (video JS'te de yüklenmez), ışıltı/dalga/yaklaşma/açılış yok */
  html.js .hero-medya-ic, .hero-isilti::before, .hero-isilti::after, .hero-dalga svg, html.js .hero-icerik > * { animation: none; }
  .hero-isilti, .hero-dalga, .hero-video { display: none; }
  html.js .hero-medya-ic { transform: none; }
}