/*
  BetterLoop tanıtım sayfası.

  Tasarım dili videodan ve üründen geliyor: beyaz zemin, pastel vurgular,
  yumuşak gölge. Neon, parlama, cam efekti ve renk geçişli zemin YOK —
  ürünün arayüzü de öyle değil, sayfa onunla yan yana durabilmeli.

  Hareketler videodakiyle aynı eğriyi kullanıyor (ease-out-quint): her şey
  hızlı başlar, yavaşça yerine oturur. Lineer hareket mekanik, ease-in-out
  sunum şablonu gibi durur.
*/

:root {
  --zemin: #fafafc;
  --beyaz: #ffffff;
  --koyu: #0f0e14;
  --metin: #1c1b22;
  --soluk: #5c5a68;
  --cizgi: #e6e5ec;

  --mor: #6b54d3;
  --mor-koyu: #4b399b;
  --mor-soft: #f1edfc;
  --turkuaz: #1f8c8c;
  --turkuaz-soft: #e3f3f3;
  --kehribar: #c4870f;
  --kehribar-soft: #fdf4e4;
  --kirmizi: #d94f3d;

  --egri: cubic-bezier(0.22, 1, 0.36, 1);
  --golge: 0 18px 48px rgba(28, 27, 34, 0.09), 0 2px 8px rgba(28, 27, 34, 0.05);
  --golge-bel: 0 26px 60px rgba(28, 27, 34, 0.13), 0 3px 10px rgba(28, 27, 34, 0.07);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--zemin);
  color: var(--metin);
  font: 400 17px/1.6 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.kap { width: min(1120px, 100% - 40px); margin: 0 auto; }
.kap.dar { max-width: 760px; }

