/* Tanıtım sayfasının EK stilleri.
   Sayfanın kendi stili gömülü geliyor; buradakiler yalnız sonradan eklenen
   çalışır demo için. */
#top{scroll-margin-top:20px}

.demo-form{display:flex;align-items:center;gap:10px;background:#fff;
  border:1px solid rgb(227,224,214);border-radius:14px;padding:9px 10px 9px 16px}
.demo-form input{flex:1 1 0;min-width:0;border:0;outline:0;background:transparent;
  font:inherit;font-size:14.5px;color:rgb(20,49,38)}
.demo-form input::placeholder{color:rgb(154,161,155)}
.demo-form button{flex:none;height:40px;padding:0 18px;border:0;border-radius:10px;
  background:rgb(20,49,38);color:#fff;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.demo-form button:hover{background:rgb(28,64,50)}

.demo-ornek{margin-top:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:12px;color:rgb(124,133,126)}
.demo-ornek button{border:1px solid rgb(232,229,219);background:#fff;border-radius:8px;
  padding:5px 10px;font:inherit;font-size:12px;font-family:ui-monospace,"SF Mono",Menlo,monospace;
  color:rgb(90,98,92);cursor:pointer}
.demo-ornek button:hover{background:rgb(247,246,242)}

/* Sonuç kutusu — geçerli/geçersiz ayrımı RENKTEN ÖNCE METİNLE anlaşılmalı;
   renk körlüğünde tek başına renk yeterli değil. */
.demo-kutu{margin-top:16px;background:#fff;border:1px solid rgb(227,224,214);
  border-radius:14px;padding:18px 20px}
.demo-kutu.iyi{border-color:rgb(178,203,186)}
.demo-kutu.kotu{border-color:rgb(226,190,182)}
.demo-bas{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid rgb(240,238,231)}
.demo-bas b{font-size:16px;font-weight:700;letter-spacing:-.015em;color:rgb(20,49,38)}
.demo-kutu.kotu .demo-bas b{color:rgb(140,58,44)}
.demo-no{margin-left:auto;font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:13px;color:rgb(124,133,126);letter-spacing:.02em}
.demo-satir{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:7px 0;font-size:13.5px;color:rgb(107,115,105)}
.demo-satir b{font-weight:600;color:rgb(20,49,38);text-align:right}
.demo-not{margin:12px 0 0;padding-top:12px;border-top:1px solid rgb(240,238,231);
  font-size:12px;line-height:1.6;color:rgb(124,133,126)}

@media(max-width:640px){
  .demo-form{flex-wrap:wrap}
  .demo-form input{flex:1 1 100%;order:-1;padding:4px 0}
  .demo-form button{flex:1 1 100%}
  .demo-no{margin-left:0;flex:1 1 100%}
}

/* Deneme hakkı dolunca çıkan kapı — reddediş değil, davet. */
.demo-kutu.kapi{border-color:rgb(210,214,206);background:rgb(250,250,247)}
.demo-kapi-dug{display:inline-flex;align-items:center;height:42px;padding:0 20px;
  border-radius:11px;background:rgb(20,49,38);color:#fff;font-size:13.5px;
  font-weight:600;text-decoration:none}
.demo-kapi-dug:hover{background:rgb(28,64,50)}

/* Demo formu dar ekranda: ikon + alan aynı satırda, düğme altta tam genişlik.
   Önce alanı 100%%'e alıp öne çekmiştim; ikon alt satıra düşüyordu (ölçüldü). */
@media(max-width:560px){
  .demo-form{flex-wrap:wrap;padding:10px 12px}
  .demo-form input{flex:1 1 auto;min-width:0}
  .demo-form button{flex:1 1 100%;margin-top:8px}
  .demo-ornek button{font-size:11.5px;padding:4px 8px}
  .demo-satir{font-size:12.5px}
  .demo-no{font-size:12px}
}

/* ═══ KAHRAMAN ALTI ŞERİT ═══
   ⚠️ Bu blok bir kez KAYBOLDU: sahte istatistik şeridini değiştirirken
      kapsayıcı elemanı ezdim ve içindeki biçim şeridi de gitti; geriye
      kartsız, boşlukta duran dört yazı kaldı (Belen fark etti).
      Artık kendi kartı ve kendi sınıfları var — kaynaktaki satır içi
      stillere bağlı değil. */
.serit-bolum{width:100%;max-width:1440px;margin:0 auto;padding:34px 60px 0}
.serit-kart{background:#fff;border:1px solid rgb(231,228,219);border-radius:16px;
  overflow:hidden}
.serit-sayi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.sk{display:flex;flex-direction:column;gap:4px;padding:22px 24px;text-align:center;
  border-right:1px solid rgb(240,238,231)}
.sk:last-child{border-right:0}
.sk b{font-size:15.5px;font-weight:700;letter-spacing:-.01em;color:rgb(20,49,38)}
.sk span{font-size:12.5px;font-weight:500;color:rgb(124,133,126)}
.serit-bicim{display:flex;align-items:center;justify-content:center;gap:10px 30px;
  flex-wrap:wrap;padding:16px 24px;border-top:1px solid rgb(240,238,231);
  background:rgb(250,249,246);font-size:12px;font-weight:600;letter-spacing:.02em;
  color:rgb(124,133,126)}
.serit-not{margin:16px 0 0;text-align:center;font-size:12.5px;font-weight:500;
  color:rgb(124,133,126)}

/* ⚠️ 1440 ALTINDA SAYFA YATAY KAYIYORDU. Hero'daki temsilî panel görseli
   sabit genişlikli kartlardan oluşuyor (dışa aktarım); 1280px'de sayfayı
   1394px'e itiyordu (ölçüldü). Görsel dekoratif ve "TEMSİLÎ EKRAN" diye
   etiketli — sağdan kırpılması kabul edilebilir, sayfanın kayması değil.
   `clip` seçildi: `hidden` olsaydı kap kaydırma bağlamı kurup içerideki
   yapışkan öğeleri bozardı. Hedef `.sc-host`: hero bölümü sınıfsız bir
   <section>, `.serit-bolum` DEĞİL (denendi, tutmadı — ölçüldü). */
@media(max-width:1439px){ .sc-host{overflow-x:clip} }
@media(max-width:1100px){ .serit-bolum{padding-left:26px;padding-right:26px} }
@media(max-width:820px){
  .serit-sayi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sk{padding:18px 14px}
  .sk:nth-child(2n){border-right:0}
  .sk:nth-child(-n+2){border-bottom:1px solid rgb(240,238,231)}
  .serit-bicim{gap:8px 18px;font-size:11.5px}
}
@media(max-width:560px){
  .serit-bolum{padding:24px 16px 0}
  .sk b{font-size:14px} .sk span{font-size:11.5px}
}


/* ═══ ALT BİLGİ ═══
   ⚠️ Kurallar site.css'e YAZILDI, sayfa.css bağlanmadı. Ana sayfa 1440px
      sabit bir dışa aktarımdır ve satır içi stillerle çalışır; sayfa.css'in
      genel sıfırlaması (`*{margin:0}`, `.kap{max-width:1140px}`) o düzeni
      dağıtıyordu — ölçüldü: sayfa 4783px'den 1460px'e çöktü.
   ⚠️ Kapsam `footer.alt`: yalnız `.alt` yazılırsa bölüm alt başlıkları da
      (`p.alt`) beyaz zemin alıyor. */
footer.alt{margin-top:56px;border-top:1px solid rgb(231,228,219);background:#fff}
/* ⚠️ GENİŞLİK ANA SAYFAYLA AYNI (1440), 1140 DEĞİL. Ana sayfa 1440px sabit
   bir dışa aktarım; 1140'a ortalayınca altlık dar ekranda sola kayıp
   metinleri kesiyordu (ölçüldü: "ÜRÜN" → "RÜN"). */
footer.alt .kap{width:100%;max-width:1440px;margin:0 auto;padding:30px 60px;
  display:flex;gap:34px;flex-wrap:wrap}
footer.alt .sut{display:flex;flex-direction:column;gap:7px;min-width:140px}
footer.alt .sut b{font-size:12px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:rgb(124,133,126);margin-bottom:2px}
footer.alt .sut a{font-size:13.5px;color:rgb(92,102,96);text-decoration:none}
footer.alt .sut a:hover{color:rgb(22,33,28);text-decoration:underline}
footer.alt .not{flex:1 1 260px;font-size:12.5px;line-height:1.65;
  color:rgb(124,133,126);margin:0}
/* Kenar boşluğu ana sayfanın bölümleriyle AYNI kırılımlarda değişir
   (bkz. mobil.css: tpl 9/31/345/474/555). */
@media(max-width:1100px){ footer.alt .kap{padding:30px 26px} }
@media(max-width:560px){ footer.alt .kap{gap:22px;padding:26px 16px} }