/* =========================================================
   JAPONYA TURU — Ana stil dosyası
   ---------------------------------------------------------
   İçindekiler
    1. Değişkenler (:root)
    2. Sıfırlama ve temel
    3. Yardımcı sınıflar
    4. Düğmeler ve hanko mührü
    5. Açılış animasyonu
    6. Üst menü
    7. Hero
    8. Bölüm başlıkları ve fırça çizgisi
    9. Hizmet kartları
   10. Ara görseller (parallax)
   11. Fuar tablosu
   12. Bilgi kutusu
   13. Zaman çizgisi ve sayaçlar
   14. Talep formu ve iletişim
   15. Sık sorulan sorular
   16. Footer ve sabit WhatsApp düğmesi
   17. Kaydırınca belirme
   18. Keyframes
   19. Duyarlı tasarım (responsive)
   20. Azaltılmış hareket
   ========================================================= */


/* =========================================================
   1. DEĞİŞKENLER
   ========================================================= */
:root {
  /* Renkler: kırmızı, siyah, beyaz ve tonları */
  --kirmizi: #C8102E;          /* Japon bayrağı / torii kırmızısı */
  --kirmizi-koyu: #9E0B23;
  --kirmizi-parlak: #F0435C;   /* koyu zeminde okunurluk için */
  --kirmizi-sakura: #F7CDD3;   /* sakura yaprağı: kırmızının açık tonu */
  --siyah: #0E0E0E;            /* sumi mürekkebi */
  --siyah-yumusak: #1A1A1A;
  --beyaz: #FAFAF7;            /* washi kâğıdı beyazı */
  --saf-beyaz: #FFFFFF;
  --gri: #6B6B6B;              /* ikincil metin */
  --gri-acik: #B9B6AF;         /* koyu zeminde ikincil metin */
  --cizgi: #E2E0DA;            /* ince ayırıcılar */

  /* Yazı tipleri — Türkçe karakter yoksa sıradaki yedek fonta geçilir */
  --font-baslik: "Gloock", "Didot", "Bodoni MT", Georgia, "Times New Roman", serif;   /* keskin, yüksek kontrastlı başlık */
  --font-govde: "Bricolage Grotesque", "Segoe UI", "Helvetica Neue", Arial, sans-serif;   /* karakterli grotesk gövde */
  --font-jp: "Yuji Syuku", "Hiragino Mincho ProN", "Yu Mincho", "MS Mincho", serif;   /* fırça (shodō) havası */

  /* Boşluklar (ma: bol nefes alanı) */
  --bosluk-xs: 0.5rem;
  --bosluk-s: 1rem;
  --bosluk-m: 1.5rem;
  --bosluk-l: 2.5rem;
  --bosluk-xl: 4rem;
  --bosluk-xxl: clamp(5rem, 11vw, 9.5rem);

  /* Yerleşim */
  --kap-genislik: 1200px;
  --kenar: clamp(16px, 4vw, 40px);
  --menu-yukseklik: 72px;
  --yaricap: 2px;

  /* Hareket */
  --yumusak: cubic-bezier(0.22, 0.61, 0.36, 1);
  --gecis: 0.45s var(--yumusak);
  --golge: 0 22px 44px -22px rgba(14, 14, 14, 0.35);
}


/* =========================================================
   2. SIFIRLAMA VE TEMEL
   ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--menu-yukseklik) + 8px);
  -webkit-text-size-adjust: 100%;
  /* Gloock ve Yuji Syuku tek kalınlıkta; tarayıcı sahte kalın üretmesin */
  font-synthesis-weight: none;
}

body {
  margin: 0;
  overflow-x: hidden;            /* mobilde yatay kaydırmayı engelle */
  background: var(--beyaz);
  color: var(--siyah);
  font-family: var(--font-govde);
  font-size: 1rem;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.kaydirma-kilit {
  overflow: hidden;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-baslik);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

p { margin: 0; }

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
  object-fit: cover;
}

a {
  color: inherit;
  text-decoration-color: var(--kirmizi);
  text-underline-offset: 3px;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* Görünür odak çerçevesi (klavye kullanıcıları) */
:focus-visible {
  outline: 3px solid var(--kirmizi);
  outline-offset: 3px;
}

.hero :focus-visible,
.ust-menu :focus-visible,
.bolum-koyu :focus-visible,
.alt-bilgi :focus-visible,
.iletisim-kutu :focus-visible {
  outline-color: var(--beyaz);
}

::selection {
  background: var(--kirmizi);
  color: var(--beyaz);
}


/* =========================================================
   3. YARDIMCI SINIFLAR
   ========================================================= */
.kap {
  width: 100%;
  max-width: calc(var(--kap-genislik) + var(--kenar) * 2);
  margin-inline: auto;
  padding-inline: var(--kenar);
}

/* Japonca süs yazıları */
.jp {
  font-family: var(--font-jp);
  font-weight: 500;
}

/* Ekranda gizli, ekran okuyucuda görünür */
.gorunmez {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* İçeriğe geç bağlantısı */
.atla {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 2000;
  padding: 0.75rem 1.25rem;
  background: var(--siyah);
  color: var(--beyaz);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.25s var(--yumusak);
}

.atla:focus {
  transform: none;
}

/* SVG ikon kümesi görünmez */
.ikon-kumesi {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Tüm çizgi ikonların ortak stili */
.kart-ikon svg,
.iletisim-liste svg,
.sosyal svg,
.wa-sabit svg,
.dugme-ikon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Yüklenemeyen görseller gizlenir, degrade zemin görünür */
img.yuklenemedi {
  visibility: hidden;
}


/* =========================================================
   4. DÜĞMELER VE HANKO MÜHRÜ
   ========================================================= */
.dugme {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.8rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--yaricap);
  font-family: var(--font-govde);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  background: none;
}

/* Üzerine gelince soldan sağa dolan katman (yalnızca transform) */
.dugme::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--yumusak);
}

.dugme:hover::before,
.dugme:focus-visible::before {
  transform: scaleX(1);
  transform-origin: left;
}