/* ── Üst şerit ───────────────────────────────────────────────────────── */
.ust {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 250, 252, 0.92);
  border-bottom: 1px solid var(--cizgi);
  backdrop-filter: saturate(140%) blur(6px);
}
.ust-ic { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.marka { font-weight: 700; font-size: 21px; letter-spacing: -0.03em; color: var(--mor-koyu); }

/* ── Bölümler ────────────────────────────────────────────────────────── */
.bolum { padding: 96px 0; }
.bolum.hero { padding: 84px 0 76px; overflow: hidden; }

/* Hero: solda söz, sağda ürünün kendisi. Sağ sütun 520 px'den dar
   olduğunda kartlar okunmaz hâle geliyor; o eşiğin altında tamamen
   kaldırılıyor (bkz. mobil bloğu). */
/*
  Sağ sütun kap sınırını AŞIYOR: `margin-right` ile ekranın sağ kenarına
  kadar uzanıyor. Kapalı bir kutu içinde kalsaydı akış "bir kutuda oynayan
  video" gibi durur; kenara taştığında sayfa ürünün içinden bakılıyormuş
  hissi veriyor.
*/
/*
  Grid yerine flex: `1fr` sol sütunu büyütüp akışa yalnızca iki sütunluk yer
  bırakıyordu. Metin SABİT genişlikte, akış kalan her yeri alıyor.
  Sol boşluk sayfanın geri kalanıyla aynı hizada — başlık kaymamalı.
*/
.hero-ic {
  display: flex; align-items: center; gap: 40px; width: 100%; max-width: none; margin: 0;
  padding-left: max(20px, calc((100vw - 1220px) / 2));
}
.hero-metin { flex: 0 0 auto; width: min(520px, 46vw); }
.hero-metin { min-width: 0; }

.hero-akis {
  position: relative;
  flex: 1 1 auto; min-width: 0;
  /* Kadrajı doldurur ama üst şeridi hesaba katar: 100vh olsaydı sayfa
     açılışında form ekranın altında kalırdı. */
  height: min(88vh, 900px);
  display: flex; gap: 24px; justify-content: flex-start;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
/*
  Genişlik alt kolajdaki karttan (300 px) %30 büyük. Kadraja sığmayan sütun
  kenardan kesiliyor ve bu KUSUR DEĞİL: akışın kadraj dışında devam ettiğini
  gösteriyor, küçültüp hepsini sığdırmak kartları okunmaz yapıyordu.
*/
.hero-akis .sutun { width: 439px; flex: 0 0 auto; }

/*
  Üçüncü ve dördüncü sütun dar ekranda hiç çizilmiyor; geniş ekranda
  çiziliyor ve alana sığmayan kısmı kenardan kesiliyor. Kesilme kusur değil:
  akışın kadraj dışında devam ettiğini gösteriyor.
*/
.hero-akis .s3, .hero-akis .s4 { display: none; }
@media (min-width: 1360px) { .hero-akis .s3 { display: flex; } }
@media (min-width: 1620px) { .hero-akis .s4 { display: flex; } }
.bolum.soz { padding: 72px 0; background: var(--beyaz); border-block: 1px solid var(--cizgi); }
.bolum.vurgu { background: var(--beyaz); border-block: 1px solid var(--cizgi); }
.bolum.akis-bolum { padding-bottom: 0; overflow: hidden; }
.bolum.cagri { background: var(--koyu); padding: 104px 0; text-align: center; }

h1, h2, h3 { letter-spacing: -0.03em; line-height: 1.15; }
.dev { font-size: clamp(38px, 7vw, 62px); font-weight: 700; }
.buyuk { font-size: clamp(30px, 5vw, 46px); font-weight: 700; text-align: center; }
.baslik { font-size: clamp(28px, 4.4vw, 42px); font-weight: 600; text-align: center; }

.alt { margin-top: 18px; font-size: clamp(17px, 2.1vw, 20px); color: var(--soluk); max-width: 620px; }
.alt.orta { margin-inline: auto; text-align: center; }
.beyaz { color: #fff; }
.beyaz-soluk { color: rgba(255, 255, 255, 0.72); margin-inline: auto; }

.rozet {
  display: inline-block; margin-bottom: 20px;
  padding: 7px 18px; border-radius: 999px;
  border: 1px solid var(--cizgi); background: var(--beyaz);
  font-size: 13px; font-weight: 600; letter-spacing: 0.1em; color: var(--soluk);
}
.rozet-koyu { background: transparent; border-color: rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.82); }

/* ── Beliren öğeler (scroll reveal) ──────────────────────────────────── */
[data-belir] {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.7s var(--egri), transform 0.7s var(--egri);
}
[data-belir].gorunur { opacity: 1; transform: none; }

/* Harf harf yazı — videodaki `Yazi` bileşeninin karşılığı. */
[data-harf] .harf {
  display: inline-block; opacity: 0; transform: translateY(0.32em);
  transition: opacity 0.36s var(--egri), transform 0.36s var(--egri);
}
[data-harf].gorunur .harf { opacity: 1; transform: none; }

/* ── Form ────────────────────────────────────────────────────────────── */
.form { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.hero .form { max-width: 560px; }
.form-koyu { justify-content: center; }

.form input {
  flex: 1 1 260px; min-width: 0;
  padding: 17px 20px; border-radius: 14px;
  border: 1.5px solid var(--cizgi); background: var(--beyaz);
  font: inherit; color: var(--metin);
  transition: border-color 0.25s var(--egri), box-shadow 0.25s var(--egri);
}
.form input:focus { outline: none; border-color: var(--mor); box-shadow: 0 0 0 4px var(--mor-soft); }
.form-koyu input { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.2); color: #fff; }
.form-koyu input::placeholder { color: rgba(255, 255, 255, 0.5); }
.form-koyu input:focus { border-color: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12); }

.dugme {
  position: relative; overflow: hidden;
  padding: 17px 32px; border: none; border-radius: 14px;
  background: var(--mor); color: #fff;
  font: 600 17px/1 Inter, sans-serif; cursor: pointer;
  transition: transform 0.25s var(--egri), background 0.25s var(--egri);
  text-decoration: none; display: inline-block;
}
.dugme:hover { background: var(--mor-koyu); transform: translateY(-1px); }
.dugme:active { transform: translateY(0) scale(0.98); }
.dugme-kucuk { padding: 10px 20px; font-size: 15px; border-radius: 999px; }
.dugme-mini { padding: 11px 22px; font-size: 15px; border-radius: 999px; }
.dugme-beyaz { background: #fff; color: var(--koyu); }
.dugme-beyaz:hover { background: #f0eff5; }

/* Tıklama dalgası — videodaki `Tiklanabilir` efektinin karşılığı. */
.dalga {
  position: absolute; border-radius: 999px; transform: translate(-50%, -50%) scale(0);
  background: rgba(255, 255, 255, 0.45); pointer-events: none;
  animation: dalga 0.6s var(--egri) forwards;
}
.dugme-beyaz .dalga { background: rgba(107, 84, 211, 0.25); }
@keyframes dalga { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }

/* Tuzak alan ekran DIŞINA taşınıyor: `display:none` verilseydi bazı botlar
   onu atlar, taşınmış bir alanı ise doldurmaya devam ederler. */
.tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


.aydinlatma { margin-top: 34px; max-width: 620px; margin-inline: auto; text-align: left; color: rgba(255,255,255,0.6); font-size: 14.5px; }
.aydinlatma summary { cursor: pointer; font-weight: 600; color: rgba(255,255,255,0.8); }
.aydinlatma p { margin-top: 12px; line-height: 1.65; }
.aydinlatma b { color: rgba(255,255,255,0.85); }

.form-not { margin-top: 14px; font-size: 14.5px; color: var(--soluk); }
.form-sonuc { margin-top: 16px; font-size: 16px; font-weight: 500; min-height: 24px; }
.form-sonuc.iyi { color: var(--turkuaz); }
.form-sonuc.kotu { color: var(--kirmizi); }

/* ── Kart ────────────────────────────────────────────────────────────── */
.kart {
  background: var(--beyaz); border: 1px solid var(--cizgi);
  border-radius: 20px; padding: 30px; box-shadow: var(--golge);
}

/* ── Adımlar ─────────────────────────────────────────────────────────── */
/* Dört adım 2×2: `auto-fit` geniş ekranda üç sütun üretiyor ve dördüncü
   kart tek başına alt satırda kalıyordu. */
.adimlar { list-style: none; margin-top: 52px; display: grid; gap: 22px; grid-template-columns: repeat(2, 1fr); }
.adim h3 { font-size: 23px; font-weight: 600; margin: 14px 0 8px; }
.adim p { color: var(--soluk); font-size: 16px; }
.adim-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px;
  background: var(--mor-soft); color: var(--mor); font-weight: 700; font-size: 16px;
}

.mini-form { margin-top: 20px; border: 1px solid var(--cizgi); border-radius: 14px; padding: 16px; background: var(--zemin); }
.mini-etiket { font-size: 13.5px; font-weight: 600; color: var(--soluk); }
.mini-alan { margin-top: 10px; min-height: 46px; font-size: 16px; }
.imlec { display: inline-block; width: 2px; height: 1.05em; background: var(--metin); vertical-align: -0.16em; margin-left: 2px; animation: yanip 1s steps(1) infinite; }
@keyframes yanip { 50% { opacity: 0; } }

.bildirimler { margin-top: 20px; display: grid; gap: 10px; }
.bildirim {
  display: flex; gap: 12px; align-items: flex-start; text-align: left;
  background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 14px; padding: 13px 15px;
  opacity: 0; transform: translateX(30px);
  transition: opacity 0.6s var(--egri), transform 0.6s var(--egri);
}
.gorunur .bildirim { opacity: 1; transform: none; }
.gorunur .bildirim.gec { transition-delay: 0.45s; }
.bi { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 999px; background: var(--mor-soft); color: var(--mor); display: grid; place-items: center; font-size: 14px; }
.bildirim b { display: block; font-size: 15px; font-weight: 600; }
.bildirim i { display: block; font-style: normal; font-size: 14px; color: var(--soluk); }

.cizelge { list-style: none; margin-top: 20px; display: grid; gap: 12px; }
.cizelge li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: baseline; }
.cizelge b { font-size: 15.5px; font-weight: 600; }
.cizelge i { grid-column: 2; font-style: normal; font-size: 14px; color: var(--soluk); }
.onay { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: var(--turkuaz); color: #fff; font-size: 13px; }

.formul { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-weight: 600; font-size: 17px; }
.f-cift { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.f-op { color: var(--soluk); }
.f-turkuaz { color: var(--turkuaz); }
.f-mor { color: var(--mor); }
.f-kehribar { color: var(--kehribar); }

/* ── Sayılar ─────────────────────────────────────────────────────────── */
.sayilar { margin-top: 52px; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.sayi-kart { display: flex; flex-direction: column; gap: 14px; }
.etiket { align-self: flex-start; padding: 7px 15px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.et-turkuaz { background: var(--turkuaz-soft); color: var(--turkuaz); }
.et-mor { background: var(--mor-soft); color: var(--mor); }
.et-kehribar { background: var(--kehribar-soft); color: var(--kehribar); }
.sayi { font-size: clamp(38px, 5.6vw, 52px); font-weight: 700; letter-spacing: -0.035em; line-height: 1; }

/* Dolan çubuk — videodaki `Cubuk` bileşeninin karşılığı. */
.cubuk { display: block; height: 9px; border-radius: 999px; background: var(--cizgi); overflow: hidden; }
.cubuk > i, .cubuk > b { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--renk, var(--mor)); transition: width 1.1s var(--egri); }

/* ── Akan ekran kolajı ───────────────────────────────────────────────── */
.akis {
  margin-top: 46px; height: 660px; position: relative;
  display: flex; gap: 26px; justify-content: center;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}
.sutun { display: flex; flex-direction: column; gap: 30px; width: 375px; will-change: transform; }
.sutun img {
  width: 100%; height: auto; display: block; border-radius: 14px;
  border: 1px solid var(--cizgi); box-shadow: var(--golge-bel); background: #fff;
}

/* ── Özellik ızgarası ────────────────────────────────────────────────── */
.izgara { margin-top: 52px; display: grid; gap: 22px; grid-template-columns: repeat(2, 1fr); }
.oz h3 { font-size: 22px; font-weight: 600; }
.oz p { margin-top: 8px; color: var(--soluk); font-size: 16px; }

.halka-kutu { position: relative; width: 150px; height: 150px; margin: 24px auto 6px; display: grid; place-items: center; }
.halka { position: absolute; inset: 0; transform: rotate(-135deg); }
.halka circle { fill: none; stroke-width: 11; stroke-linecap: round; }
.h-zemin { stroke: var(--cizgi); stroke-dasharray: 245 327; }
.h-dolum { stroke: var(--turkuaz); stroke-dasharray: 245 327; stroke-dashoffset: 245; transition: stroke-dashoffset 1.3s var(--egri); }
.halka-sayi { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; }

.boyutlar { list-style: none; margin-top: 16px; display: grid; gap: 11px; }
.boyutlar li { display: grid; grid-template-columns: 108px 1fr; gap: 12px; align-items: center; font-size: 14.5px; color: var(--soluk); }

.esikler { margin-top: 24px; display: grid; gap: 12px; }
.esik { display: grid; gap: 7px; }
.esik b { display: block; height: 12px; width: 0; border-radius: 999px; background: var(--renk); transition: width 0.8s var(--egri); }
.esik i { font-style: normal; font-size: 14px; font-weight: 600; }
.e-kirmizi i { color: var(--kirmizi); }
.e-kehribar i { color: var(--kehribar); }
.e-turkuaz i { color: var(--turkuaz); }
.e-mor i { color: var(--mor); }

.odul-satir { margin-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.coin { display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px; border-radius: 999px; background: var(--kehribar-soft); color: var(--kehribar); font-weight: 600; }
.coin b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: var(--kehribar); color: #fff; font-size: 13px; }
.rozetler { display: flex; gap: 10px; }
.rz { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 999px; font-style: normal; font-size: 17px; }
.rz-mor { background: var(--mor-soft); color: var(--mor); }
.rz-turkuaz { background: var(--turkuaz-soft); color: var(--turkuaz); }
.odul-kart { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 18px; border: 1px solid var(--cizgi); border-radius: 14px; background: var(--zemin); font-weight: 600; font-size: 16px; }

.kontrol { list-style: none; margin-top: 22px; display: grid; gap: 13px; font-size: 16px; }
.kontrol li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: center; }

/* ── Organizasyon ────────────────────────────────────────────────────── */
.org { margin-top: 52px; display: flex; flex-direction: column; align-items: center; }
.o-kok { background: var(--mor-koyu); color: #fff; border-radius: 14px; padding: 16px 30px; font-weight: 700; font-size: 20px; text-align: center; }
.o-kok i, .o-kucuk i { display: block; font-style: normal; font-size: 13.5px; font-weight: 500; opacity: 0.82; }
.o-cizgi { width: 2px; height: 26px; background: var(--mor-koyu); }
.o-sirketler { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; padding-top: 22px; border-top: 2px solid var(--cizgi); }
/* Şirket kutusunun üstündeki kısa çizgi: yatay dağıtım çizgisiyle kutuyu
   birleştirir, yoksa kutular havada duruyor gibi görünüyor. */
.o-sirket { display: grid; gap: 9px; justify-items: center; position: relative; }
.o-sirket::before { content: ''; position: absolute; top: -22px; width: 2px; height: 22px; background: var(--cizgi); }
.o-sirket b { background: #fff; border: 1px solid var(--cizgi); border-radius: 11px; padding: 11px 22px; font-size: 16px; box-shadow: var(--golge); }
.o-sirket span, .o-dept { background: #fff; border: 1px solid var(--cizgi); border-radius: 9px; padding: 8px 16px; font-size: 14px; color: var(--soluk); }
.o-yada { margin-top: 34px; display: grid; gap: 12px; justify-items: center; border: 2px dashed var(--cizgi); border-radius: 18px; padding: 20px 34px; }
.o-yada-etiket { font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; color: var(--soluk); }
.o-kucuk { background: var(--turkuaz); color: #fff; border-radius: 12px; padding: 13px 26px; font-weight: 700; text-align: center; }

/* ── Alt şerit ───────────────────────────────────────────────────────── */
.alt-serit { border-top: 1px solid var(--cizgi); padding: 30px 0; background: var(--beyaz); }
.alt-ic { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 15px; }
.alt-ic > span:first-child { font-weight: 700; color: var(--mor-koyu); }
.alt-not { color: var(--soluk); }

/* Orta genişlikler: hero akışı sol sütunu ezmeye başlıyor, kaldırılıyor. */
@media (max-width: 1040px) {
  .hero-ic { grid-template-columns: 1fr; width: min(1120px, 100% - 40px); }
  .hero-akis { display: none; }
}

/* ── Mobil ───────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .bolum { padding: 68px 0; }
  .bolum.hero { padding: 76px 0 64px; }
  .adimlar, .izgara, .sayilar { grid-template-columns: 1fr; }
  /* Dar ekranda hero akışı yok: kartlar okunmayacak kadar küçülür ve
     sayfayı uzatıp formu ekranın dışına iter. */
  .hero-ic { grid-template-columns: 1fr; }
  .hero-akis { display: none; }
  .akis { height: 420px; gap: 16px; }
  .sutun { width: 46vw; gap: 16px; }
  .sutun-gizli { display: none; }
  .form { flex-direction: column; }
  /* Sütun yönünde `flex: 1 1 260px` dikeyde büyümek anlamına geliyor ve
     e-posta kutusu ekranın yarısını kaplıyordu. */
  .form input { flex: 0 0 auto; width: 100%; }
  .form .dugme { width: 100%; }
  .o-sirketler { gap: 12px; }
}

/* Hareket azaltma tercihi olan kullanıcıya animasyon dayatılmaz. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  [data-belir] { opacity: 1; transform: none; }
  [data-harf] .harf { opacity: 1; transform: none; }
}