/* 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;
  min-height:44px;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:#59615B}
.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:#59615B}
.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:#59615B}
.serit-not{margin:16px 0 0;text-align:center;font-size:12.5px;font-weight:500;
  color:#59615B}

/* Dışa aktarımdan kalan mutlak katmanlarda alt piksel yuvarlaması sayfaya
   yatay kaydırma eklememeli. Hero 1440 altında mobil.css ile tek sütuna geçer
   ve görünür panelin iki kenarı da ayrıca browser testinde ölçülür. `clip`,
   yalnız bu yuvarlama artığını keser; içerik saklamak için kullanılmaz. */
@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:#59615B;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:#59615B;margin:0}

/* Dışa aktarılan ana sayfadaki küçük inline metinler düşük kontrastlıydı.
   Yalnız metin renklerini koyulaştır; panel illüstrasyonunun dolgu renklerine
   ve seçilmiş marka paletine dokunma. */
[style*="color: rgb(124, 133, 126)"],
[style*="color:rgb(124,133,126)"],
[style*="color: rgb(107, 115, 105)"],
[style*="color:rgb(107,115,105)"],
[style*="color: rgb(123, 131, 125)"],
[style*="color:rgb(123,131,125)"],
[style*="color: rgb(142, 149, 141)"],
[style*="color:rgb(142,149,141)"],
[style*="color: rgb(154, 161, 155)"],
[style*="color:rgb(154,161,155)"],
[style*="color: rgb(138, 146, 140)"],
[style*="color:rgb(138,146,140)"]{color:#59615B !important}

/* Koyu kod ve CTA yüzeylerinde aynı soluk tonun açık karşılığı gerekir. */
[style*="color: rgb(110, 133, 121)"],
[style*="color:rgb(110,133,121)"],
[style*="background: rgb(20, 49, 38)"] [style*="color: rgb(124, 133, 126)"],
[style*="background:rgb(20,49,38)"] [style*="color:rgb(124,133,126)"]{
  color:#B8C8BE !important}
/* 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} }