.dugme-kirmizi {
  background: var(--kirmizi);
  color: var(--beyaz);
}
.dugme-kirmizi::before { background: var(--siyah); }

.dugme-siyah {
  background: var(--siyah);
  color: var(--beyaz);
}
.dugme-siyah::before { background: var(--kirmizi); }

/* Koyu zeminde çerçeveli düğme */
.dugme-cizgi {
  border-color: rgba(250, 250, 247, 0.6);
  color: var(--beyaz);
}
.dugme-cizgi::before { background: var(--beyaz); }
.dugme-cizgi:hover,
.dugme-cizgi:focus-visible { color: var(--siyah); }

/* Açık zeminde çerçeveli düğme */
.dugme-cizgi-koyu {
  border-color: var(--siyah);
  color: var(--siyah);
}
.dugme-cizgi-koyu::before { background: var(--siyah); }
.dugme-cizgi-koyu:hover,
.dugme-cizgi-koyu:focus-visible { color: var(--beyaz); }

.dugme-ikon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* --- Hanko (kırmızı mühür) --- */
.hanko-kap {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
}

.hanko {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 6px;
  background: var(--kirmizi);
  color: var(--beyaz);
  font-family: var(--font-jp);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  writing-mode: vertical-rl;
  letter-spacing: 0.08em;
  /* Mühür kenarı: içte beyaz ince çerçeve */
  box-shadow: inset 0 0 0 3px var(--kirmizi), inset 0 0 0 4.5px rgba(250, 250, 247, 0.85);
  transform: rotate(-6deg);
  opacity: 0.95;
}

/* Damga basılınca oluşan halka */
.hanko::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 2px solid var(--kirmizi);
  border-radius: 10px;
  opacity: 0;
  transform: scale(0.8);
}

.hanko-kap:hover .hanko,
.hanko-kap:focus-within .hanko {
  animation: damga 0.6s cubic-bezier(0.3, 1.5, 0.5, 1);
}

.hanko-kap:hover .hanko::after,
.hanko-kap:focus-within .hanko::after {
  animation: damgaHalka 0.6s ease-out;
}

.hanko-buyuk {
  width: 72px;
  height: 72px;
  font-size: 1.35rem;
  border-radius: 8px;
}


/* =========================================================
   5. AÇILIŞ ANİMASYONU (doğan güneş + başlık)
   ========================================================= */
.acilis {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.2rem;
  background: var(--beyaz);
  pointer-events: none;
  animation: acilisKapan 0.8s var(--yumusak) 2.5s forwards;
}

.acilis-gunes {
  width: min(38vmin, 260px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--kirmizi);
  transform: scale(0);
  animation: gunesDog 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s forwards;
}

.acilis-baslik {
  display: flex;
  overflow: hidden;              /* maske: harfler alttan açılır */
  font-family: var(--font-baslik);
  font-size: clamp(1.6rem, 6vw, 3rem);
  font-weight: 800;
  letter-spacing: 0.3em;
  padding-left: 0.3em;           /* letter-spacing dengesi */
  line-height: 1.2;
}

.acilis-baslik span {
  display: inline-block;
  transform: translateY(110%);
  animation: harfAc 0.7s var(--yumusak) forwards;
  animation-delay: calc(0.9s + var(--i) * 0.06s);
}

.acilis-baslik .bosluk {
  width: 0.4em;
}


/* =========================================================
   6. ÜST MENÜ
   ========================================================= */
.ust-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  color: var(--beyaz);
}

/* Kaydırınca beliren siyah zemin (opacity ile) */
.ust-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(14, 14, 14, 0.95);
  opacity: 0;
  transition: opacity var(--gecis);
}

/* Alt kırmızı ince çizgi */
.ust-menu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--kirmizi);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s var(--yumusak);
}

.ust-menu.kucuk::before { opacity: 1; }
.ust-menu.kucuk::after { transform: scaleX(1); }

.menu-ic {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--menu-yukseklik);
  /* Üstteyken biraz aşağıda ve büyük; kaydırınca toplanır */
  transform: translateY(14px);
  transition: transform var(--gecis);
}

.ust-menu.kucuk .menu-ic {
  transform: none;
}

.logo {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  transform-origin: left center;
  transition: transform var(--gecis);
}

.ust-menu.kucuk .logo {
  transform: scale(0.9);
}

.logo-gunes {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--kirmizi);
  box-shadow: 0 0 0 4px rgba(250, 250, 247, 0.12);
}

.logo-yazi {
  font-family: var(--font-baslik);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.22em;
}

.ana-menu ul {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  list-style: none;
}

.ana-menu a:not(.dugme) {
  position: relative;
  display: inline-block;
  padding: 0.4rem 0;
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
}

/* Menü linki altında kırmızı çizgi */
.ana-menu a:not(.dugme)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--kirmizi);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--yumusak);
}

.ana-menu a:not(.dugme):hover::after,
.ana-menu a:not(.dugme):focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.ana-menu .dugme {
  min-height: 42px;
  padding: 0.55rem 1.2rem;
}

/* Hamburger düğmesi (masaüstünde gizli) */
.hamburger {
  position: relative;
  z-index: 2;
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 48px;
  height: 48px;
  padding: 12px;
  border: 0;
  background: none;
  cursor: pointer;
}

.hamburger span {
  display: block;
  height: 2px;
  background: currentColor;
  transition: transform 0.4s var(--yumusak), opacity 0.3s;
}

.menu-acik .hamburger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-acik .hamburger span:nth-child(2) { opacity: 0; }
.menu-acik .hamburger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }


/* =========================================================
   7. HERO
   ========================================================= */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--menu-yukseklik) + 5rem) 0 var(--bosluk-l);
  overflow: hidden;
  background: var(--siyah);
  color: var(--beyaz);
}

/* --- Slayt alanı (Ken Burns + crossfade) --- */
.hero-gorseller {
  position: absolute;
  inset: 0;
  z-index: -3;
}

.hero-slayt {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  animation: kenBurns 24s linear infinite both;
  animation-delay: calc(var(--s) * 6s);
  will-change: opacity, transform;
}

