/* AppFlows — tek stil dosyasi. Harici font YOK (bloklayan istek olmasin),
   framework YOK, build YOK. Tum tasarim kararlari asagidaki jetonlarda. */
:root{
  --bg:#08090b;          /* duz siyah degil: derinlik + goz konforu */
  --panel:#0f1114;
  --line:#1e222a;
  --line-2:#2b313b;
  --fg:#f2f3f5;
  --fg-2:#a8b0bc;
  /* --fg-3 plandaki #6b7280 degildi: 13.5px normal metinde AA kaliyordu
     (bg 4.12:1 / panel 3.91:1, gereken 4.5:1). Urun alt satirlari bu rengi
     kullaniyor, yani okunmasi gereken icerik. #767e8b -> bg 4.86 / panel 4.62. */
  --fg-3:#767e8b;
  --accent:#9cbc5e;      /* logo.svg'den alindi — YALNIZ kucuk dokunuslarda */
  --accent-dim:rgba(156,188,94,.15);
  --sans:-apple-system,"SF Pro Display","Inter",system-ui,"Segoe UI",Roboto,sans-serif;
  --wrap:1120px;
  --pad:clamp(20px,5vw,40px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ── tipografi olcegi: keynote karakteri (iri + siki) ── */
.h1{font-size:clamp(38px,7vw,76px);line-height:1.04;letter-spacing:-.03em;font-weight:600;margin:0}
.h2{font-size:clamp(28px,4.4vw,46px);line-height:1.1;letter-spacing:-.025em;font-weight:600;margin:0}
.h3{font-size:clamp(19px,2.2vw,24px);line-height:1.25;letter-spacing:-.015em;font-weight:600;margin:0}
.kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  font-weight:600;margin:0 0 14px}
.lead{font-size:clamp(16px,1.9vw,19px);color:var(--fg-2);margin:18px 0 0;max-width:58ch}
.small{font-size:13.5px;color:var(--fg-3)}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
.section{padding-block:clamp(72px,11vw,140px)}   /* bol bosluk = keynote ritmi */

/* ── kaydirinca yumusak belirme (tek hareket efekti) ── */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}
/* ILK EKRANDAKI baslik bloklari beliris efektinden MUAF.
   Neden: Chrome opacity:0 ogeleri LCP adayi saymaz. Her sayfanin h1'i .reveal
   tasidigindan LCP, sayfa sonundaki betik .in sinifini ekleyene kadar hic
   tetiklenemiyordu — en buyuk metnin render'i JS'e rehindi.
   Ikinci ve daha onemli sebep: betik HATA verirse (proxy, eklenti, CSP)
   <noscript> devreye GIRMEZ (JS kapali degil, bozuk) ve bu kanit sayfasi
   bos gorunur. Alt bolumlerde efekt aynen duruyor. */
.hero .reveal,
.doc-block:first-child.reveal{opacity:1;transform:none;transition:none}

/* ── 01 ust cubuk + hero ── */
.top{position:sticky;top:0;z-index:50;background:rgba(8,9,11,.72);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;justify-content:space-between;height:62px}
.brand img{height:26px;width:auto}
.top-cta{font-size:14px;color:var(--fg-2);padding:7px 14px;border:1px solid var(--line-2);
  border-radius:99px;transition:color .2s,border-color .2s}
.top-cta:hover{color:var(--fg);border-color:var(--fg-3)}

.hero{padding-block:clamp(90px,16vw,190px)}
.facts{display:flex;gap:26px;flex-wrap:wrap;margin:34px 0 0;padding:0;
  color:var(--fg-3);font-size:13.5px}
.facts span{position:relative;padding-left:15px}
.facts span::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--accent)}

/* ── 02 GeoShake vitrini ── */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);
  align-items:center;margin-top:18px}
@media(max-width:860px){.feature{grid-template-columns:1fr}}
.feature-img{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#000}
/* margin-bottom sifirlandi: <p> varsayilan alt bosluğu align-items:center ile
   metin blogunu gorsele gore ~8px yukari kaydiriyordu */
.feature-links{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 0}
.btn{display:inline-block;padding:11px 20px;border-radius:99px;font-size:14.5px;font-weight:500;
  background:var(--fg);color:#0a0c0e;transition:opacity .2s}
.btn:hover{opacity:.86}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--line-2)}
.btn.ghost:hover{border-color:var(--fg-3);opacity:1}

/* ── 03 katalog ── */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.grid{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;
  display:flex;flex-direction:column;gap:4px;transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.card .h3{margin-top:12px}
/* <p> varsayilan 1em margin'i gap:4px'i bozuyordu: baslik-alt satir arasi 17.5px,
   kart alt bosluğu 33.5px oluyordu. Sifirlanmadan kart dolgusu simetrik degil. */
.card p{margin:0}
/* ikon dosyasi gelmeden once: bos kare yerine sakin bir yer tutucu */
.ico{width:52px;height:52px;border-radius:12px;background:#1a1e25;object-fit:cover}
.stores{display:flex;gap:20px;flex-wrap:wrap;margin:26px 0 0}
.stores a{border-bottom:1px solid var(--line-2);padding-bottom:2px}
.stores a:hover{border-color:var(--accent)}
/* hareket azaltma: kart kalkma efekti .card:hover TANIMINDAN SONRA gelmeli,
   ayni ozgulluk (0,2,0) — once yazilsa sonraki kural ezerdi */
@media (prefers-reduced-motion:reduce){
  .card:hover{transform:none}
}

/* ── 04 studyo ── */
.studio{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--panel),transparent)}
.studio .lead+.lead{margin-top:14px}

