/* Pusula sitesi — uygulamanın tasarım dili.
   Kart = beyaz zemin + iki katmanlı gölge, kenar çizgisi YOK (27 Tem kuralı).
   Bölüm ayrımı tipografiyle: küçük gri etiket + iri koyu başlık + hairline. */
*{margin:0;padding:0;box-sizing:border-box}
/* ⚠ SİTE HEP AÇIK TEMA (Mustafa: "dark mode gereksiz"). Koyu tema desteği
   söküldü; `color-scheme:light` cihaz koyu moddayken de form/kaydırma
   çubuklarının açık kalmasını sağlar, yoksa tarayıcı kendiliğinden çevirir. */
:root{
  color-scheme:light;
  --bg:#FFFFFF;--card:#FFFFFF;--page:#F4F4F2;--ink:#1D1D1D;--gray:#5F5F5F;--faint:#767676;
  --line:#ECECEC;--soft:#F7F7F6;
  --sand-soft:#EFF3EE;--sand-line:#E2EAE0;--sand-ink:#5E7D63;--sand-deep:#43584A;
  --golge:0 1px 2px rgba(0,0,0,.05), 0 6px 16px -4px rgba(0,0,0,.10);
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:500;line-height:1.6;letter-spacing:-.1px}
img{max-width:100%;display:block}
.wrap{max-width:1000px;margin:0 auto;padding:0 24px}
.dar{max-width:680px;margin:0 auto}