.hero-slayt picture,
.hero-slayt img {
  width: 100%;
  height: 100%;
}

/* Görsel yüklenmezse görünen degrade zeminler */
.slayt-1 { --s: 0; background: radial-gradient(circle at 72% 38%, #7A0C1E 0%, #2A0A10 38%, var(--siyah) 72%); }
.slayt-2 { --s: 1; background: radial-gradient(circle at 25% 70%, #3A3A3A 0%, #161616 45%, var(--siyah) 80%); }
.slayt-3 { --s: 2; background: linear-gradient(115deg, var(--siyah) 20%, #5C0A18 60%, var(--kirmizi-koyu) 100%); }
.slayt-4 { --s: 3; background: radial-gradient(circle at 60% 30%, #4A4744 0%, #1E1C1A 45%, var(--siyah) 85%); }

/* Okunurluk için koyu perde (asimetrik: soldan koyu) */
.hero-perde {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(14, 14, 14, 0.88) 0%, rgba(14, 14, 14, 0.55) 55%, rgba(14, 14, 14, 0.2) 100%),
    linear-gradient(0deg, rgba(14, 14, 14, 0.92) 0%, rgba(14, 14, 14, 0) 50%);
}

/* --- Sakura yaprakları --- */
.yapraklar {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.yaprak {
  position: absolute;
  top: -5%;
  left: var(--x);
  width: var(--boyut);
  height: calc(var(--boyut) * 0.75);
  /* Yaprak şekli: iki köşesi yuvarlak */
  border-radius: 150% 0 150% 0;
  background: linear-gradient(135deg, var(--saf-beyaz) 0%, var(--kirmizi-sakura) 55%, #E9A3AE 100%);
  opacity: 0.85;
  animation: yaprakDus var(--sure) linear var(--gecikme) infinite;
  will-change: transform;
}

/* --- Dikey Japonca yazı --- */
.hero-dikey {
  position: absolute;
  top: calc(var(--menu-yukseklik) + 3rem);
  right: var(--kenar);
  z-index: -1;
  writing-mode: vertical-rl;
  font-size: clamp(2.6rem, 7vw, 6rem);
  font-weight: 700;
  letter-spacing: 0.25em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(250, 250, 247, 0.55);
}

/* Dikey yazının yanındaki kırmızı ince çizgi */
.hero-dikey::after {
  content: "";
  position: absolute;
  top: 0;
  left: -18px;
  width: 1px;
  height: 100%;
  background: var(--kirmizi);
}

/* --- Hero içerik --- */
.hero-icerik {
  position: relative;
}

.hero-icerik > * {
  max-width: 760px;
}

.hero-ust {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: var(--bosluk-m);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gri-acik);
}

.hero-ust::before {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--kirmizi);
}

.hero h1 {
  font-size: clamp(2.3rem, 6.4vw, 5rem);
  font-weight: 800;
  line-height: 1.12;
}

.hero h1 em {
  display: block;
  font-style: normal;
  color: var(--kirmizi-parlak);
}

.hero-metin {
  margin-top: var(--bosluk-m);
  max-width: 600px !important;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: rgba(250, 250, 247, 0.86);
}

.hero-dugmeler {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bosluk-m);
  margin-top: var(--bosluk-l);
}

.hero-slogan {
  margin-top: var(--bosluk-l);
  padding-left: 1rem;
  border-left: 2px solid var(--kirmizi);
  font-family: var(--font-baslik);
  font-size: 1.05rem;
  color: rgba(250, 250, 247, 0.8);
}

/* Açılıştan sonra hero içeriği sırayla belirir */
.hero-icerik > * {
  animation: heroGir 0.9s var(--yumusak) both;
}
.hero-icerik > :nth-child(1) { animation-delay: 2.7s; }
.hero-icerik > :nth-child(2) { animation-delay: 2.85s; }
.hero-icerik > :nth-child(3) { animation-delay: 3s; }
.hero-icerik > :nth-child(4) { animation-delay: 3.15s; }
.hero-icerik > :nth-child(5) { animation-delay: 3.3s; }

/* --- Hero geçiş kartları --- */
.hero-kartlar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bosluk-s);
  margin-top: var(--bosluk-xl);
  list-style: none;
  animation: heroGir 0.9s var(--yumusak) 3.4s both;
}

.hero-kart {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  height: 100%;
  padding: 1.3rem 1.4rem;
  border: 1px solid rgba(250, 250, 247, 0.22);
  background: rgba(14, 14, 14, 0.45);
  text-decoration: none;
  transition: transform var(--gecis);
}

/* Alt kırmızı çizgi dolar */
.hero-kart::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -1px;
  height: 3px;
  background: var(--kirmizi);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--yumusak);
}

.hero-kart:hover,
.hero-kart:focus-visible,
.hero-kart.dokunuldu {
  transform: translateY(-6px);
}

.hero-kart:hover::after,
.hero-kart:focus-visible::after,
.hero-kart.dokunuldu::after {
  transform: scaleX(1);
}

.hero-kart-jp {
  writing-mode: vertical-rl;
  font-size: 1.05rem;
  line-height: 1.1;
  color: var(--kirmizi-parlak);
}

.hero-kart-baslik {
  font-family: var(--font-baslik);
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.35;
}

.hero-kart-ok {
  font-size: 1.3rem;
  transition: transform var(--gecis);
}

.hero-kart:hover .hero-kart-ok,
.hero-kart:focus-visible .hero-kart-ok {
  transform: translateX(6px);
}


/* =========================================================
   8. BÖLÜM BAŞLIKLARI VE FIRÇA ÇİZGİSİ
   ========================================================= */
.bolum {
  position: relative;
  padding-block: var(--bosluk-xxl);
  overflow: hidden;
}

.bolum > .kap {
  position: relative;
}

.bolum-acik {
  background: var(--saf-beyaz);
}

.bolum-koyu {
  background: var(--siyah);
  color: var(--beyaz);
}

/* Büyük dikey Japonca süs yazısı */
.bolum-jp {
  position: absolute;
  top: -1rem;
  right: var(--kenar);
  writing-mode: vertical-rl;
  font-size: clamp(3.5rem, 9vw, 8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--kirmizi);
  opacity: 0.08;
  pointer-events: none;
  user-select: none;
}

.bolum-koyu .bolum-jp {
  opacity: 0.18;
}

/* Asimetri: ters bölümlerde başlık sağa kayar, süs yazısı sola geçer */
.bolum-ters .bolum-bas {
  margin-left: auto;
}

.bolum-ters .bolum-jp {
  right: auto;
  left: var(--kenar);
}

.bolum-bas {
  position: relative;
  max-width: 720px;
  margin-bottom: var(--bosluk-xl);
}

.bolum-no {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: var(--bosluk-s);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kirmizi);
}

.bolum-koyu .bolum-no {
  color: var(--kirmizi-parlak);
}

.bolum-no::before {
  content: "";
  width: 32px;
  height: 1px;
  background: currentColor;
}

.bolum h2 {
  font-size: clamp(2rem, 4.6vw, 3.3rem);
  font-weight: 800;
}

.bolum-giris {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  color: var(--gri);
  max-width: 640px;
}

.bolum-koyu .bolum-giris {
  color: var(--gri-acik);
}

/* --- Fırça darbesi (SVG stroke-dasharray) --- */
.firca {
  width: min(300px, 75%);
  height: 22px;
  margin: 0.7rem 0 var(--bosluk-m);
  overflow: visible;
}

.firca path {
  fill: none;
  stroke: var(--kirmizi);
  stroke-width: 7;
  stroke-linecap: round;
}

.firca .firca-ince {
  stroke-width: 2.5;
  opacity: 0.55;
}

/* JS varsa çizgi gizli başlar, ekrana girince çizilir */
.js .firca path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.js .firca.gorunur path {
  animation: fircaCiz 1.1s cubic-bezier(0.6, 0, 0.2, 1) 0.2s forwards;
}

.js .firca.gorunur .firca-ince {
  animation-delay: 0.5s;
}


/* =========================================================
   9. HİZMET KARTLARI
   ========================================================= */
.kartlar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: var(--bosluk-m);
  list-style: none;
}

