/* Haberpaketleri — yapay-zeka bolumu.
   site.css ten AYRILDI: yalnizca gerektigi sayfada yuklenir.
   Ortak belirtecler (--brand vb.) site.css te tanimlidir; bu dosya
   ondan SONRA yuklenmelidir. */

/* ============ YAPAY ZEKA SAYFASI ============ */
/*
 * Koyu "siber" bolumler. Renkler --ink ailesinden gelir, ama bu bolumler
 * TEMADAN BAGIMSIZ olarak her zaman koyudur: acik temada da koyu kalirlar.
 * Bu yuzden metin renkleri token yerine SABIT deger kullanir — token acik
 * temada koyulasip koyu zeminde okunmaz hale gelirdi.
 *
 * Kontrast (WCAG AA, 4.5:1 esigi):
 *   #EAF3FB / #0A2337  -> 15.9:1   govde metni
 *   #9DB6CC / #0A2337  ->  7.3:1   ikincil metin
 *   #5FB8F5 / #0A2337  ->  7.2:1   vurgu
 * Marka mavisi --brand (#0C5FAE) koyu zeminde 2.4:1 kalir; BU ZEMINDE
 * METIN RENGI OLARAK KULLANILMAZ, yalnizca dolgu/parlama olarak gecer.
 */
.yz-hero,
.yz-koyu{
  --yz-zemin:#0A2337;
  --yz-metin:#EAF3FB;
  --yz-soluk:#9DB6CC;
  --yz-vurgu:#5FB8F5;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 8%, #123049 0%, transparent 60%),
    linear-gradient(165deg, #0E2A40 0%, var(--yz-zemin) 55%, #071726 100%);
  color:var(--yz-metin);
}
.yz-hero{padding-block:56px 64px}
.yz-koyu{padding-block:72px}
.yz-hero .wrap,
.yz-koyu .wrap{position:relative; z-index:2}

/* Devre izgarasi — tek bir gradient cifti, gorsel dosyasi yok */
.yz-hero__izgara{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    linear-gradient(rgba(95,184,245,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95,184,245,.10) 1px, transparent 1px);
  background-size:52px 52px;
  /* Kenarlara dogru silinir; sert kesim "duvar kagidi" gibi durur */
  -webkit-mask-image:radial-gradient(80% 70% at 50% 42%, #000 25%, transparent 100%);
          mask-image:radial-gradient(80% 70% at 50% 42%, #000 25%, transparent 100%);
}
.yz-hero__parlama{
  position:absolute; z-index:1; pointer-events:none;
  width:520px; height:520px; right:-90px; top:-160px;
  background:radial-gradient(circle, rgba(21,128,208,.34) 0%, transparent 62%);
  filter:blur(8px);
}

/* Koyu zeminde ust baslik cizgisi turuncu kalir; marka vurgusu odur */
.eyebrow--ters{color:var(--yz-vurgu)}

.yz-hero__grid{
  display:grid; grid-template-columns:minmax(0,1fr) 260px;
  gap:40px; align-items:center; margin-top:18px;
}
.yz-hero__baslik{
  font-family:var(--f-display); font-weight:800; letter-spacing:-.04em;
  font-size:clamp(2.1rem, 4.6vw, 3.35rem); line-height:1.06; margin:14px 0 0;
  color:var(--yz-metin);
}
.yz-hero__baslik span{color:var(--yz-vurgu)}
.yz-hero__lede{color:var(--yz-soluk); font-size:1.05rem; line-height:1.68; max-width:56ch; margin-top:16px}
.yz-hero__cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}

/* Koyu zemine uygun ikincil dugme — .btn--line acik zemin icindir */
.btn--hayalet{
  border-color:rgba(234,243,251,.30); background:rgba(234,243,251,.06); color:var(--yz-metin);
}
.btn--hayalet:hover{border-color:var(--yz-vurgu); color:var(--yz-vurgu)}

.yz-rozetler{display:flex; flex-wrap:wrap; gap:9px; margin-top:24px}
.yz-rozet{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 12px; border-radius:999px;
  border:1px solid rgba(95,184,245,.34); background:rgba(95,184,245,.10);
  color:var(--yz-metin); font-size:.79rem; font-weight:600;
}
.yz-rozet svg{width:15px; height:15px; flex:none; color:var(--yz-vurgu)}

/* --- Maskot --- */
/*
 * Gorsel 184x276 uretilmis; DAHA BUYUK CIZILMEZ, bulaniklasir.
 * Etkiyi cevresindeki halkalar ve taban parlamasi kuruyor.
 */
.yz-robot{position:relative; display:grid; place-items:center; min-height:300px}
.yz-robot img{
  position:relative; z-index:3;
  width:184px; height:276px; max-width:100%; height:auto;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.55));
  animation:yz-salin 5.5s ease-in-out infinite;
}
.yz-robot__halka{
  position:absolute; z-index:1; border-radius:50%;
  border:1px solid rgba(95,184,245,.30);
}
.yz-robot__halka--1{width:250px; height:250px; animation:yz-nabiz 3.6s ease-out infinite}
.yz-robot__halka--2{width:250px; height:250px; animation:yz-nabiz 3.6s ease-out infinite 1.8s}
.yz-robot__taban{
  position:absolute; z-index:2; bottom:24px;
  width:190px; height:26px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(95,184,245,.42) 0%, transparent 70%);
}
@keyframes yz-salin{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-11px)}
}
@keyframes yz-nabiz{
  0%  {transform:scale(.72); opacity:.85}
  100%{transform:scale(1.18); opacity:0}
}