/* ── üst şerit ── */
header{padding:24px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand b{font-size:19px;font-weight:800;letter-spacing:-.5px}
.brand span{font-size:11px;font-weight:800;letter-spacing:.9px;color:var(--faint);
  padding:4px 9px;border-radius:999px;background:var(--soft)}
nav{display:flex;gap:8px}
nav a{font-size:13px;font-weight:800;color:var(--ink);text-decoration:none;
  padding:9px 15px;border-radius:999px;border:1px solid var(--line);background:var(--card)}
nav a:hover{background:var(--soft)}

/* ── hero ── */
.hero{display:grid;grid-template-columns:1fr 340px;gap:44px;align-items:center;padding:34px 0 8px}
h1{font-size:40px;font-weight:800;letter-spacing:-1.4px;line-height:1.13}
.lead{font-size:17px;font-weight:500;color:var(--gray);margin-top:18px;line-height:1.65}
.rozet{display:inline-flex;align-items:center;gap:8px;margin-top:24px;padding:10px 16px;border-radius:999px;
  background:var(--sand-soft);border:1px solid var(--sand-line);color:var(--sand-deep);
  font-size:12.5px;font-weight:800}
.rozet i{width:7px;height:7px;border-radius:50%;background:var(--sand-ink);display:block}
/* ── TELEFON ÇERÇEVESİ ──
   Görüntüler gerçek telefon ölçüsünde alınıyor (390x844 @2x), KIRPILMIYOR —
   alt menü kadrajda kalsın diye (Mustafa). Önce uygulamanın masaüstü
   çerçevesini yakalayıp object-fit ile kırpıyordum: hem devasa duruyordu
   hem menüyü kesiyordu. */
.telefon{width:100%;max-width:268px;margin:0 auto;background:#1D1D1D;
  border-radius:42px;padding:9px;box-shadow:0 22px 50px -14px rgba(0,0,0,.30)}
/* ⚠ height:auto ŞART — HTML'deki height="844" niteliği yoksa baskın çıkıp
   görseli 250x844'e sıkıştırıyor (oran 0.296, doğrusu 0.462). Ölçümle yakalandı. */
.telefon img{width:100%;height:auto;display:block;border-radius:34px;background:#fff}

/* ── bölümler ── */
section{padding:52px 0;border-top:1px solid var(--line);margin-top:52px}
.etiket{font-size:11px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:var(--faint)}
h2{font-size:27px;font-weight:800;letter-spacing:-.8px;margin-top:9px;line-height:1.2}
.aciklama{font-size:15.5px;color:var(--gray);margin-top:12px;line-height:1.7;max-width:620px}

/* adım: metin + ekran görüntüsü, dönüşümlü */
.adim{display:grid;grid-template-columns:1fr 320px;gap:48px;align-items:center;margin-top:40px}
/* ⚠ ters yerleşimde SÜTUN GENİŞLİKLERİ de takas edilmeli. Önce yalnız `order`
   değiştirmiştim: görsel 1fr sütuna düşüp 584px'e yayıldı, metin 320px'e sıkıştı. */
.adim.ters{grid-template-columns:320px 1fr}
.adim.ters .adimYazi{order:2}
.adim h3{font-size:21px;font-weight:800;letter-spacing:-.5px}
.adim p{font-size:15px;color:var(--gray);margin-top:11px;line-height:1.7}
.adim .no{font-size:11px;font-weight:800;letter-spacing:1px;color:var(--sand-ink)}

/* kart ızgarası */
.kartlar{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
.kart{background:var(--card);border-radius:20px;padding:22px 20px;box-shadow:var(--golge)}
.kart h4{font-size:16.5px;font-weight:800;letter-spacing:-.35px}
.kart p{font-size:14px;color:var(--gray);margin-top:8px;line-height:1.65}

/* ilkeler */
.ilkeler{display:grid;gap:2px;margin-top:30px}
.ilke{display:flex;gap:16px;padding:17px 0;border-bottom:1px solid var(--line)}
.ilke:last-child{border-bottom:0}
.ilke b.no{flex:none;width:26px;font-size:12px;font-weight:800;color:var(--sand-ink);padding-top:2px}
.ilke .m{font-size:14.5px;color:var(--gray);line-height:1.65}
.ilke .m b{color:var(--ink);font-weight:800}

/* alt sayfa kapıları — belirgin, uygulamadaki kapı kartlarının kardeşi */
.kapilar{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
.kapi{display:flex;align-items:center;gap:16px;background:var(--card);border-radius:20px;
  padding:22px 20px;box-shadow:var(--golge);text-decoration:none;color:var(--ink);transition:transform .12s}
.kapi:active{transform:scale(.99)}
.kapi .ik{flex:none;width:46px;height:46px;border-radius:14px;background:var(--sand-soft);
  display:flex;align-items:center;justify-content:center;color:var(--sand-deep)}
.kapi .ik svg{width:22px;height:22px}
.kapi .gv{flex:1;min-width:0}
.kapi .gv b{display:block;font-size:16px;font-weight:800;letter-spacing:-.3px}
.kapi .gv span{display:block;font-size:13px;color:var(--gray);margin-top:3px;line-height:1.5}
.kapi .ch{flex:none;font-size:22px;color:var(--faint);line-height:1}

/* uzun metin (gizlilik/destek) */
.doc h3{font-size:18px;font-weight:800;letter-spacing:-.4px;margin-top:34px}
.doc h3:first-of-type{margin-top:20px}
.doc p{font-size:14.5px;color:var(--gray);margin-top:11px;line-height:1.75}
.doc ul{margin:11px 0 0 20px}
.doc li{font-size:14.5px;color:var(--gray);margin-top:7px;line-height:1.7}
.doc b{color:var(--ink)}
.todo{background:var(--soft);border:1px dashed var(--line);border-radius:14px;
  padding:14px 16px;margin-top:16px;font-size:13px;color:var(--faint);line-height:1.65}
.stamp{font-size:12.5px;color:var(--faint);margin-top:30px}
a.mail{color:var(--sand-ink);font-weight:800;text-decoration:none;border-bottom:1px solid var(--sand-line)}

footer{border-top:1px solid var(--line);margin-top:56px;padding:30px 0 52px}
footer p{font-size:12.5px;color:var(--faint);line-height:1.75}
footer a{color:var(--faint);text-decoration:none;border-bottom:1px solid var(--line)}
footer .sep{margin:0 8px;opacity:.5}

@media(max-width:800px){
  .hero{grid-template-columns:1fr;gap:30px}
  .hero .shot{max-width:320px;margin:0 auto}
  .adim,.adim.ters{grid-template-columns:1fr;gap:26px}
  .adim.ters .adimYazi{order:0}
  .adim .shot{max-width:300px;margin:0 auto}
  .kartlar,.kapilar{grid-template-columns:1fr}
  h1{font-size:31px;letter-spacing:-1px}
  h2{font-size:23px}
  section{padding:40px 0;margin-top:40px}
}