/* Asimetri: geniş ekranda ilk kart iki sütun kaplar */
@media (min-width: 1100px) {
  .kartlar > li:first-child {
    grid-column: span 2;
  }
}

.kartlar > li {
  display: flex;
}

.kart {
  position: relative;
  isolation: isolate;            /* gölge katmanı kartın arkasında kalsın */
  flex: 1;
  padding: 1.8rem 1.6rem 2rem;
  background: var(--saf-beyaz);
  border: 1px solid var(--cizgi);
  transition: transform var(--gecis);
  -webkit-tap-highlight-color: transparent;
}

.bolum-acik .kart {
  background: var(--beyaz);
}

/* Gölge katmanı: opacity ile belirir */
.kart::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  box-shadow: var(--golge);
  opacity: 0;
  transition: opacity var(--gecis);
}

/* Alt kırmızı çizgi soldan sağa dolar */
.kart::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -1px;
  height: 3px;
  background: var(--kirmizi);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--yumusak);
}

.kart:hover,
.kart.dokunuldu {
  transform: translateY(-8px);
}

.kart:hover::before,
.kart.dokunuldu::before { opacity: 1; }

.kart:hover::after,
.kart.dokunuldu::after { transform: scaleX(1); }

.kart-ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.4rem;
}

.kart-kod {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--kirmizi);
}

.kart-ikon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--cizgi);
  border-radius: 50%;
}

.kart-ikon svg {
  width: 22px;
  height: 22px;
  transition: transform 0.8s var(--yumusak);
}

/* İkon döner */
.kart:hover .kart-ikon svg,
.kart.dokunuldu .kart-ikon svg {
  transform: rotate(360deg);
}

.kart h3 {
  margin-bottom: 0.6rem;
  font-size: 1.2rem;
}

.kart p {
  font-size: 0.95rem;
  color: var(--gri);
}


/* =========================================================
   9b. GEZİLECEK YERLER
   ========================================================= */

/* --- Mevsim şeridi --- */
.mevsimler {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: var(--bosluk-xl);
  border-top: 1px solid var(--siyah);
  border-bottom: 1px solid var(--cizgi);
  list-style: none;
}

.mevsimler li {
  padding: 1.2rem 1.2rem 1.3rem 0;
}

.mevsimler li + li {
  padding-left: 1.2rem;
  border-left: 1px solid var(--cizgi);
}

.mevsimler strong {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--font-baslik);
  font-size: 1.1rem;
  color: var(--kirmizi);
}

.mevsimler span {
  font-size: 0.9rem;
  color: var(--gri);
}

/* --- Yer kartları --- */
.yerler {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: var(--bosluk-l) var(--bosluk-m);
  list-style: none;
}