/* ── 05 iletisim + footer ── */
.mail{font-size:clamp(22px,3.4vw,34px);letter-spacing:-.02em;font-weight:600;
  border-bottom:2px solid var(--accent);padding-bottom:3px}
.foot{border-top:1px solid var(--line);padding-block:34px}
.foot-in{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.foot-links{display:flex;gap:18px;flex-wrap:wrap}
/* footer linkleri telif metniyle ayni renkteydi: renk disinda hicbir ipucu yoktu
   (WCAG 1.4.1). Alt cizgi + daha acik renk ile link olduklari anlasiliyor. */
.foot-links a{color:var(--fg-2);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:4px}
.foot-links a:hover{color:var(--fg)}


/* ══ geoshake.html — donanim kanit sayfasi ══
   Bu sayfanin isi ikna degil KANIT: Google Home sertifikasyonu
   "does not appear to build any smart enabled devices" diyerek reddetti.
   Fotograf + bilesen adlari o cumlenin karsiligi. */

/* Urun fotografi ACIK zeminli gercek bir cekim (render degil) — koyu sayfada
   parlak bir blok. Kirpmiyoruz: eldeki olcek referansi bu sayfanin butun fikri.
   Cozum sadece boyut sinirlamak ve kenari yumusatmak. */
.photo{margin:34px auto 0;max-width:480px}
.photo img{border:1px solid var(--line);border-radius:18px}
/* .small'un --fg-3'u 13.5px'te sinirda kaliyor; alt yazi okunacak metin. */
.photo figcaption{margin-top:12px;text-align:center;color:var(--fg-2);font-size:13.5px}

/* Teknik kunye: MCU ve IMU parca numarasi, "gercek cihaz" iddiasinin tek en
   guclu kaniti. Tablo degil cift listesi (dl) — veri satir/sutun degil, terim/deger.
   Cizgiler kapsayicida degil HER hucrenin ustunde: sutun bosluğunda kesilen
   cizgiler tutarli gorunsun (kapsayicida olsa ust cizgi butun, altlar kesik olurdu). */
.specs{margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);
  column-gap:clamp(28px,5vw,64px)}
.specs > div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:11px 0;border-top:1px solid var(--line)}
.specs dt{margin:0;color:var(--fg-2);font-size:14px;flex:0 0 auto}
.specs dd{margin:0;color:var(--fg);font-size:14px;text-align:right}
@media(max-width:720px){.specs{grid-template-columns:1fr}}
/* dar ekranda "4× LSM6DSO · 6-axis IMU array" saga yaslanip garip sariyordu */
@media(max-width:520px){
  .specs > div{flex-direction:column;gap:2px}
  .specs dd{text-align:left}
}

/* 3 adimli akis. <ol> cunku gercekten sirali bir surec; numaralar CSS sayaciyla
   uretiliyor ki metinde tekrarlanmasin. list-style:none Safari'de liste
   semantigini dusuruyor — role="list" onu geri veriyor. */
.steps{counter-reset:step;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:14px;margin:34px 0 0;padding:0}
@media(max-width:860px){.steps{grid-template-columns:1fr}}
.step{counter-increment:step;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:24px}
.step::before{content:"0" counter(step);display:block;font-size:12px;font-weight:600;
  letter-spacing:.14em;color:var(--accent);margin-bottom:14px}
.step p{margin:10px 0 0;color:var(--fg-2);font-size:15px}

/* Durustluk notu: ne OLMADIGINI da yazmak inceleyicide guven yaratir. */
.note{margin:34px 0 0;padding:14px 0 14px 18px;border-left:2px solid var(--line-2);
  color:var(--fg-2);font-size:14.5px;max-width:62ch}

/* Kapanis: tek is, iki cikis. .studio ile ayni zemin dili, alt cizgisi yok. */
.exit{border-top:1px solid var(--line);
  background:linear-gradient(180deg,var(--panel),transparent)}
.exit .small{margin:30px 0 0;max-width:62ch}
.btn.big{padding:15px 28px;font-size:16px}

/* Kayitli sirket adresi. <address> tarayici varsayilaninda EGIK yazilir —
   font-style:normal onu geri alir. Adres bir sirket sitesinde bulunmasi
   beklenen guven sinyalidir; ayrica Google Home sirket profiliyle ayni
   adresin sitede de gorunmesi "iki farkli sirket" suphesini zayiflatir. */
.addr{font-style:normal;margin:26px 0 0;color:var(--fg-2);font-size:15px;line-height:1.75}
.addr strong{color:var(--fg);font-weight:600}