/* PiyasaKuşu yeni site (10.10) — yalnız YENİ parçaların stili.
   Mevcut tasarımın stili stil.css'tir ve o dosya aynen kopyalanmıştır; buradaki kurallar mevcut bölümlerin
   (kahraman, #akis, #ses, #hizmetler) görünümünü değiştirmez. Tek ayrık, 12.10.2026'dan beri kahramanın ilk
   düğmesidir: sahibinin isteğiyle "Kaydol" düğmesinin yeşil ışığını taşır (dosyanın sonunda, yerinden seçilir:
   ".kahraman .dugmeler > .dugme--ana"). (#uyelik 12.10.2026'dan beri yeni paket bölümüdür; stili src/paket.css
   dosyasındadır.) Kurallar "y-", "g-", "menu-", "site-alt", "ust-giris" ve "kaydol" adlarıyla sınırlıdır; renkler, yazı tipi ve kutu biçimleri stil.css'teki açık metalik temadan alınır. */

/* ── Üst çubuk: yeni sağ taraf (Giriş Yap bağlantısı + telefon menüsü düğmesi) ── */
.ust-giris { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: #0f1b2d; text-decoration: none; white-space: nowrap; }
.ust-giris:hover { color: var(--kobalt); }
.menu-dugme {
  display: none; width: 44px; height: 44px; margin: -4px 0 -4px auto; padding: 0; place-items: center; cursor: pointer;
  border: 1px solid rgba(15, 27, 45, .25); border-radius: 12px; background: #fff; color: #0f1b2d;
}
.menu-dugme .menu-kapat, .menu-dugme[aria-expanded="true"] .menu-ac { display: none; }
.menu-dugme[aria-expanded="true"] .menu-kapat { display: block; }
.menu-panel { display: none; }

@media (max-width: 860px) {
  /* Düğme telefonda görünmez ama yüksekliğini korur: üst çubuk eski sayfadakiyle aynı yükseklikte kalır */
  .ust .dugme--mavi { visibility: hidden; width: 0; padding-left: 0; padding-right: 0; border-left-width: 0; border-right-width: 0; overflow: hidden; white-space: nowrap; }
  /* Menü düğmesi yalnız betik çalışıyorsa görünür (html.js, sayfanın başında konur). Betik çalışmıyorsa çalışmayan
     bir düğme yerine "Giriş Yap" bağlantısı kalır: üst çubukta her durumda çalışan bir bağlantı bulunur. */
  html.js .ust .ust-giris { display: none; }
  html:not(.js) .ust .ust-giris { margin-left: auto; padding: 10px 0; line-height: 17px; }
  html:not(.js) .ust .dugme--mavi { margin-left: -28px; }
  html.js .menu-dugme { display: grid; margin-left: -28px; }
  /* Telefon menüsü: üst çubuğun altında tam ekran (Mobil çizimi) */
  .menu-panel:not([hidden]) {
    display: flex; flex-direction: column; position: fixed; z-index: 19; left: 0; right: 0; bottom: 0; top: var(--ust-yuk, 66px);
    background: #f4f6f8; color: #0f1b2d; overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .menu-panel nav { display: flex; flex-direction: column; padding: 8px 16px 0; background: #fff; border-bottom: 1px solid #dde3eb; }
  .menu-panel nav a {
    display: flex; align-items: center; justify-content: space-between; min-height: 60px; text-decoration: none;
    font-size: 18px; font-weight: 500; color: #0f1b2d; border-bottom: 1px solid #eef1f5;
  }
  .menu-panel nav a:last-child { border-bottom: 0; }
  .menu-panel nav a span:last-child { color: #5d6878; }
  .menu-panel nav a[aria-current] span:first-child { color: var(--kobalt); }
  .menu-dugmeler { display: flex; flex-direction: column; gap: 12px; padding: 24px 16px 0; }
  .menu-dugmeler a { display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: 16px; }
  .menu-birincil { background: var(--kobalt); color: #fff; }
  .menu-ikincil { background: #fff; border: 1px solid #b9c2ce; color: #0f1b2d; }
  .menu-not { margin: auto 16px 24px; padding-top: 24px; font-size: 13px; line-height: 1.6; color: #5d6878; text-align: center; }
  /* scrollbar-gutter: kaydırma çubuğu yer kaplayan tarayıcılarda menü açılınca üst çubuk yana kaymasın */
  html.menu-acik { overflow: hidden; scrollbar-gutter: stable; }
}

/* Görünmez cetvel: eski alt bilgi paragrafı, yalnız yüksekliği ölçülür (uyum.js). Yer kaplamaz, okunmaz. */
.y-olcu { position: absolute; left: 0; right: 0; top: 0; visibility: hidden; pointer-events: none; }

/* ── Yeni ana sayfa bölümleri (paket bölümü ve sonrası) ── */
.y-uyelik-bag { margin: 0; padding: 0 var(--kenar); text-align: center; }
.bolum.y-bolum { padding: 88px 0 10px; }
.y-sarmal { max-width: 1320px; margin: 0 auto; padding: 0 var(--kenar); }
.y-bolum--dar .y-sarmal { max-width: 860px; }
.y-bolum h2 { margin-bottom: 26px; }
.y-orta { text-align: center; }
/* Açık zemindeki yazı bağlantıları: kobaltın bir ton koyusu (zeminin en koyu yerinde de 4,5:1 okunurluk) */
.y-ok { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; font-size: 15px; color: #23609f; text-decoration: none; }
.y-ok:hover { color: #1a4a7d; }
.y-ok--acik { color: #7fd0f0; }
.y-ok--acik:hover { color: #b5e6fa; }
.y-bag-satir { margin: 14px 0 0; }
.y-not { margin: 14px 0 0; font-size: 14px; line-height: 1.6; color: #5d6878; }

/* Kritik olay öncesi analiz: hizmet kutularıyla aynı lacivert zemin ve kobalt çerçeve */
.y-ozel {
  background: #0a1d44; color: var(--platin); border-radius: 20px; padding: clamp(24px, 5vw, 56px);
  box-shadow: 0 0 0 2px var(--kobalt), 0 16px 34px rgba(42, 110, 183, .28);
}
.y-ozel-etiket { margin: 0 0 14px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #7fd0f0; }
.y-bolum .y-ozel h2 { color: #fff; margin-bottom: 16px; }
.y-ozel-giris { margin: 0 0 28px; max-width: 720px; font-size: 16px; line-height: 1.6; color: #c3ccd9; }
.y-ozel-uclu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.y-ozel-uclu > div { background: #12295a; border-radius: 14px; padding: 20px; }
.y-ozel-uclu h3 { margin: 0 0 6px; font-size: 16px; font-weight: 500; color: #fff; }
.y-ozel-uclu p { margin: 0; font-size: 14px; line-height: 1.55; color: #c3ccd9; }

/* Beyaz kutular: üyelik kartlarıyla aynı zemin, çizgi ve köşe */
.y-tablo-kutu, .y-kart, .y-adimlar li, .y-sorular {
  background: #fff; border: 1px solid #dde3eb; border-radius: 14px;
  box-shadow: 0 1px 3px rgba(15, 27, 45, .06), 0 10px 30px rgba(15, 27, 45, .08);
}
.y-tablo { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; text-align: left; color: #0f1b2d; }
.y-tablo thead th { padding: 14px 20px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #5d6878; font-weight: 500; border-bottom: 1px solid #dde3eb; }
.y-tablo tbody th { padding: 14px 20px; font-weight: 500; white-space: nowrap; border-bottom: 1px solid #eef1f5; }
.y-tablo tbody td { padding: 14px 20px; color: #3d4959; border-bottom: 1px solid #eef1f5; }
.y-tablo tbody tr:last-child th, .y-tablo tbody tr:last-child td { border-bottom: 0; }

.y-kartlar { display: grid; gap: 16px; }
.y-kartlar--uc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.y-kart { padding: 24px; min-width: 0; }
.y-kart h3 { margin: 0 0 8px; font-size: 18px; font-weight: 500; color: #0f1b2d; }
.y-kart p { margin: 0; font-size: 15px; line-height: 1.6; color: #3d4959; }

.y-adimlar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.y-adimlar li { padding: 20px; min-width: 0; font-size: 15px; line-height: 1.5; color: #0f1b2d; }
.y-adim-no { display: block; font-size: 26px; font-weight: 300; line-height: 1.2; color: var(--kobalt); margin-bottom: 6px; font-variant-numeric: tabular-nums; }

.y-sorular { list-style: none; margin: 0; padding: 4px 22px; }
.y-sorular li + li { border-top: 1px solid #eef1f5; }
.y-sorular a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 6px 0; text-decoration: none; font-weight: 500; font-size: 16px; color: #0f1b2d; }
.y-sorular a:hover { color: var(--kobalt); }
.y-sorular a span:last-child { color: #5d6878; font-size: 20px; }

/* ── Alt bilgi: <main> dışında; sabit grafiğin (z 1) üstünde durur ── */
.site-alt { position: relative; z-index: 2; margin-top: 96px; background: #0a1730; color: #c3ccd9; font-size: 15px; line-height: 1.5; padding: 48px var(--kenar) 36px; }
.site-alt-ic { max-width: 1320px; margin: 0 auto; }
.site-alt-gruplar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 40px; }
.site-alt nav { display: flex; flex-direction: column; min-width: 0; }
.site-alt nav p { margin: 0 0 6px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #8fa0b8; }
.site-alt nav a { padding: 9px 0; color: #eef2f7; text-decoration: none; }
.site-alt nav a:hover { color: #7fd0f0; }
.site-alt-cift { padding: 0; color: #8fa0b8; }
.site-alt nav .site-alt-cift a { display: inline-block; padding: 9px 0; }
.site-alt-kunye { margin-top: 28px; padding-top: 22px; border-top: 1px solid #25344f; font-size: 13px; line-height: 1.65; color: #a9b5c6; }
.site-alt-kunye p { margin: 0; max-width: 860px; }
.site-alt-kunye .site-alt-sirket { margin-bottom: 8px; color: #eef2f7; }

@media (max-width: 860px) {
  .bolum.y-bolum { padding-top: 64px; }
  .y-bolum h2 { margin-bottom: 20px; }
  .y-ozel-uclu, .y-kartlar--uc { grid-template-columns: 1fr; gap: 12px; }
  .y-adimlar { grid-template-columns: 1fr; gap: 10px; }
  .y-adimlar li { display: flex; align-items: baseline; gap: 14px; padding: 14px 18px; }
  .y-adim-no { margin: 0; font-size: 20px; }
  .y-kart { padding: 18px 20px; }
  /* Tablo telefonda satır satır okunur: yana kaydırma yok */
  .y-tablo thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .y-tablo, .y-tablo tbody, .y-tablo tr, .y-tablo tbody th, .y-tablo tbody td { display: block; }
  .y-tablo tbody tr { padding: 12px 18px; border-bottom: 1px solid #eef1f5; }
  .y-tablo tbody tr:last-child { border-bottom: 0; }
  .y-tablo tbody th, .y-tablo tbody td { padding: 0; border: 0; white-space: normal; }
  .y-tablo tbody td { margin-top: 2px; font-size: 14px; }
  .y-sorular { padding: 2px 18px; }
  .site-alt { margin-top: 64px; padding-top: 36px; }
  .site-alt-gruplar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .y-adimlar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ══════════ C aşaması ══════════
   Yeni ana sayfa bölümleri (sayılar, "Bir gün, baştan sona", ilkeler, kullanıcı yorumları) ve ana sayfayla iç
   sayfaların ortak parçaları ("g-": tarihli terminal görüntüsü, iki düğme + deneme koşulu). Mevcut bölümlerin
   (kahraman, #akis, #ses, #hizmetler) hiçbir kuralına dokunulmaz. */

/* ── Ortak: gerçek terminal görüntüsü, tarihli alt yazısıyla ── */
.g-figur { margin: 0; min-width: 0; }
.g-figur img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid #1f2a3d; background: #0a0d13; box-shadow: 0 12px 28px rgba(15, 27, 45, .22); }
.g-figur figcaption { margin-top: 10px; font-size: 13px; line-height: 1.5; color: #4b5768; font-variant-numeric: tabular-nums; }
/* yalın tarayıcı çerçevesi: üstte üç noktalı ince çubuk */
.g-cerceve .g-cerceve-ust { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #1b2638; border: 1px solid #1f2a3d; border-bottom: 0; border-radius: 12px 12px 0 0; }
.g-cerceve .g-cerceve-ust i { width: 9px; height: 9px; border-radius: 50%; background: #48556b; }
.g-cerceve img { border-radius: 0 0 12px 12px; }

/* ── Ortak: tek birincil eylem, tek ikincil eylem; birincilin altında deneme koşulu ── */
.g-eylem { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.g-eylem--orta { justify-content: center; }
.g-kosul { flex: 1 1 100%; margin: 0; font-size: 13px; line-height: 1.5; color: #4b5768; }
.g-eylem--orta .g-kosul { text-align: center; }
.g-eylem--acik .g-kosul { color: #c3ccd9; }
.dugme.y-dugme { min-height: 48px; padding: 0 26px; font-size: 15px; font-weight: 500; }

/* ── Sayılar: yalnız hizmet belgesindeki rakamlar; ince dikey çizgiler, sabit genişlikli rakamlar ── */
.bolum.y-rakamlar { padding: 72px 0 0; }
.bolum.y-rakamlar--ust { padding-top: 44px; }
.y-rakam-sira { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.y-rakam-sira li { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 4px 24px; border-left: 1px solid rgba(15, 27, 45, .16); }
.y-rakam-sira li:first-child { padding-left: 0; border-left: 0; }
.y-rakam { font-size: clamp(36px, 4.2vw, 54px); font-weight: 300; line-height: 1.05; letter-spacing: -.01em; color: #0f1b2d; font-variant-numeric: tabular-nums; }
.y-rakam-ad { font-size: 12px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: #4b5768; }
.y-rakam-alt { font-size: 13px; line-height: 1.4; color: #4b5768; font-variant-numeric: tabular-nums; }

/* ── Bir gün, baştan sona: beş adım, ince bağlantı çizgisi; kartlar mevcut lacivert kart biçiminde ── */
.y-bolum .y-gun-giris { margin: -12px 0 28px; max-width: 720px; font-size: 16px; line-height: 1.6; color: #4b5768; }
.y-gun { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.y-gun::before { content: ""; position: absolute; left: 5px; right: 5px; top: 9px; border-top: 1px solid rgba(15, 27, 45, .24); }
.y-gun-adim { position: relative; display: flex; flex-direction: column; min-width: 0; }
.y-gun-ne { display: flex; align-items: baseline; gap: 8px; margin: 0 0 12px; padding-top: 28px; font-size: 13px; line-height: 1.4; color: #4b5768; }
.y-gun-ne::before { content: ""; position: absolute; left: 0; top: 4px; width: 11px; height: 11px; box-sizing: border-box; border-radius: 50%; background: #fff; border: 2px solid var(--kobalt); }
.y-gun-adim--bos .y-gun-ne::before { border: 1px dashed #6b7686; }
.y-gun-saat { font-weight: 500; color: #0f1b2d; font-variant-numeric: tabular-nums; }
.y-gun .demo-kartlar { flex: 1; display: flex; min-width: 0; }
.y-gun .demo-kartlar .card { flex: 1; width: auto; min-width: 0; margin: 0; }
.y-gun .demo-kartlar .card h4 { -webkit-line-clamp: 8; }
.y-bolum .demo-kartlar .card .time { font-variant-numeric: tabular-nums; }
/* köşeli ayraçlı yer tutucu: sahibinden beklenen gerçek örnek */
.y-yer { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 124px; padding: 16px; text-align: center; background: #e6eaef; border: 1px dashed #8a96a6; border-radius: 16px; font-size: 13px; line-height: 1.5; color: #3d4959; }
.y-gun-ek { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
/* dar telefonda (360 px'in altı) uzun yer tutucu satırı kutusunun içinde sarar; sayfayı ekrandan geniş yapmaz */
.y-yer.y-yer--satir { flex: 0 1 auto; min-width: 0; max-width: 100%; min-height: 0; padding: 6px 12px; border-radius: 10px; font-size: 12.5px; }

/* ── Nasıl çalışıyoruz?: üç ilke kutusu ve gerçek örnek kart ── */
.y-ilkeler { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.y-ilke-kutular { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.y-ilke-ornek { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.demo-kartlar.y-tek-kart .card { width: auto; margin: 0; }
.y-kart-not { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: #4b5768; font-variant-numeric: tabular-nums; }

/* ── Nasıl çalışır?: çerçeveli terminal görüntüsü ── */
.y-terminal { margin-top: 32px; max-width: 1080px; }

/* ── Kullanıcı yorumları (en az üç izinli gerçek yorum olunca görünür) ── */
.y-yorum { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.y-yorum blockquote { margin: 0; }
.y-yorum blockquote p { font-size: 16px; line-height: 1.6; color: #0f1b2d; }
.y-yorum figcaption { display: flex; flex-direction: column; gap: 4px; margin-top: auto; font-size: 13px; line-height: 1.5; color: #4b5768; }
.y-yorum-kim { font-weight: 500; color: #0f1b2d; }
.bolum.y-bolum--onizleme { padding-top: 16px; }

@media (max-width: 1100px) {
  /* beş adım yan yana sığmaz: dikey liste, çizgi solda */
  .y-gun { grid-template-columns: 1fr; gap: 18px; }
  .y-gun::before { left: 5px; right: auto; top: 6px; bottom: 6px; border-top: 0; border-left: 1px solid rgba(15, 27, 45, .24); }
  .y-gun-adim { padding-left: 30px; }
  .y-gun-ne { padding-top: 0; margin-bottom: 8px; }
  .y-gun-ne::before { top: 3px; }
  .y-yer { min-height: 72px; }
  .y-ilkeler { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .bolum.y-rakamlar { padding-top: 56px; }
  .bolum.y-rakamlar--ust { padding-top: 36px; }
  .y-rakam-sira { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 0; }
  .y-rakam-sira li { padding: 2px 16px; }
  .y-rakam-sira li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .y-ilke-kutular { grid-template-columns: 1fr; gap: 12px; }
  .g-eylem .dugme { flex: 1 1 100%; }
  .y-terminal { margin-top: 24px; }
}

/* Klavyeyle geriye doğru gezerken (Shift+Tab) yeni bölümlerdeki ve alt bilgideki bağlantılar sabit üst çubuğun
   arkasında kalmasın. Yalnız ana sayfanın yeni kısımları; sahibinin bölümlerine dokunmaz. */
.icerik .y-bolum a, .icerik .y-uyelik-bag a, .icerik ~ .site-alt a { scroll-margin-top: 84px; }

/* ── Alt bilgi: ödeme logoları satırı (12.10.2026, iyzico ölçütleri) ── */
/* Alt bilginin yeni son satırı: iyzico'nun logo bandı ve yanında kısa bir satır. Bant iyzico'nun kendi logo
   paketindeki tek dosyadır ("iyzico ile Öde", Mastercard, Visa, American Express, Troy; koyu zemin için beyaz
   sürüm, 456×32): kırpılmaz, renklendirilmez, dar ekranda oranını koruyarak küçülür. Paket yokken logoların yerinde
   köşeli ayraçlı yer tutucu durur. Mevcut alt bilgi kurallarına dokunulmadı; telefonda sabit alt çubuğun payı
   zaten .site-alt'ın alt boşluğundadır (ic.css). */
.site-alt-odeme { margin-top: 20px; padding-top: 18px; border-top: 1px solid #25344f; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.site-alt-odeme-bant { display: block; width: 456px; max-width: 100%; height: auto; }
.site-alt-odeme-not { margin: 0; font-size: 13px; line-height: 1.5; color: #a9b5c6; }
.site-alt-odeme-yer { margin: 0; padding: 6px 12px; border: 1px dashed #5d6f8c; border-radius: 8px; font-size: 13px; line-height: 1.5; color: #eef2f7; }

/* ── "Kaydol" düğmesi: içi şeffaf, çevresinde dönen mavi ışık (12.10.2026) ──────────────────────────────────────
   Sahibinin gönderdiği düğme örneğinin ("shiny-button", build/kaynak/2026-10-12-shiny-button.tsx) biçimi, düz CSS
   olarak, onun düzeltmeleriyle: düğmenin İÇİ DOLU DEĞİL, şeffaf ("arkası şeffaf olsun, gradyan dönsün, içinde fill
   olmasın"); ışık turuncu değil, sitenin kendi mavisi (kobalt). Önce yeşil istenmişti; şeffaf biçimi görünce "yeşil
   değil de bizim mavimiz olsun" dedi. Arkasında sayfanın kendi zemini görünür. Düğmenin ölçüsü ve yeri eskisi gibi.
     1. kenarda dönen parlak mavi yay ve onun dışa vuran ışığı (::before; yalnız kenar halkası çizilir)
     2. içeride, yayla birlikte dönen yumuşak mavi geçiş (::after; ortası açık kalır, yazının arkası temiz)
     3. üstüne gelince yay genişler ve alttan mavi yükselir
   Hareketi azaltmayı seçen okurda hiçbiri hareket etmez; yay sağ üstte durur.
   Yazı koyu laciverttir (açık zeminde); lacivert bandın üstündeki düğmede beyazdır.
   Ana sayfanın üst bölümündeki düğme sahibinin dondurulmuş sayfasındadır: işaretine dokunulmadı, burada yerinden
   seçilir (.kahraman .dugmeler > .dugme--ana). Diğer bütün "Kaydol" düğmeleri "kaydol" sınıfını taşır.
   ".kaydol" dört kez yazılı: ic.css'teki ".i-ana .dugme--acik.i-dugme" gibi üç sınıflı zemin kurallarını geçsin diye.
   var(…, yedek): özel özellik kaydını (@property) tanımayan eski tarayıcıda yay yerinde durur.
   (Örnekteki ince benekler yok: beyaz benekler açık sayfanın üstünde görünmez. İlk, dolu zeminli biçim
   build/kaldirilan/2026-10-12-kaydol-ilk-bicim-dolu-zemin.css dosyasında duruyor.) */
@property --kaydol-aci { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --kaydol-kayma { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --kaydol-pay { syntax: "<percentage>"; initial-value: 5%; inherits: false; }
@property --kaydol-parlak { syntax: "<color>"; initial-value: #1b4f8c; inherits: false; }
@property --kaydol-ic { syntax: "<color>"; initial-value: transparent; inherits: false; }
/* renkler: yazı ve ince halka zemine göre; ışık sitenin mavisi (kobalt #2A6EB7), yayın ortası bir ton koyusu */
:where(.kaydol, .kahraman .dugmeler > .dugme--ana) {
  --k-yazi: #0f1b2d; --k-halka: rgba(15, 27, 45, .2);
  --k-isik: #2a6eb7; --k-isik-koyu: #1b4f8c; --k-isik-yumusak: #7db4ec; --k-ic: rgba(42, 110, 183, .3); --k-gecis-renk: rgba(42, 110, 183, .5); --k-hale: rgba(42, 110, 183, .45);
  --k-sure: 3s; --k-gecis: .8s cubic-bezier(.25, 1, .5, 1);
}
/* lacivert bandın üstünde: yazı ve halka açık renk; mavi, koyu zeminde seçilsin diye bir ton açık, yayın ortası beyaz */
.dugme--acik.kaydol { --k-yazi: #fff; --k-halka: rgba(255, 255, 255, .32); --k-isik: #6fb0f0; --k-isik-koyu: #fff; --k-isik-yumusak: #d6e9fb; --k-ic: rgba(111, 176, 240, .34); --k-gecis-renk: rgba(111, 176, 240, .5); --k-hale: rgba(111, 176, 240, .5); }
:is(.kaydol.kaydol.kaydol.kaydol, .kahraman .dugmeler > .dugme--ana) {
  isolation: isolate; position: relative; overflow: visible;
  border: 1px solid transparent;
  background: transparent; /* içi dolu değil: sayfanın zemini görünür */
  color: var(--k-yazi);
  box-shadow: inset 0 0 0 1px var(--k-halka), inset 0 -.6ex 1.4rem 0 var(--kaydol-ic, transparent);
  transition: transform .2s, --kaydol-ic var(--k-gecis);
}
/* yay ve iç geçiş: her biri açıyı kendi üstünde döndürür (düğmeden miras alınan açı çizime yansımıyor).
   Geçişler "background-image" ile yazılı, kısa yazım "background" ile değil: ölçüldü, kısa yazımda dönen açı
   sözde öğenin çizimine ulaşmıyor (yay yerinde duruyor). */
:is(.kaydol.kaydol.kaydol.kaydol, .kahraman .dugmeler > .dugme--ana)::before, :is(.kaydol.kaydol.kaydol.kaydol, .kahraman .dugmeler > .dugme--ana)::after {
  content: ""; pointer-events: none; position: absolute; border-radius: inherit; z-index: -1;
  --kaydol-parlak: var(--k-isik-koyu);
  transition: --kaydol-kayma var(--k-gecis), --kaydol-pay var(--k-gecis), --kaydol-parlak var(--k-gecis);
  animation: kaydol-aci linear infinite var(--k-sure), kaydol-aci linear infinite calc(var(--k-sure) / .4) reverse paused;
  animation-composition: add;
}
/* kenar: dönen parlak yay. Yalnız 2 px'lik halka çizilir (ortası maskeyle açılır); ışığı dışa da vurur. */
:is(.kaydol.kaydol.kaydol.kaydol, .kahraman .dugmeler > .dugme--ana)::before {
  inset: -1px; padding: 2px;
  background-image: conic-gradient(from calc(var(--kaydol-aci, 0deg) - var(--kaydol-kayma, 0deg)), transparent, var(--k-isik) var(--kaydol-pay, 5%), var(--kaydol-parlak, #1b4f8c) calc(var(--kaydol-pay, 5%) * 2), var(--k-isik) calc(var(--kaydol-pay, 5%) * 3), transparent calc(var(--kaydol-pay, 5%) * 4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 3px var(--k-isik)) drop-shadow(0 0 7px var(--k-hale));
}
/* iç: yayla birlikte dönen yumuşak mavi geçiş; düğmenin ortası (yazının arkası) açık kalır */
:is(.kaydol.kaydol.kaydol.kaydol, .kahraman .dugmeler > .dugme--ana)::after {
  inset: 0;
  background-image: conic-gradient(from calc(var(--kaydol-aci, 0deg) - var(--kaydol-kayma, 0deg) - 24deg), transparent, var(--k-gecis-renk) calc(var(--kaydol-pay, 5%) * 2 + 6%), transparent calc(var(--kaydol-pay, 5%) * 4 + 14%));
  -webkit-mask-image: radial-gradient(farthest-side, transparent 30%, #000 100%);
  mask-image: radial-gradient(farthest-side, transparent 30%, #000 100%);
}
/* üstüne gelince (ve klavyeyle üstündeyken): yay genişler, ışık yumuşar, alttan mavi yükselir, dönüş yavaşlar */
:is(.kaydol.kaydol.kaydol.kaydol, .kahraman .dugmeler > .dugme--ana):is(:hover, :focus-visible) { --kaydol-ic: var(--k-ic); }
:is(.kaydol.kaydol.kaydol.kaydol, .kahraman .dugmeler > .dugme--ana):is(:hover, :focus-visible)::before, :is(.kaydol.kaydol.kaydol.kaydol, .kahraman .dugmeler > .dugme--ana):is(:hover, :focus-visible)::after { --kaydol-pay: 20%; --kaydol-kayma: 95deg; --kaydol-parlak: var(--k-isik-yumusak); animation-play-state: running; }
:is(.kaydol.kaydol.kaydol.kaydol, .kahraman .dugmeler > .dugme--ana):active { translate: 0 1px; }
@keyframes kaydol-aci { to { --kaydol-aci: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  :is(.kaydol.kaydol.kaydol.kaydol, .kahraman .dugmeler > .dugme--ana), :is(.kaydol.kaydol.kaydol.kaydol, .kahraman .dugmeler > .dugme--ana)::before, :is(.kaydol.kaydol.kaydol.kaydol, .kahraman .dugmeler > .dugme--ana)::after { animation: none !important; }
  :is(.kaydol.kaydol.kaydol.kaydol, .kahraman .dugmeler > .dugme--ana), :is(.kaydol.kaydol.kaydol.kaydol, .kahraman .dugmeler > .dugme--ana)::before, :is(.kaydol.kaydol.kaydol.kaydol, .kahraman .dugmeler > .dugme--ana)::after { transition: none; }
  :is(.kaydol.kaydol.kaydol.kaydol, .kahraman .dugmeler > .dugme--ana):is(:hover, :focus-visible) { --kaydol-ic: transparent; }
}
/* Telefonda üst çubuktaki düğme gizlidir (bu dosyanın başındaki ".ust .dugme--mavi": genişlik 0, yan kenarlık 0,
   taşan kırpılır). Yukarıdaki kurallar onu geri açmasın (2 px yer tutardı) ve görünmeyen düğme dönmesin. */
@media (max-width: 860px) {
  .ust .kaydol.kaydol.kaydol.kaydol { border-left-width: 0; border-right-width: 0; overflow: hidden; }
  .ust .kaydol.kaydol.kaydol.kaydol::before, .ust .kaydol.kaydol.kaydol.kaydol::after { display: none; }
}
/* Üyelik sayfası: ücretsiz seçeneklerde tek kutu kaldı (Demo); sıra iki sütun yerine tek kutu genişliğinde */
.i-paket-ucretsiz.i-paket-ucretsiz--tek { grid-template-columns: minmax(0, 1fr); max-width: 560px; } /* iki sınıf: sonra yüklenen paket.css kuralını geçsin */

/* ── Logo (12.10.2026): sahibinin gönderdiği logo ──────────────────────────────────────────────────────────────
   Üst çubukta logonun kuşu durur (eski küçük lacivert karonun yerinde); yanındaki "PiyasaKuşu" yazısı sitenin
   kendi yazısıdır: logonun gümüş "Kuşu" yazısı açık zeminde ve bu küçüklükte okunmuyor. Logonun tamamı alt
   bilgidedir: lacivert zemin, logonun çizildiği zemindir. Dosyalar: build/logo-hazirla.py → src/logo/. */
.marka img.marka-kus { width: auto; height: 40px; margin-block: -3px; border-radius: 0; } /* -3 px: üst çubuk eski karoyla aynı yükseklikte (66 px) kalsın */
.site-alt-logo { display: inline-block; margin-bottom: 30px; line-height: 0; border-radius: 6px; }
.site-alt-logo img { display: block; width: 168px; height: 120px; }
.site-alt-logo:focus-visible { outline: 2px solid #7fd0f0; outline-offset: 6px; }
@media (max-width: 860px) {
  .site-alt-logo { margin-bottom: 24px; }
  .site-alt-logo img { width: 140px; height: 100px; }
}