/* Asimetri: geniş ekranda ilk iki yer (Tokyo, Fuji) daha büyük */
@media (min-width: 1100px) {
  .yerler {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .yerler > li {
    grid-column: span 2;
  }
  .yerler > li:nth-child(-n + 2) {
    grid-column: span 3;
  }
  .yerler > li:nth-child(-n + 2) .yer-gorsel {
    aspect-ratio: 16 / 9;
  }
}

.yerler > li {
  display: flex;
}

.yer {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  -webkit-tap-highlight-color: transparent;
}

.yer-gorsel {
  position: relative;
  margin: 0;
  aspect-ratio: 10 / 7;
  overflow: hidden;
  /* Görsel yoksa görünen zemin */
  background:
    radial-gradient(circle at 75% 30%, var(--kirmizi) 0 14%, transparent 14.5%),
    linear-gradient(160deg, #2A2A2A 0%, var(--siyah) 100%);
}

.yer-gorsel picture,
.yer-gorsel img {
  width: 100%;
  height: 100%;
}

/* Üzerine gelince görsel yavaşça yakınlaşır */
.yer-gorsel img {
  transition: transform 1.2s var(--yumusak);
}

.yer:hover .yer-gorsel img,
.yer.dokunuldu .yer-gorsel img {
  transform: scale(1.06);
}

.yer-bolge {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.35rem 0.8rem;
  background: var(--kirmizi);
  color: var(--beyaz);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.yer-govde {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem 1.5rem 1.6rem;
}

.yer h3 {
  margin-bottom: 0.5rem;
  font-size: 1.45rem;
}

.yer-govde > p:first-of-type {
  font-size: 0.95rem;
  color: var(--gri);
}

.yer-etiketler {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1rem 0 1.2rem;
  list-style: none;
}

.yer-etiketler li {
  padding: 0.2rem 0.65rem;
  border: 1px solid var(--cizgi);
  border-radius: 999px;
  font-size: 0.8rem;
  background: var(--saf-beyaz);
}

/* "Bizden" ipucu kartın altına yaslanır */
.yer-ipucu {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px dashed var(--cizgi);
  font-size: 0.88rem;
}

.yer-ipucu strong {
  color: var(--kirmizi);
}

.yerler-alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bosluk-m);
  margin-top: var(--bosluk-xl);
  padding: 1.8rem 2rem;
  background: var(--siyah);
  color: var(--beyaz);
}

.yerler-alt p {
  max-width: 620px;
  font-family: var(--font-baslik);
  font-size: 1.15rem;
}

.yerler-alt :focus-visible {
  outline-color: var(--beyaz);
}

@media (max-width: 767px) {
  .mevsimler {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mevsimler li,
  .mevsimler li + li {
    padding: 1rem 0.8rem 1rem 0;
    border-left: 0;
  }
  .mevsimler li:nth-child(even) {
    padding-left: 0.8rem;
    border-left: 1px solid var(--cizgi);
  }
  .mevsimler li:nth-child(n + 3) {
    border-top: 1px solid var(--cizgi);
  }
  .yerler-alt {
    padding: 1.5rem 1.3rem;
  }
}


/* =========================================================
   10. ARA GÖRSELLER (PARALLAX)
   ========================================================= */
.ara-gorsel {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  height: clamp(320px, 62vh, 560px);
  overflow: hidden;
  background: radial-gradient(circle at 70% 40%, #4A0915 0%, var(--siyah) 70%);
  color: var(--beyaz);
  text-align: center;
}

.paralaks {
  position: absolute;
  inset: -15% 0;                 /* parallax payı */
  z-index: -2;
  will-change: transform;
}

.paralaks picture,
.paralaks img {
  width: 100%;
  height: 100%;
}

.ara-perde {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(14, 14, 14, 0.58);
}

.ara-soz {
  margin: 0;
}

.ara-soz p:not(.ara-soz-jp) {
  max-width: 560px;
  margin-inline: auto;
  font-family: var(--font-baslik);
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
}

.ara-soz-jp {
  margin-bottom: var(--bosluk-s);
  font-size: clamp(2.4rem, 7vw, 4.5rem);
  letter-spacing: 0.15em;
  color: var(--beyaz);
}


/* =========================================================
   11. FUAR TABLOSU
   ========================================================= */
.fuar-tablosu {
  margin-top: var(--bosluk-xxl);
}

.tablo-baslik {
  margin-bottom: var(--bosluk-m);
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.kaydir-ipucu {
  display: none;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  color: var(--gri);
}

.tablo-kap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 2px solid var(--siyah);
}

.tablo-kap table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

.tablo-kap th {
  padding: 1rem;
  border-bottom: 1px solid var(--cizgi);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-align: left;
  text-transform: uppercase;
  color: var(--gri);
}

.tablo-kap td {
  padding: 1.15rem 1rem;
  border-bottom: 1px solid var(--cizgi);
  vertical-align: top;
}

.tablo-kap td:first-child {
  font-family: var(--font-baslik);
  font-weight: 700;
  white-space: nowrap;
  color: var(--kirmizi);
}

.tablo-kap td:nth-child(2) {
  font-weight: 600;
}

.tablo-not {
  margin-top: var(--bosluk-s);
  font-size: 0.88rem;
  color: var(--gri);
}


/* =========================================================
   12. BİLGİ KUTUSU
   ========================================================= */
.bilgi-kutusu {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  max-width: 900px;
  margin-top: var(--bosluk-xl);
  padding: 1.6rem 1.8rem;
  border: 1px solid var(--kirmizi);
  border-left-width: 6px;
  background: var(--saf-beyaz);
}

.bilgi-isaret {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--kirmizi);
  color: var(--beyaz);
  font-family: var(--font-baslik);
  font-weight: 800;
}


/* =========================================================
   13. ZAMAN ÇİZGİSİ VE SAYAÇLAR
   ========================================================= */
.zaman-cizgi {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--bosluk-l);
  list-style: none;
}

/* Gri temel çizgi */
.zaman-cizgi::before,
.zaman-cizgi::after {
  content: "";
  position: absolute;
  top: 23px;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(250, 250, 247, 0.2);
}

/* Kırmızı çizgi soldan sağa uzar */
.zaman-cizgi::after {
  background: var(--kirmizi);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.8s var(--yumusak);
}

.zaman-cizgi.gorunur::after {
  transform: scaleX(1);
}

.zaman-adim {
  position: relative;
}

.zaman-no {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: var(--bosluk-m);
  border: 1px solid var(--kirmizi);
  border-radius: 50%;
  background: var(--siyah);
  color: var(--kirmizi-parlak);
  font-family: var(--font-baslik);
  font-weight: 800;
  font-size: 1.1rem;
}

.zaman-adim h3 {
  margin-bottom: 0.4rem;
  font-size: 1.3rem;
}

.zaman-adim p {
  color: var(--gri-acik);
}

/* Adımlar sırayla belirir (JS ekrana girince .gorunur ekler) */
.js .zaman-adim {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s var(--yumusak), transform 0.7s var(--yumusak);
  transition-delay: calc(var(--i) * 0.3s + 0.2s);
}

.js .zaman-cizgi.gorunur .zaman-adim {
  opacity: 1;
  transform: none;
}

/* --- Sayaçlar --- */
.sayaclar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bosluk-l);
  margin-top: var(--bosluk-xxl);
}

