/* ═══════════════════════════════════════════════════════════════════════════
   NutriOS · landing page
   ───────────────────────────────────────────────────────────────────────────
   TASARIM SİSTEMİ (bileşen yazmadan ÖNCE sabitlendi — ai-slop-onleme §2)

   Referans   : markanın krem/lime tarafı — açık, sade bir kâğıt zemin üstünde
                yalnız lime vurgu. Doku ve halka biçimi uygulamanın karşılama
                ekranından geliyor, rengi krem tarafa taşındı.
   Marka      : logo.png'den ölçülen lime gradyan (#CDF95A → #79B317). Zemin
                bu gradyanın açık krem karşılığı (#F7F3E8). Mor→mavi gradyan
                YOK; o, marka kararı taşımayan varsayılan.
   Zemin      : tek bir krem aile — sayfa #F7F3E8, kart #FFFDF6, ikinci kat
                #F1ECDD. Beyaz yok, gri yok; her ton aynı sıcaklıkta.
   Kontrast   : lime yalnız DOLGU rengi (koyu metinle). Metin/ikon vurgusu
                krem üstünde okunabilen koyu lime (--lime-derin) ile yazılır.
   Boşluk     : yalnız 4·8·12·16·24·32·48·64·96·128. Ara değer yok.
   Tipografi  : 3 boyut sıçraması (dev / başlık / gövde) + 2 ağırlık (400, 600);
                600'ün üstü yalnız sayaç rakamlarında.
   Köşe       : 12 / 20 / 28 / 999 — başka yarıçap yok.
   Yükseklik  : gölge yerine yarı saydam kenarlık; tek bir gölge tanımı var
                ve o da yalnız telefon çerçevelerinde kullanılıyor.
   İkon dili  : tek dil — 1,5px konturlu inline SVG. Emoji YALNIZ içerikte
                (mit kartlarının kendi ikonu veri tabanından geliyor).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* zemin & yüzey — krem aile */
  --krem:       #F7F3E8;
  --krem-yogun: #EFE9DA;
  --yuzey:      #FFFDF6;
  --yuzey-2:    #F1ECDD;
  --cizgi:      rgba(30, 38, 16, .10);
  --cizgi-guc:  rgba(30, 38, 16, .20);

  /* marka */
  --lime:       #C4F03F;   /* yalnız dolgu */
  --lime-parlak:#D3F962;
  --lime-orta:  #679610;   /* dolu nokta / ilerleme — krem üstünde 3.2:1 */
  --lime-derin: #4F7A0C;   /* metin ve ikon vurgusu */
  --lime-sis:   rgba(121, 179, 23, .14);

  /* ikincil işaretler */
  --amber:      #8F5407;
  --amber-sis:  rgba(180, 110, 10, .12);
  --mavi:       #1F63C4;
  --mavi-sis:   rgba(31, 99, 196, .10);
  --kirmizi:    #B3261E;

  /* metin */
  --metin:      #161A0E;
  --metin-2:    #55604A;
  --metin-3:    #68715C;   /* krem üstünde 4.6:1 — mikro metinler de AA */

  /* tipografi */
  /* Alt sınırlar 390 px'te ÖLÇÜLDÜ: Türkçedeki uzun kelimeler ("Gerisini",
     "günlüğe") bölünemiyor, bu yüzden başlangıç değeri küçük tutuluyor. */
  --f-dev:   clamp(1.95rem, .55rem + 6.2vw, 5.25rem);
  --f-h2:    clamp(1.5rem, 1rem + 2.2vw, 2.75rem);
  --f-h3:    1.0625rem;
  --f-govde: 1.0625rem;
  --f-mikro: .8125rem;

  /* köşe */
  --r-s:  12px;
  --r-m:  20px;
  --r-l:  28px;

  /* hareket — güçlü eğriler; CSS'in yerleşik easing'leri fazla yumuşak */
  --cik:    cubic-bezier(.23, 1, .32, 1);
  --girçık: cubic-bezier(.77, 0, .175, 1);

  --golge-tel: 0 32px 64px -28px rgba(38, 46, 22, .32);
  --en: min(1200px, 100% - 48px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--krem);
  color: var(--metin);
  font: 400 var(--f-govde)/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Yana kaymaya karşı emniyet kemeri. `clip` tercih ediliyor: `hidden`
     sayfayı kaydırma kabına çevirdiği için yapışkan nav'ı bozabiliyor,
     `clip` ise sadece kırpar. Desteklemeyen eski tarayıcı `hidden`de kalır. */
  overflow-x: hidden;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  margin: 0; font-weight: 600; letter-spacing: -.02em; line-height: 1.15;
  /* Son çare: bölünemeyen uzun bir kelime satırı taşırmasın. */
  overflow-wrap: break-word;
}
p  { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a  { color: inherit; text-decoration: none; }

.gorunmez {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.atla {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 12px 20px; border-radius: var(--r-s);
  background: var(--lime); color: #10160A; font-weight: 600;
  transition: top 160ms var(--cik);
}
.atla:focus-visible { top: 16px; }

:focus-visible { outline: 2px solid var(--lime-derin); outline-offset: 3px; border-radius: 6px; }

/* ── ZEMİN KATMANLARI ───────────────────────────────────────────────────── */
.zemin { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

/* Diyagonal doku: karşılama ekranındaki dokunun krem karşılığı. Koyu zeminde
   beyaz çizgiydi; burada aynı çizgi kremin bir tık koyusu olarak duruyor. */
.zemin-izgara {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    115deg,
    rgba(30, 38, 16, .022) 0 1px,
    transparent 1px 7px);
}

.zemin-hale {
  position: absolute; top: -24%; right: -12%;
  width: 62vw; height: 62vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(circle,
    rgba(121, 179, 23, .14) 0%,
    rgba(121, 179, 23, .05) 42%,
    transparent 68%);
  filter: blur(16px);
}
.zemin-hale-alt {
  top: auto; right: auto; bottom: -18%; left: -14%;
  background: radial-gradient(circle,
    rgba(196, 240, 63, .22) 0%,
    rgba(196, 240, 63, .07) 45%,
    transparent 70%);
}

/* ── NAV ────────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 32px;
  width: var(--en); margin: 0 auto; padding: 16px 0;
  transition: background-color 200ms ease, border-color 200ms ease;
  border-bottom: 1px solid transparent;
}
.nav.yapisik {
  /* Krem zeminde .82 opaklık az kaldı: altından geçen koyu telefon ekranı
     çubuğun içinden sızıyor ve yalnız nav genişliğinde (backdrop-filter'ın
     kutusu kadar) bulanıklaştığı için ortada leke gibi duruyordu. */
  background: rgba(247, 243, 232, .94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--cizgi);
  /* sticky öğe var(--en) genişliğinde; zemin kenara kadar uzasın */
  box-shadow: 0 0 0 100vmax rgba(247, 243, 232, .94);
  clip-path: inset(0 -100vmax);
}

.nav-marka { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -.01em; }
.nav-marka img { width: 32px; height: 32px; }
.nav-marka b { color: var(--lime-derin); font-weight: 600; }

.nav-baglar { display: flex; gap: 28px; margin-left: auto; font-size: .9375rem; color: var(--metin-2); }
.nav-baglar a { transition: color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .nav-baglar a:hover { color: var(--metin); } }

/* ── DİL SEÇİCİ ─────────────────────────────────────────────────────────── */
/* İki durumlu tek bir kapsül. Bayrak yok (bayrak dili değil ülkeyi anlatır),
   açılır liste yok — iki dil için bir tıklama yeter. */
.dil {
  display: inline-flex; gap: 2px; padding: 3px;
  border: 1px solid var(--cizgi-guc); border-radius: 999px;
}
.dil-dugme {
  padding: 6px 12px; border: 0; border-radius: 999px;
  background: transparent; color: var(--metin-3);
  font: inherit; font-size: .8125rem; font-weight: 600; letter-spacing: .04em;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .dil-dugme:hover { color: var(--metin); }
}
.dil-dugme.etkin { background: var(--lime); color: #10160A; }

/* ── DÜĞMELER ───────────────────────────────────────────────────────────── */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px; border: 1px solid transparent; border-radius: 999px;
  font-size: .9375rem; font-weight: 600; cursor: pointer;
  transition: transform 160ms var(--cik), background-color 160ms ease,
              border-color 160ms ease, color 160ms ease;
}
.dugme:active { transform: scale(.97); }

.dugme-birincil { background: var(--lime); color: #10160A; }
@media (hover: hover) and (pointer: fine) {
  .dugme-birincil:hover { background: var(--lime-parlak); }
}

.dugme-hayalet { border-color: var(--cizgi-guc); color: var(--metin); }
@media (hover: hover) and (pointer: fine) {
  .dugme-hayalet:hover { border-color: var(--lime-derin); color: var(--lime-derin); }
}

.dugme-kucuk { padding: 10px 18px; font-size: .875rem; background: var(--lime); color: #10160A; }
@media (hover: hover) and (pointer: fine) { .dugme-kucuk:hover { background: var(--lime-parlak); } }

/* ── HERO ───────────────────────────────────────────────────────────────── */
.hero {
  width: var(--en); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: 48px; align-items: center;
  padding: 64px 0 96px;
}

.rozet {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 10px; margin-bottom: 24px;
  border: 1px solid var(--cizgi); border-radius: 999px;
  background: var(--lime-sis);
  font-size: var(--f-mikro); color: var(--metin-2); letter-spacing: .01em;
}
.nokta {
  width: 6px; height: 6px; border-radius: 999px; background: var(--lime-orta);
  box-shadow: 0 0 0 4px rgba(121, 179, 23, .18);
}

.dev { font-size: var(--f-dev); line-height: 1.03; letter-spacing: -.035em; }
/* Krem üstünde parlak lime okunmuyor: gradyan koyu uca kaydırıldı,
   dev punto için 3:1 sınırının üstünde kalıyor. */
.vurgu {
  background: linear-gradient(100deg, #5E8C10, #35590A);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.giris {
  margin-top: 24px; max-width: 46ch;
  font-size: 1.125rem; line-height: 1.62; color: var(--metin-2);
}
.giris strong { color: var(--metin); font-weight: 600; }

.hero-eylem { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.hero-mikro {
  display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 32px;
  font-size: var(--f-mikro); color: var(--metin-3);
}
.hero-mikro li { display: flex; align-items: center; gap: 8px; }
.hero-mikro li::before {
  content: ""; width: 4px; height: 4px; border-radius: 999px; background: var(--lime-derin);
}

/* ── 3B SAHNE (hero) ────────────────────────────────────────────────────── */
.sahne { perspective: 1500px; perspective-origin: 50% 50%; }

/* Sahne SINIRLI bir kutu: yüksekliği en içteki telefondan miras almıyor,
   kendi en-boy oranı var. Aksi hâlde 3B'de döndürülen yan telefonlar
   izdüşümde aşağı taşıp bir sonraki bölümün üstüne biniyor. */
.sahne-ic {
  position: relative;
  width: min(560px, 100%);
  margin-inline: auto;
  aspect-ratio: 1 / 1.12;
  transform-style: preserve-3d;
  /* --mx/--my fareyle JS'te yaylanarak güncellenir (app.js) */
  transform: rotateY(calc(var(--mx, 0) * 9deg)) rotateX(calc(var(--my, 0) * -6deg));
  will-change: transform;
}

/* ÇERÇEVE RESMİN ÜZERİNDE, KAPSAYICIDA DEĞİL.
   Önce kapsayıcıya `overflow:hidden` + `border-radius` verilmişti; 3B
   dönüşümlü (rotateX'li) bir öğede Chrome bu kırpmayı rasterleştirirken
   resmi TAMAMEN kaybediyordu — telefonlar boş çerçeve olarak çıkıyordu.
   Kırpmaya gerek yok: yuvarlatmayı resmin kendisi taşıyor. */
.tel {
  margin: 0;
  transform-style: preserve-3d;
}
.tel img {
  border-radius: 34px;
  border: 1px solid var(--cizgi-guc);
  box-shadow: var(--golge-tel);
}

.tel-orta {
  position: absolute; top: 50%; left: 50%; z-index: 2;
  width: 47%;
  transform: translate(-50%, -50%) translateZ(var(--z, 0px));
}

.tel-yan {
  position: absolute; top: 50%; left: 50%; z-index: 1;
  width: 40%;
  opacity: .5;
  transform: translate(calc(-50% + var(--dx)), -50%)
             translateZ(var(--z)) rotateY(var(--ry));
  transition: opacity 400ms var(--cik);
}
@media (hover: hover) and (pointer: fine) {
  .sahne:hover .tel-yan { opacity: .78; }
}

/* yüzen bilgi kartları */
.yuzen {
  position: absolute;
  padding: 14px 16px;
  border: 1px solid var(--cizgi-guc); border-radius: var(--r-m);
  background: rgba(255, 253, 246, .90);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transform: translateZ(var(--z));
  box-shadow: 0 20px 40px -24px rgba(38, 46, 22, .30);
}

.yuzen-halka {
  top: 12%; left: -4%;
  display: flex; align-items: center; gap: 12px;
}
.halka-dolgu {
  stroke-dasharray: 314;
  stroke-dashoffset: 314;
  animation: halkaDol 1.4s var(--cik) .5s forwards;
}
@keyframes halkaDol { to { stroke-dashoffset: 72; } }
.halka-yazi b { display: block; font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; }
.halka-yazi span { font-size: var(--f-mikro); color: var(--metin-3); }

.yuzen-tanima { bottom: 20%; right: -6%; width: 216px; }
.ust-yazi {
  display: block; margin-bottom: 10px;
  font-size: .6875rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--metin-3);
}
.tanima-satir {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 5px 0; font-size: .8125rem;
}
.tanima-satir i { font-style: normal; color: var(--metin-2); }
.tanima-satir em { font-style: normal; font-weight: 600; }
.tanima-rozet {
  margin-top: 8px; padding: 4px 10px; border-radius: 999px;
  background: var(--lime-sis); color: var(--lime-derin);
  font-size: .6875rem; font-weight: 600; text-align: center;
}

.yuzen-adim {
  bottom: 4%; left: 2%;
  display: flex; align-items: center; gap: 12px;
}
.adim-ikon {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: var(--r-s); background: var(--lime-sis); color: var(--lime-derin);
}
.yuzen-adim b { display: block; font-size: .875rem; font-weight: 600; }
.yuzen-adim span { font-size: var(--f-mikro); color: var(--metin-3); }

/* ── SAYI ŞERİDİ ────────────────────────────────────────────────────────── */
.serit { border-block: 1px solid var(--cizgi); background: rgba(255, 253, 246, .7); }
.serit-ic {
  width: var(--en); margin: 0 auto; padding: 32px 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
}
.serit-oge b {
  display: block; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  font-weight: 700; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.serit-oge span { font-size: var(--f-mikro); color: var(--metin-3); }

/* ── BÖLÜM İSKELETİ ─────────────────────────────────────────────────────── */
.bolum { width: var(--en); margin: 0 auto; padding: 96px 0; }
.bolum-alt { position: relative; }
/* Kenardan kenara uzanan zemin şeridi.
   Eskiden `inset: 0 -50vw` yazıyordu: bölüm ortalanmış olduğu için şerit
   SAĞA DOĞRU yarım ekran taşıyordu ve sayfa yana kaydırılabilir hâle
   geliyordu. Dar ekranda 390 px'lik görünüm 554 px'e çıkıyor, her şey kaymış
   gibi duruyordu. Şimdi şerit tam olarak bir ekran genişliğinde ve bölümün
   merkezine hizalı: taşma yok. */
.bolum-alt::before {
  content: ""; position: absolute; z-index: -1;
  top: 0; bottom: 0; left: 50%;
  width: 100vw; transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--krem-yogun) 12%,
              var(--krem-yogun) 88%, transparent);
}

.bolum-bas { max-width: 62ch; margin-bottom: 48px; }
.etiket {
  margin-bottom: 12px;
  font-size: .6875rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--lime-derin);
}
.bolum-bas h2 { font-size: var(--f-h2); }
.aciklama { margin-top: 16px; color: var(--metin-2); font-size: 1.0625rem; }
.aciklama strong { color: var(--metin); font-weight: 600; }

/* ── 3B GİRİŞ GEÇİŞİ (IntersectionObserver ile .gorundu) ────────────────── */
.sahne-3b { perspective: 1200px; }

/* Giriş animasyonu EKLEMELİDİR, kapı değil.
   Başlangıçta `opacity: 0` yazılmıştı; JS çalışmazsa ya da tarayıcı 3B katmanı
   rasterleştiremezse içerik hiç görünmüyordu — headless çekimde tam olarak bu
   oldu. Gizli başlangıç durumu artık yalnız JS'in eklediği `.js` sınıfı
   altında geçerli, yani JS yoksa her şey görünür kalır. */
.js .geciyor {
  opacity: 0;
  transform: translateY(28px) rotateX(9deg) scale(.97);
  transform-origin: 50% 100%;
  transition: opacity 620ms var(--cik) var(--gecikme, 0ms),
              transform 620ms var(--cik) var(--gecikme, 0ms);
}
.js .geciyor.gorundu { opacity: 1; transform: none; }

/* Telefon görselleri gölge + yuvarlatma + 3B dönüşü aynı anda taşıyor;
   Chrome bu bileşimde katmanı bazen hiç boyamıyor. Ekranlarda eğim yok,
   yalnız yükselerek beliriyorlar. */
.js .tel-tekil.geciyor { transform: translateY(28px) scale(.98); }

/* ── AI KAMERA ──────────────────────────────────────────────────────────── */
.kamera-duzen {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px; align-items: start;
}

.tarama-3b {
  position: relative;
  transform: rotateY(-11deg) rotateX(5deg);
  transform-style: preserve-3d;
  transition: transform 700ms var(--cik);
}
@media (hover: hover) and (pointer: fine) {
  .tarama:hover .tarama-3b { transform: rotateY(-4deg) rotateX(2deg); }
}

.tarama-foto {
  position: relative; overflow: hidden;
  border: 1px solid var(--cizgi-guc); border-radius: var(--r-l);
  transform: translateZ(0);
}
.tarama-foto img { width: 100%; }

.tarama-cerceve { position: absolute; inset: 9%; }
.tarama-cerceve i { position: absolute; width: 26px; height: 26px; border: 2px solid var(--lime); }
.tarama-cerceve i:nth-child(1) { top: 0; left: 0;  border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.tarama-cerceve i:nth-child(2) { top: 0; right: 0; border-left: 0;  border-bottom: 0; border-radius: 0 6px 0 0; }
.tarama-cerceve i:nth-child(3) { bottom: 0; left: 0;  border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.tarama-cerceve i:nth-child(4) { bottom: 0; right: 0; border-left: 0;  border-top: 0; border-radius: 0 0 6px 0; }

.tarama-isin {
  position: absolute; left: 0; right: 0; height: 130px;
  background: linear-gradient(180deg, transparent, rgba(196, 240, 63, .22), transparent);
  animation: isinGez 2.6s var(--girçık) infinite;
}
@keyframes isinGez { 0%, 100% { top: -12%; } 50% { top: 84%; } }

.tarama-sonuc {
  margin-top: 20px;
  display: grid; gap: 8px;
  transform: translateZ(28px);
}
.tarama-sonuc li {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center;
  gap: 8px 12px;
  padding: 12px 14px;
  border: 1px solid var(--cizgi); border-radius: var(--r-s);
  background: rgba(255, 253, 246, .92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(10px);
  animation: kalemGel 480ms var(--cik) forwards;
  animation-delay: calc(.6s + var(--g) * 140ms);
}
@keyframes kalemGel { to { opacity: 1; transform: none; } }

.tarama-sonuc .ad   { font-size: .9375rem; }
.tarama-sonuc .gram { font-size: .8125rem; color: var(--metin-2); font-variant-numeric: tabular-nums; }
.tarama-sonuc .kcal { font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.tarama-sonuc .kaynak {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 3px 9px; border-radius: 999px;
  font-size: .6875rem; font-weight: 600;
}
.kaynak-veri { background: var(--lime-sis); color: var(--lime-derin); }
.kaynak-ai   { background: var(--amber-sis); color: var(--amber); }

.kamera-liste { display: grid; gap: 16px; }

.ozet {
  padding: 24px;
  border: 1px solid var(--cizgi); border-radius: var(--r-m);
  background: rgba(255, 253, 246, .7);
  transition: border-color 200ms ease, background-color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .ozet:hover { border-color: var(--cizgi-guc); background: var(--yuzey); }
}
.ozet h3 { font-size: var(--f-h3); }
.ozet p { margin-top: 8px; font-size: .9375rem; color: var(--metin-2); }
.ozet em { font-style: normal; color: var(--metin); }
.ozet strong { color: var(--metin); font-weight: 600; }

.ip {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: .75rem; font-weight: 600;
}
.ip-ai { background: var(--amber-sis); color: var(--amber); }

/* telefon dizisi */
.ekran-sirasi, .ikili {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px; margin-top: 64px; justify-items: center;
}
.tel-tekil {
  width: min(280px, 100%);
  transform-style: preserve-3d;
}
.tel-tekil figcaption {
  margin-top: 16px; padding: 0 8px;
  font-size: .875rem; color: var(--metin-2); text-align: center;
}
.tel-tekil figcaption b { color: var(--metin); font-weight: 600; }

/* ── AI TARİFLİ PLAN — 3B akış ──────────────────────────────────────────── */
.akis { display: grid; gap: 32px; }

.akis-adimlar { display: flex; flex-wrap: wrap; gap: 8px; }
.akis-adimlar li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px 10px 12px;
  border: 1px solid var(--cizgi); border-radius: 999px;
  font-size: .875rem; color: var(--metin-3);
  cursor: pointer;
  transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease;
}
.akis-adimlar li b {
  display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 999px; background: var(--yuzey-2); color: var(--metin-2);
  font-size: .75rem; font-weight: 600;
  transition: background-color 200ms ease, color 200ms ease;
}
.akis-adimlar li.etkin { color: var(--metin); border-color: var(--cizgi-guc); background: var(--lime-sis); }
.akis-adimlar li.etkin b { background: var(--lime); color: #10160A; }

/* Karusel: ÜÇ ekran da hep görünür. Tek ekran gösterip diğerlerini gizlemek
   denendi ve bölüm boş duruyordu; ayrıca üç adımlı akışın kendisi görsel
   olarak okunmuyordu. Etkin olan öne gelir, diğerleri yanda ve derinde kalır. */
.akis-sahne {
  position: relative;
  height: min(660px, 96vw);
  transform-style: preserve-3d;
}
.akis-tel {
  position: absolute; top: 50%; left: 50%;
  width: min(268px, 30%);
  transition: opacity 560ms var(--cik), transform 560ms var(--cik),
              filter 560ms var(--cik);
  /* varsayılan = etkin */
  transform: translate(-50%, -50%) translateZ(0) rotateY(0) scale(1);
  opacity: 1;
  z-index: 2;
}
.akis-tel.yan-sol {
  transform: translate(calc(-50% - 96%), -50%) translateZ(-220px) rotateY(28deg) scale(.94);
  opacity: .42; z-index: 1;
}
.akis-tel.yan-sag {
  transform: translate(calc(-50% + 96%), -50%) translateZ(-220px) rotateY(-28deg) scale(.94);
  opacity: .42; z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
  .akis-sahne:hover .akis-tel.yan-sol,
  .akis-sahne:hover .akis-tel.yan-sag { opacity: .62; }
}

.akis-metin {
  position: relative; min-height: 150px;
  max-width: 60ch;
}
.akis-yazi {
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(12px);
  transition: opacity 400ms var(--cik), transform 400ms var(--cik);
  pointer-events: none;
}
.akis-yazi.etkin { opacity: 1; transform: none; pointer-events: auto; }
.akis-yazi h3 { font-size: 1.375rem; }
.akis-yazi p { margin-top: 12px; color: var(--metin-2); }

.not {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 8px;
  display: flex; gap: 10px; align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--cizgi); border-radius: var(--r-s);
  background: var(--amber-sis);
  font-size: .8125rem; color: var(--metin-2);
}
.not svg { flex: none; margin-top: 3px; color: var(--amber); }

/* ── KİŞİYE ÖZEL AI ─────────────────────────────────────────────────────── */
.alinti-duzen {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 48px; margin-top: 64px; align-items: start;
}
.alinti {
  margin: 0; padding: 32px;
  border: 1px solid var(--cizgi-guc); border-radius: var(--r-l);
  background: linear-gradient(155deg, rgba(196, 240, 63, .30), rgba(255, 253, 246, .85));
}
.alinti-etiket {
  display: inline-block; margin-bottom: 16px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--lime-sis); color: var(--lime-derin);
  font-size: .75rem; font-weight: 600; letter-spacing: .04em;
}
.alinti p { font-size: 1.1875rem; line-height: 1.55; letter-spacing: -.01em; }
.alinti cite { display: block; margin-top: 16px; font-size: var(--f-mikro); font-style: normal; color: var(--metin-3); }

.alinti-yan { display: grid; gap: 16px; }

/* ── ADIM RAYI ──────────────────────────────────────────────────────────── */
.ray { position: relative; margin-top: 64px; padding-top: 8px; }
.ray-cizgi {
  position: absolute; top: 15px; left: 6%; right: 6%; height: 2px;
  background: var(--cizgi-guc); border-radius: 999px; overflow: hidden;
}
.ray-dolgu {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--lime-orta), var(--lime-derin));
  transition: width 1.2s var(--cik);
}
.ray.gorundu .ray-dolgu { width: 42%; }

.ray-esikler { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: center; }
.ray-esikler li { position: relative; padding-top: 32px; }
.ray-esikler li::before {
  content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 999px;
  background: var(--krem); border: 2px solid var(--cizgi-guc);
  transition: border-color 300ms ease, background-color 300ms ease;
}
.ray-esikler li.acildi::before { border-color: var(--lime-derin); background: var(--lime-orta); }
.ray-esikler li b { display: block; font-size: 1.0625rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ray-esikler li span { font-size: var(--f-mikro); color: var(--metin-3); }
.ray-esikler li.soluk { opacity: .45; }

.ipucu { margin-top: 48px; font-size: var(--f-mikro); color: var(--metin-3); }
/* Fare varsayılan; dokunmatikte cümle değişiyor. Ekran boyutuna DEĞİL
   işaretçi türüne bakılıyor: dokunmatik bir dizüstünde de doğru cümle çıksın. */
.ipucu-dokun { display: none; }
@media (hover: none), (pointer: coarse) {
  .ipucu-fare { display: none; }
  .ipucu-dokun { display: inline; }
}

/* ── ÇEVİRMELİ KARTLAR (gerçek 3B) ──────────────────────────────────────── */
.kartlar {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; margin-top: 16px;
}

.flip { height: 232px; cursor: pointer; }
.flip-ic {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 560ms var(--girçık);
}
@media (hover: hover) and (pointer: fine) {
  .flip:hover .flip-ic { transform: rotateY(180deg); }
}
.flip.acik .flip-ic, .flip:focus-visible .flip-ic { transform: rotateY(180deg); }

.flip-on, .flip-arka {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: 24px;
  border: 1px solid var(--cizgi); border-radius: var(--r-m);
  background: var(--yuzey);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.flip-arka { transform: rotateY(180deg); background: var(--yuzey-2); }

.tur-mit   { border-color: rgba(180, 110, 10, .28); }
.tur-bilgi { border-color: rgba(121, 179, 23, .34); }

.flip .tur {
  font-size: .6875rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
}
.tur-mit .tur   { color: var(--amber); }
.tur-bilgi .tur { color: var(--lime-derin); }

.flip .emoji { font-size: 1.5rem; margin: 12px 0 8px; line-height: 1; }
.flip h3 { font-size: var(--f-h3); line-height: 1.35; }
.flip .cevir { margin-top: auto; font-size: .8125rem; color: var(--metin-3); }

.flip-arka p { font-size: .875rem; line-height: 1.55; }
.flip-arka .yanlis { color: var(--metin-3); }
.flip-arka .yanlis b { color: var(--amber); font-weight: 600; }
.flip-arka .dogru { margin-top: 12px; color: var(--metin-2); }
.flip-arka .dogru b { color: var(--lime-derin); font-weight: 600; }

/* ── GÜNÜN SINAVI ───────────────────────────────────────────────────────── */
.sinav {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 48px; align-items: center;
  margin-top: 64px; padding: 32px;
  border: 1px solid var(--cizgi); border-radius: var(--r-l);
  background: rgba(255, 253, 246, .7);
}
.sinav h3 { margin-top: 8px; font-size: 1.375rem; }
.sinav > div > p { margin-top: 12px; color: var(--metin-2); font-size: .9375rem; }

.sinav-kart { display: grid; gap: 8px; }
.soru { margin-bottom: 8px; font-size: .9375rem; font-weight: 600; }
.secenek {
  padding: 14px 18px; text-align: left;
  border: 1px solid var(--cizgi); border-radius: var(--r-s);
  background: var(--yuzey); color: var(--metin);
  font: inherit; font-size: .9375rem; cursor: pointer;
  transition: transform 160ms var(--cik), border-color 160ms ease, background-color 160ms ease;
}
.secenek:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .secenek:hover { border-color: var(--cizgi-guc); }
}
.secenek.dogru  { border-color: var(--lime-derin); background: var(--lime-sis); color: var(--lime-derin); }
.secenek.yanlis { border-color: rgba(179, 38, 30, .45); background: rgba(179, 38, 30, .08); color: var(--kirmizi); }

/* ── ÖZELLİK IZGARASI ───────────────────────────────────────────────────── */
.izgara {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.kutu {
  padding: 24px;
  border: 1px solid var(--cizgi); border-radius: var(--r-m);
  background: rgba(255, 253, 246, .7);
  transition: opacity 620ms var(--cik) var(--gecikme, 0ms),
              transform 620ms var(--cik) var(--gecikme, 0ms),
              border-color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .kutu:hover { border-color: var(--cizgi-guc); }
}
.kutu-ikon {
  display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 16px;
  border-radius: var(--r-s); background: var(--lime-sis); color: var(--lime-derin);
}
.kutu h3 { font-size: var(--f-h3); }
.kutu p { margin-top: 8px; font-size: .9375rem; color: var(--metin-2); }

/* ── ÖNE ÇIKAN ŞERİT (su takibi) ────────────────────────────────────────── */
.one-cikan {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: 48px; align-items: center;
  margin-bottom: 16px; padding: 32px;
  border: 1px solid var(--cizgi); border-radius: var(--r-l);
  background: linear-gradient(120deg, rgba(31, 99, 196, .10), rgba(255, 253, 246, .8));
}
.one-cikan-metin h3 { font-size: 1.375rem; }
.one-cikan-metin > p { margin-top: 12px; color: var(--metin-2); max-width: 58ch; }
.one-cikan .kutu-ikon { background: var(--mavi-sis); color: var(--mavi); }

.one-cikan-liste { margin-top: 24px; display: grid; gap: 8px; }
.one-cikan-liste li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .9375rem; color: var(--metin-2);
}
.one-cikan-liste li::before {
  content: ""; flex: none; margin-top: 8px;
  width: 5px; height: 5px; border-radius: 999px; background: var(--mavi);
}

.one-cikan-tel { justify-self: center; width: min(240px, 100%); }

/* ── CTA ────────────────────────────────────────────────────────────────── */
.cagri { padding: 96px 0; }
.cagri-ic {
  width: min(680px, 100% - 48px); margin: 0 auto; text-align: center;
  padding: 48px 32px;
  border: 1px solid var(--cizgi-guc); border-radius: var(--r-l);
  background: linear-gradient(165deg, rgba(196, 240, 63, .32), rgba(255, 253, 246, .9));
}
.cagri-rozet { width: 112px; height: 112px; margin: 0 auto 24px; border-radius: 24px; }
.cagri-ic h2 { font-size: var(--f-h2); }
.cagri-ic > p { margin: 16px auto 0; max-width: 46ch; color: var(--metin-2); }

/* ── MAĞAZA DÜĞMELERİ ──────────────────────────────────────────────────────
   İki durum var ve ayrım TEK ŞEYE bakıyor: `href` var mı yok mu. Adres
   yazılmamışken düğme kesikli çerçeveyle sönük durur, imleç değişmez,
   tıklanmaz. app.js adresi yazdığı an koyu dolu düğmeye döner — ek sınıf
   yönetmeye gerek kalmıyor.                                                 */
.magazalar {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-top: 32px;
}
.magaza {
  display: inline-flex; align-items: center; gap: 12px;
  min-width: 200px; padding: 11px 22px;
  border: 1px solid var(--metin); border-radius: 16px;
  background: var(--metin); color: var(--krem);
  transition: transform 160ms var(--cik), background-color 160ms ease,
              border-color 160ms ease, color 160ms ease;
}
.magaza-ikon { flex: none; }
.magaza-yazi { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.magaza-yazi small {
  font-size: .625rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; opacity: .7;
}
.magaza-yazi b { font-size: 1.0625rem; font-weight: 600; letter-spacing: .01em; }

@media (hover: hover) and (pointer: fine) {
  .magaza[href]:hover { background: #000; border-color: #000; }
}
.magaza[href]:active { transform: scale(.97); }

/* Adres yokken: renkli Play ikonu da sönsün, düğme "kapalı" okunsun. */
.magaza:not([href]) {
  background: transparent; color: var(--metin-3);
  border-color: var(--cizgi-guc); border-style: dashed;
  cursor: default;
}
.magaza:not([href]) .magaza-ikon { opacity: .45; }

/* Hero'daki ikili: metin sütununun içinde, sola yaslı ve bir tık küçük.
   Üstündeki iki büyük düğmeyle yarışmasın, onların altında ikinci sıra
   gibi okunsun diye. */
.magazalar-hero { justify-content: flex-start; margin-top: 16px; }
.magazalar-hero .magaza {
  min-width: 176px; padding: 9px 18px; gap: 10px; border-radius: 14px;
}
.magazalar-hero .magaza-yazi b { font-size: .9375rem; }

.magaza-not { margin-top: 14px; font-size: var(--f-mikro); color: var(--metin-3); }
.magaza-not[hidden] { display: none; }

.cagri-form { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 32px; }
.cagri-form input {
  flex: 1 1 260px; max-width: 340px;
  padding: 14px 18px;
  border: 1px solid var(--cizgi-guc); border-radius: 999px;
  background: var(--yuzey); color: var(--metin);
  font: inherit; font-size: .9375rem;
  transition: border-color 160ms ease;
}
.cagri-form input::placeholder { color: var(--metin-3); }
.cagri-form input[type="email"]:focus { border-color: var(--lime-derin); outline: none; }

/* Açık rıza kutusu: form ızgarasında KENDİ SATIRINDA (1 1 100%), e-posta
   alanıyla düğmenin altına iner. Metin sola yaslı, çünkü iki satıra taştığında
   ortalanmış hâli okumayı zorlaştırıyordu. */
.cagri-onay {
  flex: 1 1 100%;
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 4px; padding: 0 4px;
  text-align: left; font-size: var(--f-mikro); color: var(--metin-2);
  cursor: pointer;
}
.cagri-onay input {
  flex: none; width: 17px; height: 17px; margin: 2px 0 0;
  accent-color: var(--lime-derin); cursor: pointer;
}
.cagri-baglanti { color: var(--lime-derin); text-decoration: underline; }
.cagri-not { margin-top: 16px; font-size: var(--f-mikro); color: var(--metin-3); }
.cagri-not.iyi { color: var(--lime-derin); }
.cagri-not.kotu { color: var(--kirmizi); }

/* ── ALT BİLGİ ──────────────────────────────────────────────────────────── */
.alt { border-top: 1px solid var(--cizgi); }
.alt-ic {
  width: var(--en); margin: 0 auto; padding: 48px 0;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 32px; align-items: center;
}
.alt-marka { display: flex; align-items: center; gap: 12px; }
.alt-marka b { display: block; font-weight: 600; }
.alt-marka span { font-size: var(--f-mikro); color: var(--metin-3); }
.alt-kunye { font-size: var(--f-mikro); color: var(--metin-3); max-width: 62ch; }
.alt-telif { font-size: var(--f-mikro); color: var(--metin-3); white-space: nowrap; }

/* Yasal bağlantılar KENDİ SATIRINDA: `.alt-ic` üç sütunlu bir ızgara
   (marka | künye | telif) ve dördüncü öğe o düzeni bozardı. `1 / -1` ile
   tam genişlik alıp alta iniyor. Dikey dolgu dokunma hedefi içindir. */
.alt-baglar {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: .35rem 1.1rem;
  padding-top: 4px; border-top: 1px solid var(--cizgi);
}
.alt-baglar a {
  font-size: var(--f-mikro); color: var(--metin-3);
  padding: .35rem 0; text-decoration: none;
}
.alt-baglar a:hover,
.alt-baglar a:focus-visible { color: var(--lime-derin); text-decoration: underline; }

/* ══ DUYARLI ═══════════════════════════════════════════════════════════════ */
/* 1280–1400 arası laptoplarda sağdaki tanıma kartı, derinliği (translateZ)
   perspektifte dışa büyüttüğü için ekranın sağından taşıyordu. Derinlik
   azalıyor ve kart içeri alınıyor; 3B hissi kalıyor, taşma bitiyor. */
@media (max-width: 1400px) {
  .yuzen-tanima { right: 0; transform: translateZ(130px); }
}

@media (max-width: 1080px) {
  .izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 940px) {
  :root { --en: min(1200px, 100% - 32px); }
  .nav-baglar { display: none; }
  /* Bağlantılar gidince sağa itme işi dil seçiciye kalıyor. */
  .dil { margin-left: auto; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 64px; padding: 32px 0 64px; }
  .sahne { order: 2; }
  .kamera-duzen, .alinti-duzen { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .akis-sahne { height: min(520px, 128vw); }
  .akis-tel { width: min(220px, 42%); }
  .akis-tel.yan-sol { transform: translate(calc(-50% - 74%), -50%) translateZ(-220px) rotateY(28deg) scale(.94); }
  .akis-tel.yan-sag { transform: translate(calc(-50% + 74%), -50%) translateZ(-220px) rotateY(-28deg) scale(.94); }
  /* Üç akış metni geniş ekranda ÜST ÜSTE duruyor (mutlak konumlu, aralarında
     çapraz geçiş var). Dar ekranda metinler uzadığı için kapsayıcının sabit
     yüksekliğini aşıyor, altındaki uyarı kutusu metnin üstüne biniyordu.
     Burada üçü de aynı IZGARA HÜCRESİNE konuyor: geçiş efekti aynen duruyor
     ama kapsayıcı en uzun metin kadar yer kaplıyor, uyarı kutusu da kendi
     satırına iniyor. */
  .akis-metin { display: grid; min-height: 0; }
  .akis-yazi { position: static; grid-area: 1 / 1; }
  .not { position: static; grid-area: 2 / 1; margin-top: 24px; }
  .kartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .one-cikan { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .sinav { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .alt-ic { grid-template-columns: minmax(0, 1fr); text-align: left; }
}

@media (max-width: 640px) {
  /* Dar navda üç öğe var: marka, dil, CTA. 32px boşluk taşırıyordu. */
  .nav { gap: 12px; }
  .dil-dugme { padding: 6px 10px; }

  /* Hero'daki iki düğme telefonda alt alta düşüyordu: yan yana sığmıyorlardı.
     Satır sarması kapatılıp ikisi de esnek yapıldı; dar ekranda yazı düğmenin
     içinde iki satıra iner ama düğmeler yan yana kalır. */
  .hero-eylem { flex-wrap: nowrap; gap: 8px; }
  .hero-eylem .dugme {
    flex: 1 1 0; min-width: 0; justify-content: center; text-align: center;
    padding: 12px 14px; font-size: .875rem;
  }

  /* Yüzen kartlar telefon görsellerinin ALTINDA kalıyordu (telefonun
     z-index'i 2, kartlarınki otomatik). Dar ekranda kartların yazısı
     telefonun altında kesiliyordu; üste alındılar. */
  .yuzen { z-index: 3; }
  .bolum { padding: 64px 0; }
  .serit-ic { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .ekran-sirasi, .ikili { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .izgara, .kartlar { grid-template-columns: minmax(0, 1fr); }
  .flip { height: auto; min-height: 210px; }
  .ray-esikler { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 8px; }
  .ray-cizgi { display: none; }
  .yuzen-tanima { display: none; }        /* dar ekranda telefonun üstünü kapatıyor */

  /* Dar ekranda translateZ ışınsal olarak büyütüyor: negatif konumdaki kartlar
     görünüm alanının dışına taşıyordu. Derinlik kalkıyor, kartlar içeri alınıyor. */
  /* Kartlar dar ekranda ortadaki telefonun altında kalıyordu; küçülüp
     köşelere çekiliyorlar. */
  /* Derinlik SIFIRLANMIYOR, küçültülüyor: `transform: none` yazıldığında
     kartlar 3B sıralamada telefonların ARKASINA düşüyor (preserve-3d
     bağlamında z-index çalışmaz, sıralamayı Z konumu belirler) ve yazıları
     telefonun altında kesiliyordu. 60px, ortadaki telefonun 40px'inin
     önünde; perspektif büyütmesi %4, taşma yapmıyor. */
  .yuzen { transform: translateZ(60px); padding: 10px 12px; }
  .yuzen-halka { left: 0; top: 0; gap: 8px; }
  .yuzen-halka svg { width: 44px; height: 44px; }
  .halka-yazi b { font-size: 1rem; }
  .halka-yazi span { font-size: .6875rem; }
  .yuzen-adim { left: 0; bottom: 0; gap: 8px; }
  .yuzen-adim .adim-ikon { width: 28px; height: 28px; }
  .yuzen-adim b { font-size: .8125rem; }
  .yuzen-adim span { font-size: .6875rem; }
  .sahne-ic { aspect-ratio: 1 / 1.2; }
  .tel-orta { width: 54%; }
  .tel-yan  { width: 44%; }
  .cagri-ic { padding: 32px 24px; }
  /* CTA kartındaki büyük ikili dar ekranda alt alta ve tam genişlikte.
     Hero'daki küçük ikili ise sığdığı sürece yan yana kalsın (390 px'te
     kalıyor), sığmadığı an kendiliğinden alt alta insin. */
  .cagri .magaza { flex: 1 1 100%; justify-content: center; }
  .magazalar-hero .magaza { flex: 1 1 160px; min-width: 0; justify-content: center; }
}

/* ── ÇOK DAR EKRANLAR (iPhone SE ve benzeri) ──────────────────────────────
   320-400 px arasında üst şeritte üç öğe (marka, dil, CTA) yan yana
   sığmıyordu: esnek kutu öğeleri sıkıştırıp marka yazısının üstüne dil
   düğmesini bindiriyordu. Öğeler küçültülüyor, 340 px altında nav'daki
   CTA tamamen kalkıyor — aynı düğme hemen altta hero'da zaten var. */
@media (max-width: 400px) {
  .nav { gap: 8px; padding: 12px 0; }
  .nav-marka { gap: 8px; }
  .nav-marka img { width: 28px; height: 28px; }
  .nav-marka span { font-size: .9375rem; }
  .dil-dugme { padding: 5px 9px; font-size: .75rem; }
  .nav .dugme-kucuk { padding: 9px 12px; font-size: .8125rem; white-space: nowrap; }
}

@media (max-width: 340px) {
  .nav .dugme-kucuk { display: none; }
}

/* ══ AZALTILMIŞ HAREKET ════════════════════════════════════════════════════
   Hareket hastalığı için: KONUM/derinlik animasyonları kalkar, anlamayı
   kolaylaştıran opaklık geçişleri kalır.                                    */
@media (prefers-reduced-motion: reduce) {
  .sahne-ic { transform: none !important; }
  .tel-yan { opacity: .6; }
  .geciyor { transform: none; transition: opacity 300ms ease; }
  .tarama-3b { transform: none; }
  .tarama-isin { animation: none; opacity: .3; top: 40%; }
  .halka-dolgu { animation: none; stroke-dashoffset: 72; }
  .tarama-sonuc li { animation: none; opacity: 1; transform: none; }
  .akis-tel { transition: opacity 260ms ease; }
  .akis-tel.yan-sol { transform: translate(calc(-50% - 96%), -50%); }
  .akis-tel.yan-sag { transform: translate(calc(-50% + 96%), -50%); }
  .flip-ic { transition: none; }
  .ray-dolgu { transition: none; }
  .dugme:active, .secenek:active { transform: none; }
}