/* --- Ozellik karti (hem acik hem koyu bolumde) --- */
.yz-oz__ik{
  display:grid; place-items:center; width:42px; height:42px;
  border-radius:12px; flex:none;
  background:rgba(95,184,245,.13); border:1px solid rgba(95,184,245,.30);
  color:var(--yz-vurgu, var(--brand));
}
.yz-oz__ik svg{width:21px; height:21px}
.yz-oz__ik--mavi{background:var(--brand-soft); border-color:var(--brand-lit); color:var(--brand)}

.yz-oz h3{font-size:1rem; margin:13px 0 6px; color:var(--text)}
.yz-oz p{font-size:.9rem; line-height:1.62; color:var(--muted); margin:0}

/* Koyu bolumde kart yuzeyi ve metin renkleri degisir */
.yz-koyu .yz-oz{
  padding:20px 19px; border-radius:var(--radius);
  border:1px solid rgba(95,184,245,.22); background:rgba(234,243,251,.04);
}
.yz-koyu .yz-oz h3{color:var(--yz-metin)}
.yz-koyu .yz-oz p{color:var(--yz-soluk)}
.yz-koyu__baslik{color:var(--yz-metin)}
.yz-koyu__lede{color:var(--yz-soluk); font-size:1.05rem; line-height:1.68; max-width:62ch}
.yz-ozler{margin-top:8px}

/* --- Kod kutusu --- */
.yz-kod{
  margin-top:30px; border-radius:var(--radius);
  border:1px solid rgba(95,184,245,.26); background:rgba(7,23,38,.72); overflow:hidden;
}
.yz-kod__bas{
  padding:11px 16px; border-bottom:1px solid rgba(95,184,245,.20);
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--yz-soluk);
}
.yz-kod pre{
  margin:0; padding:18px 16px; overflow-x:auto;
  font-family:var(--f-mono); font-size:.82rem; line-height:1.75; color:var(--yz-metin);
}
.yz-kod pre b{color:var(--yz-vurgu); font-weight:600}
.yz-kod__not{
  margin:0; padding:0 16px 16px; font-size:.82rem; color:var(--yz-soluk);
}

/* --- Fiyat seridi --- */
.yz-fiyat{
  display:flex; flex-wrap:wrap; gap:22px; align-items:center; justify-content:space-between;
  margin-top:26px; padding:22px 24px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
  box-shadow:var(--shadow-card);
}
.yz-fiyat h3{margin:9px 0 5px}
.yz-fiyat p{margin:0; color:var(--muted); font-size:.92rem}
.yz-fiyat__sag{display:flex; align-items:center; gap:14px; flex-wrap:wrap}

/* --- Adimlar --- */
.yz-adim{
  position:relative; padding:22px 20px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
}
.yz-adim__no{
  display:grid; place-items:center; width:34px; height:34px; border-radius:10px;
  background:var(--ink); color:var(--ink-text);
  font-family:var(--f-display); font-weight:800; font-size:.95rem;
}
.yz-adim h3{font-size:1rem; margin:13px 0 6px}
.yz-adim p{margin:0; font-size:.9rem; line-height:1.62; color:var(--muted)}

@media (max-width:900px){
  .yz-hero__grid{grid-template-columns:1fr; gap:24px}
  /* Maskot metnin ALTINA duser; telefonda once mesaj okunsun */
  .yz-robot{order:2; min-height:250px}
  .yz-robot img{width:150px}
  .yz-robot__halka--1,.yz-robot__halka--2{width:200px; height:200px}
  .yz-robot__taban{width:150px}
}
@media (max-width:760px){
  .yz-hero{padding-block:40px 48px}
  .yz-koyu{padding-block:52px}
  .yz-hero__izgara{background-size:40px 40px}
}

@media (prefers-reduced-motion:reduce){
  .yz-robot img{animation:none}
  .yz-robot__halka{animation:none; opacity:.34; transform:scale(1)}
}


/* Sohbet robotu bolumu KOYU zeminde; oradaki fiyat kutusu acik zemindeki
   kardesiyle ayni yapida ama tersine renklendirilir. */
.yz-fiyat--ters{
  border-color:rgba(95,184,245,.28);
  background:rgba(7,23,38,.62);
}
.yz-fiyat--ters h3{color:#EAF3FB}
.yz-fiyat--ters p{color:#9DB6CC}
.yz-fiyat--ters .price-now{color:#EAF3FB}
.yz-fiyat--ters .price-unit{color:#9DB6CC}