.sayac-kutu {
  padding-top: var(--bosluk-m);
  border-top: 1px solid rgba(250, 250, 247, 0.25);
}

.sayac {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-bottom: 0.6rem;
  font-family: var(--font-baslik);
  font-weight: 800;
  line-height: 1;
}

.sayi {
  font-size: clamp(3rem, 7vw, 4.8rem);
  color: var(--kirmizi-parlak);
  font-variant-numeric: tabular-nums;
}

.birim {
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
}

.sayac-kutu > p:last-child {
  font-size: 0.95rem;
  color: var(--gri-acik);
}


/* =========================================================
   14. TALEP FORMU VE İLETİŞİM
   ========================================================= */
.talep-izgara {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--bosluk-xl);
  align-items: start;
}

.talep-formu {
  display: grid;
  gap: var(--bosluk-m);
}

.alan-grup {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bosluk-m);
}

.alan-grup-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.alan label,
.secenekler legend {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.secenekler legend small {
  font-weight: 400;
  color: var(--gri);
}

.zorunlu {
  color: var(--kirmizi);
}

.alan input,
.alan textarea {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 0.8rem 1rem;
  border: 1px solid #CFCCC4;
  border-radius: var(--yaricap);
  background: var(--saf-beyaz);
  transition: border-color 0.2s;
}

.alan textarea {
  resize: vertical;
  min-height: 120px;
}

.alan input:focus,
.alan textarea:focus {
  outline: 2px solid var(--kirmizi);
  outline-offset: 0;
  border-color: var(--kirmizi);
}

.alan input[aria-invalid="true"] {
  border-color: var(--kirmizi);
  border-width: 2px;
  background: #FFF6F7;
}

/* Kırmızı Türkçe hata mesajı */
.alan-hata {
  min-height: 1.3em;
  margin-top: 0.35rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--kirmizi);
}

.alan-hata:empty {
  min-height: 0;
  margin-top: 0;
}

/* --- Seçim çipleri (radio / checkbox) --- */
.secenekler {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.secenekler legend {
  width: 100%;
  float: left;                   /* legend'ı flex akışına sok */
}

.cip {
  position: relative;
  cursor: pointer;
}

.cip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.cip span {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0.5rem 1rem;
  border: 1px solid #CFCCC4;
  border-radius: 999px;
  background: var(--saf-beyaz);
  font-size: 0.9rem;
  user-select: none;
}

.cip input:checked + span {
  border-color: var(--siyah);
  background: var(--siyah);
  color: var(--beyaz);
}

.cip input[type="checkbox"]:checked + span::before {
  content: "✓";
  margin-right: 0.4rem;
  color: var(--kirmizi-parlak);
}

.cip input:focus-visible + span {
  outline: 3px solid var(--kirmizi);
  outline-offset: 2px;
}

.form-alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bosluk-s);
}

.form-bilgi {
  font-size: 0.85rem;
  color: var(--gri);
}

/* --- Oluşturulan mesaj --- */
.sonuc {
  padding: 1.6rem;
  border: 1px solid var(--siyah);
  border-top: 4px solid var(--kirmizi);
  background: var(--saf-beyaz);
  animation: heroGir 0.6s var(--yumusak) both;
}

.sonuc h3 {
  margin-bottom: 0.3rem;
  font-size: 1.35rem;
}

.sonuc h3:focus {
  outline: none;
}

.sonuc > p {
  color: var(--gri);
  font-size: 0.92rem;
}

.sonuc-mesaj {
  max-height: 280px;
  overflow: auto;
  margin: 1rem 0;
  padding: 1rem;
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  font-family: var(--font-govde);
  font-size: 0.9rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.sonuc-dugmeler {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.kopya-durum {
  margin-top: 0.75rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--kirmizi);
}

/* --- İletişim kutusu --- */
.iletisim-kutu {
  position: relative;
  overflow: hidden;
  padding: 2.2rem 2rem;
  background: var(--siyah);
  color: var(--beyaz);
}

.iletisim-jp {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  writing-mode: vertical-rl;
  font-size: 3rem;
  line-height: 1;
  color: var(--kirmizi);
  opacity: 0.35;
  pointer-events: none;
}

.iletisim-kutu h3 {
  margin-bottom: var(--bosluk-m);
  font-size: 1.5rem;
}

.iletisim-liste {
  position: relative;
  display: grid;
  gap: 1.3rem;
  list-style: none;
}

.iletisim-liste li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 0.9rem;
  align-items: start;
}

.iletisim-liste svg {
  width: 22px;
  height: 22px;
  margin-top: 0.2rem;
  color: var(--kirmizi-parlak);
}

.iletisim-liste .etiket {
  display: block;
  font-size: 0.76rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gri-acik);
}

.iletisim-liste a {
  font-weight: 600;
  text-decoration: none;
  word-break: break-word;
}

.iletisim-liste a:hover {
  text-decoration: underline;
}

.iletisim-not {
  position: relative;
  margin-top: var(--bosluk-l);
  padding-top: var(--bosluk-s);
  border-top: 1px solid rgba(250, 250, 247, 0.2);
  font-size: 0.88rem;
  color: var(--gri-acik);
  max-width: 80%;
}


/* =========================================================
   15. SIK SORULAN SORULAR
   ========================================================= */
.sss-liste {
  max-width: 860px;
  border-top: 1px solid var(--siyah);
}

.bolum-ters .sss-liste {
  margin-left: auto;
}

.sss-oge {
  border-bottom: 1px solid var(--cizgi);
}

.sss-oge summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 0;
  font-family: var(--font-baslik);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.sss-oge summary::-webkit-details-marker {
  display: none;
}

/* Artı / eksi işareti */
.sss-isaret {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1px solid var(--cizgi);
  border-radius: 50%;
  transition: transform var(--gecis);
}

.sss-isaret::before,
.sss-isaret::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  background: var(--kirmizi);
  transition: transform var(--gecis);
}

.sss-isaret::after {
  transform: rotate(90deg);
}

.sss-oge[open] .sss-isaret {
  transform: rotate(180deg);
}

.sss-oge[open] .sss-isaret::after {
  transform: rotate(0deg);
}

.sss-cevap {
  padding: 0 3rem 1.5rem 0;
  max-width: 70ch;
  color: var(--gri);
}

/* Açılırken içerik yumuşakça belirir */
.sss-oge[open] .sss-cevap {
  animation: sssAc 0.45s var(--yumusak) both;
}


/* =========================================================
   16. FOOTER VE SABİT WHATSAPP DÜĞMESİ
   ========================================================= */
.alt-bilgi {
  padding-top: var(--bosluk-xl);
  background: var(--siyah);
  color: var(--beyaz);
}

.alt-izgara {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--bosluk-l);
  padding-bottom: var(--bosluk-xl);
}

.alt-marka p:last-child {
  max-width: 300px;
  color: var(--gri-acik);
  font-size: 0.92rem;
}

.alt-logo {
  margin: 1.2rem 0 0.4rem;
  font-family: var(--font-baslik);
  font-weight: 800;
  letter-spacing: 0.22em;
}

.alt-baslik {
  margin-bottom: 1rem;
  font-family: var(--font-govde);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gri-acik);
}

.alt-menu ul,
.alt-iletisim ul {
  display: grid;
  gap: 0.55rem;
  list-style: none;
  font-size: 0.95rem;
}

.alt-menu a,
.alt-iletisim a {
  text-decoration: none;
  word-break: break-word;
}

.alt-menu a:hover,
.alt-iletisim a:hover {
  text-decoration: underline;
}

.sosyal {
  display: flex;
  gap: 0.75rem;
  list-style: none;
}

.sosyal a {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(250, 250, 247, 0.35);
  border-radius: 50%;
  transition: transform var(--gecis);
}

/* Kırmızı dolgu ortadan büyür */
.sosyal a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: var(--kirmizi);
  transform: scale(0);
  transition: transform 0.4s var(--yumusak);
}

.sosyal a:hover,
.sosyal a:focus-visible {
  transform: translateY(-3px);
}

.sosyal a:hover::before,
.sosyal a:focus-visible::before {
  transform: scale(1);
}

.sosyal svg {
  width: 20px;
  height: 20px;
}

.alt-son {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-block: 1.4rem;
  border-top: 1px solid rgba(250, 250, 247, 0.15);
  font-size: 0.85rem;
  color: var(--gri-acik);
}

.alt-son .jp {
  color: var(--kirmizi-parlak);
  letter-spacing: 0.2em;
}

/* --- Sabit WhatsApp düğmesi --- */
.wa-sabit {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--kirmizi);
  color: var(--beyaz);
  box-shadow: 0 10px 24px -8px rgba(200, 16, 46, 0.6);
  transition: transform var(--gecis);
}

.wa-sabit:hover,
.wa-sabit:focus-visible {
  transform: scale(1.08);
}

.wa-sabit svg {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
}

/* Nabız halkaları */
.wa-sabit::before,
.wa-sabit::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--kirmizi);
  animation: nabiz 2.4s ease-out infinite;
}

.wa-sabit::after {
  animation-delay: 1.2s;
}


/* =========================================================
   17. KAYDIRINCA BELİRME
   ---------------------------------------------------------
   Öncelik: CSS "animation-timeline: view()".
   Desteklenmiyorsa <html class="belir-yedek"> eklenir ve
   main.js IntersectionObserver ile .gorunur sınıfı verir.
   ========================================================= */
@supports (animation-timeline: view()) {
  .belir {
    animation: belirYukari linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 70%;
  }

  /* Parallax: ara görseller ve hero */
  .paralaks {
    animation: paralaksKay linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }

  .hero-gorseller {
    animation: heroParalaks linear both;
    animation-timeline: scroll(root);
    animation-range: 0 100vh;
  }
}

.belir-yedek .belir {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--yumusak), transform 0.8s var(--yumusak);
}

.belir-yedek .belir.gorunur {
  opacity: 1;
  transform: none;
}

/* Kartlar yedek modda hafif kademeli gelsin */
.belir-yedek .kartlar > li:nth-child(3n + 2) { transition-delay: 0.08s; }
.belir-yedek .kartlar > li:nth-child(3n + 3) { transition-delay: 0.16s; }


/* =========================================================
   18. KEYFRAMES
   ========================================================= */
@keyframes gunesDog {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes harfAc {
  to { transform: translateY(0); }
}

@keyframes acilisKapan {
  to { opacity: 0; visibility: hidden; }
}

@keyframes heroGir {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

/* Crossfade + yavaş yakınlaşma (Ken Burns) — 4 slayt × 6 sn */
@keyframes kenBurns {
  0%   { opacity: 0; transform: scale(1); }
  5%   { opacity: 1; }
  25%  { opacity: 1; }
  30%  { opacity: 0; transform: scale(1.12); }
  100% { opacity: 0; transform: scale(1.12); }
}

/* Sakura: düşer, salınır ve döner */
@keyframes yaprakDus {
  0%   { transform: translate3d(0, -10vh, 0) rotate(0deg) rotateX(0deg); opacity: 0; }
  8%   { opacity: 0.9; }
  25%  { transform: translate3d(var(--salinim), 25vh, 0) rotate(90deg) rotateX(60deg); }
  50%  { transform: translate3d(calc(var(--salinim) * -0.6), 55vh, 0) rotate(180deg) rotateX(0deg); }
  75%  { transform: translate3d(var(--salinim), 85vh, 0) rotate(270deg) rotateX(60deg); }
  92%  { opacity: 0.8; }
  100% { transform: translate3d(0, 115vh, 0) rotate(360deg) rotateX(0deg); opacity: 0; }
}

@keyframes fircaCiz {
  to { stroke-dashoffset: 0; }
}

@keyframes damga {
  0%   { transform: rotate(-6deg) scale(1); }
  35%  { transform: rotate(-12deg) scale(1.35); }
  60%  { transform: rotate(-4deg) scale(0.86); }
  100% { transform: rotate(-6deg) scale(1); }
}

@keyframes damgaHalka {
  0%   { opacity: 0; transform: scale(0.8); }
  55%  { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.35); }
}

@keyframes belirYukari {
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: none; }
}

@keyframes paralaksKay {
  from { transform: translateY(-10%); }
  to   { transform: translateY(10%); }
}

@keyframes heroParalaks {
  from { transform: translateY(0); }
  to   { transform: translateY(25%); }
}

@keyframes sssAc {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes nabiz {
  0%   { opacity: 0.6; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.7); }
}


/* =========================================================
   19. DUYARLI TASARIM
   ========================================================= */

/* --- Tablet ve küçük masaüstü --- */
@media (max-width: 1023px) {
  .alt-izgara {
    grid-template-columns: 1fr 1fr;
  }

  .talep-izgara {
    grid-template-columns: 1fr;
  }

  .sayaclar {
    gap: var(--bosluk-m);
  }
}

/* --- Mobil menü (hamburger) --- */
@media (max-width: 1099px) {
  /* Sabit konumlu panel bozulmasın diye kapsayıcıda transform yok */
  .menu-ic,
  .ust-menu.kucuk .menu-ic {
    transform: none;
  }

  .hamburger {
    display: flex;
  }

  .ana-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: min(86vw, 380px);
    padding: calc(var(--menu-yukseklik) + 2rem) 2rem 2rem;
    background: var(--siyah);
    border-left: 1px solid var(--kirmizi);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1), visibility 0s linear 0.5s;
  }

  .menu-acik .ana-menu {
    transform: none;
    visibility: visible;
    transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1), visibility 0s;
  }

  .ana-menu ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }

  .ana-menu a:not(.dugme) {
    padding: 0.6rem 0;
    font-family: var(--font-baslik);
    font-size: 1.4rem;
    font-weight: 700;
  }

  .ana-menu li:last-child {
    margin-top: 1.2rem;
  }

  /* Menü linkleri sırayla kayarak gelir */
  .ana-menu li {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.4s, transform 0.4s var(--yumusak);
  }

  .menu-acik .ana-menu li {
    opacity: 1;
    transform: none;
  }

  .menu-acik .ana-menu li:nth-child(1) { transition-delay: 0.15s; }
  .menu-acik .ana-menu li:nth-child(2) { transition-delay: 0.2s; }
  .menu-acik .ana-menu li:nth-child(3) { transition-delay: 0.25s; }
  .menu-acik .ana-menu li:nth-child(4) { transition-delay: 0.3s; }
  .menu-acik .ana-menu li:nth-child(5) { transition-delay: 0.35s; }
  .menu-acik .ana-menu li:nth-child(6) { transition-delay: 0.4s; }

  /* Menü açıkken üst şerit siyah olsun */
  .ust-menu.menu-acik::before {
    opacity: 1;
  }
}

/* --- Tablet dikey --- */
@media (max-width: 767px) {
  :root {
    --menu-yukseklik: 64px;
  }

  .hero {
    padding-top: calc(var(--menu-yukseklik) + 3.5rem);
  }

  .hero-kartlar {
    grid-template-columns: 1fr;
    gap: 0.6rem;
    margin-top: var(--bosluk-l);
  }

  .hero-kart {
    padding: 1rem 1.2rem;
  }

  .hero-dikey {
    font-size: 2.4rem;
    opacity: 0.6;
  }

  .bolum-jp {
    font-size: 3.2rem;
  }

  /* Zaman çizgisi dikey */
  .zaman-cizgi {
    grid-template-columns: 1fr;
    gap: var(--bosluk-l);
  }

  .zaman-cizgi::before,
  .zaman-cizgi::after {
    top: 0;
    bottom: 0;
    left: 23px;
    right: auto;
    width: 1px;
    height: auto;
  }

  .zaman-cizgi::after {
    transform: scaleY(0);
    transform-origin: top;
  }

  .zaman-cizgi.gorunur::after {
    transform: scaleY(1);
  }

  .zaman-adim {
    padding-left: 70px;
  }

  .zaman-no {
    position: absolute;
    top: 0;
    left: 0;
  }

  .sayaclar {
    grid-template-columns: 1fr;
  }

  .alan-grup,
  .alan-grup-3 {
    grid-template-columns: 1fr;
  }

  .kaydir-ipucu {
    display: block;
  }

  .bilgi-kutusu {
    grid-template-columns: 1fr;
    padding: 1.4rem;
  }

  .alt-izgara {
    grid-template-columns: 1fr;
  }

  .alt-son {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --- Küçük telefon (360px) --- */
@media (max-width: 420px) {
  .logo-yazi {
    font-size: 0.92rem;
    letter-spacing: 0.16em;
  }

  .hero-dugmeler {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-dugmeler .hanko-kap .dugme {
    flex: 1;
  }

  .sonuc-dugmeler .dugme {
    width: 100%;
  }

  .iletisim-kutu {
    padding: 1.8rem 1.4rem;
  }

  .sss-cevap {
    padding-right: 0;
  }

  .wa-sabit {
    right: 14px;
    bottom: 14px;
    width: 54px;
    height: 54px;
  }
}


/* =========================================================
   20. AZALTILMIŞ HAREKET
   ---------------------------------------------------------
   "Hareketi azalt" açık kullanıcılar için animasyonlar kapanır.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  .acilis,
  .yapraklar {
    display: none;
  }

  /* Slayt yerine yalnızca ilk görsel sabit görünür */
  .hero-slayt {
    animation: none !important;
    opacity: 0;
  }
  .hero-slayt.slayt-1 {
    opacity: 1;
  }

  .belir,
  .paralaks,
  .hero-gorseller,
  .hero-icerik > *,
  .hero-kartlar {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .js .firca path {
    stroke-dashoffset: 0;
    animation: none !important;
  }

  .js .zaman-adim {
    opacity: 1;
    transform: none;
  }

  .wa-sabit::before,
  .wa-sabit::after {
    display: none;
  }
}