/* abonelikler.html'in alt kısmı (yapı tools/yama/abonelik_hizmetler.py + abonelik-hizmetler.html, metinler assets/abonelik-hizmetler.json,
   davranış assets/abonelik-hizmetler.js). Sitenin koyu dili: siyah zemin, beyaz kalın Archivo, ince #1D2730 çizgiler, yumuşak renkli ışık.
   Eski "Diğer aboneliklerimiz" (beş kart) 14.10.2026'da kalktı; buradan yalnız ortak eylem düğmesi (.ah-eylem) kaldı.
   Paneliniz cebinizde (.pa): dört hikâye, her biri kendi renginde (--pa-renk). Sahneler [data-pa-sahne]: varsayılan kurallar SON hâldir
      (a1…aN üretimde yazılı); betik oynatırken .calisiyor ekler, adımı data-adim ve a1…aN ile sürer, adımı gelen öğeye .acik, yalnız o adımdaki
      öğeye .su-an verir. Sohbet: gönderilecek mesaj giriş alanında yazılır (.su-an), sonra balon olur; asistan önce "yazıyor", sonra balon;
      en son sonuç kartı değişir. Hareketi azaltta ve betiksiz sahneler bitmiş hâliyle görünür. */

/* ortak eylem düğmesi (.ah-eylem; Paneliniz cebinizde'nin tek eylemi) */
.ah-eylem { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; padding: 0 18px;
  border: 1px solid color-mix(in srgb, var(--ah-renk) 50%, #22303A); border-radius: 12px; background: color-mix(in srgb, var(--ah-renk) 11%, #0A1116);
  color: #fff; font: 600 15px/1.2 'Archivo', sans-serif; text-decoration: none; transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s; }
.ah-eylem .ok { flex: none; width: 20px; height: 12px; transition: transform .3s var(--egri); }
.ah-eylem:hover { border-color: var(--ah-renk); background: var(--ah-renk); color: #04121A; }
.ah-eylem:hover .ok { transform: translateX(3px); }
.ah-eylem:focus-visible { outline: 2px solid var(--ah-renk); outline-offset: 3px; }
.ah-eylem-dolu { min-height: 54px; padding: 0 22px; border-color: var(--ah-renk); background: var(--ah-renk); color: #04121A; font-size: 16px;
  box-shadow: 0 14px 40px -16px color-mix(in srgb, var(--ah-renk) 80%, transparent); }
.ah-eylem-dolu:hover { background: color-mix(in srgb, var(--ah-renk) 82%, #fff); }

/* ================= 2. Paneliniz cebinizde: telefon uygulaması ve yapay zekâ asistanı ================= */
.pa { --pa-cizgi: #1D2730; --pa-metin: #A6B2BC; position: relative; min-width: 0; margin: clamp(96px, 10vw, 170px) 0 clamp(72px, 8vw, 128px);
  padding-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--pa-cizgi); scroll-margin-top: 96px; }
.pa-ust { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: end; gap: 18px clamp(36px, 5vw, 96px); }
.pa-baslik { margin: 0; font: 650 clamp(40px, 5.2vw, 88px)/.98 'Archivo', sans-serif; font-stretch: 92%; letter-spacing: -.048em; color: #F5F8FA; text-wrap: balance; }
.pa-baslik em, .pa-h em { font: italic 400 1.1em/.8 'Instrument Serif', Georgia, serif; font-stretch: normal; letter-spacing: -.01em; padding-right: .03em; }
.pa-baslik em { color: var(--turan-parlak); }
.pa-metin { margin: 0 0 .4em; max-width: 40ch; color: var(--pa-metin); font: 400 clamp(16px, 1.25vw, 19px)/1.6 'Archivo', sans-serif; text-wrap: pretty; }

.pa-hikayeler { display: grid; gap: clamp(80px, 9vw, 150px); margin-top: clamp(64px, 7vw, 120px); }
.pa-hikaye { --pa-renk: var(--turan); position: relative; display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); align-items: center; gap: 40px clamp(36px, 5vw, 96px); }
.pa-hikaye:nth-child(even) { grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); }
.pa-hikaye:nth-child(even) .pa-yazi { order: 2; }
.pa-yazi { min-width: 0; }
.pa .pa-h { margin: 0; font: 650 clamp(34px, 3.6vw, 60px)/1.02 'Archivo', sans-serif; font-stretch: 94%; letter-spacing: -.045em; color: #F5F8FA; text-wrap: balance; }
.pa-h em { color: var(--pa-renk); }
.pa-satir { margin: 20px 0 0; max-width: 34ch; color: #B8C3CC; font: 400 clamp(17px, 1.35vw, 20px)/1.55 'Archivo', sans-serif; text-wrap: pretty; }
.pa-sahne { position: relative; min-width: 0; padding-bottom: 44px; }
.pa-sahne::before { content: ''; position: absolute; inset: -6% -4% 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 48%, color-mix(in srgb, var(--pa-renk) 16%, transparent), transparent 72%); }

/* durdur / oynat (WCAG 2.2.2): sahnenin sağ alt köşesinde küçük, sessiz; betik yokken ve hareketi azaltta gizli */
.pa-dur { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid #22303A; border-radius: 50%;
  background: #0A1116cc; color: #8D9AA6; cursor: pointer; transition: color .2s, border-color .2s; }
.pa-dur[hidden] { display: none; }
.pa-dur svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pa-dur .o { display: none; } .pa-dur[aria-pressed="true"] .o { display: block; } .pa-dur[aria-pressed="true"] .d { display: none; }
.pa-dur:hover { color: #fff; border-color: #3A4C59; }
.pa-dur:focus-visible { outline: 2px solid var(--pa-renk); outline-offset: 3px; }

/* geçişi kapatıp hâli anında uygulamak için (betik: sabitle) */
[data-pa-sahne].sabit, [data-pa-sahne].sabit * { transition: none !important; animation: none !important; }

/* ---------- sohbet: telefon çerçevesi ve sonuç kartı ---------- */
.pa-sohbet { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 2.6vw, 40px); }
.pa-sohbet p { margin: 0; }
.pa-tel { position: relative; display: flex; flex: none; flex-direction: column; width: 312px; height: 600px; padding: 18px 14px 14px; border: 1.5px solid #2E3B46; border-radius: 46px;
  background: #070B0F; box-shadow: inset 0 0 0 6px #0B1117, 0 40px 90px -40px color-mix(in srgb, var(--pa-renk) 60%, transparent); }
.pa-tel-ust { display: flex; align-items: center; gap: 11px; padding: 12px 8px 14px; border-bottom: 1px solid #141D24; }
.pa-tel-ust > span:last-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pa-tel-ust b { color: #fff; font: 650 16px/1.1 'Archivo', sans-serif; }
.pa-tel-ust small { color: #8D9AA6; font-size: 12.5px; line-height: 1.1; }
.pa-tel-avatar { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--pa-renk) 85%, #fff), color-mix(in srgb, var(--pa-renk) 60%, #000)); }
.pa-tel-avatar svg { width: 17px; height: 17px; fill: #fff; }
.pa-mesajlar { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; gap: 10px; min-height: 0; margin: 0; padding: 14px 4px; overflow: hidden; list-style: none; }
.pa-m { display: flex; }
.pa-m.ben { justify-content: flex-end; }
.pa-balon { max-width: 86%; padding: 11px 15px; border-radius: 20px; font: 400 16.5px/1.38 'Archivo', sans-serif; text-wrap: pretty; }
.pa-m.ben .pa-balon { border-bottom-right-radius: 6px; background: var(--pa-renk); color: #04121A; font-weight: 500; }
.pa-m.yz .pa-balon { border: 1px solid #1E2A33; border-bottom-left-radius: 6px; background: #121C24; color: #EEF3F6; }
.pa-yaziyor { display: none; align-self: flex-start; gap: 5px; padding: 15px 16px; border: 1px solid #1E2A33; border-radius: 20px 20px 20px 6px; background: #121C24; }
.pa-yaziyor i { width: 7px; height: 7px; border-radius: 50%; background: #8D9AA6; }
.pa-reklam { display: flex; align-self: flex-end; align-items: center; gap: 10px; max-width: 88%; margin-bottom: -4px; padding: 8px 12px 8px 8px; border: 1px solid #1E2A33; border-radius: 16px; background: #0B1218; }
.pa-reklam-gorsel { flex: none; width: 44px; height: 44px; border-radius: 10px; background: linear-gradient(140deg, color-mix(in srgb, var(--pa-renk) 80%, #fff), color-mix(in srgb, var(--pa-renk) 40%, #0B1218)); }
.pa-reklam > span:last-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pa-reklam small { color: #8D9AA6; font-size: 12px; line-height: 1.2; }
.pa-reklam b { color: #fff; font: 600 14px/1.2 'Archivo', sans-serif; }
.pa-giris { display: flex; align-items: flex-end; gap: 10px; min-height: 50px; padding: 8px 8px 8px 16px; border: 1px solid #1E2A33; border-radius: 25px; background: #0B1218; }
.pa-ipucu, .pa-giris-yazi { flex: 1; min-width: 0; padding-bottom: 7px; font: 400 15px/1.35 'Archivo', sans-serif; }
.pa-ipucu { color: #55636F; }
.pa-giris-yazi { display: none; color: #F5F8FA; }
.pa-gonder { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #1A252E; transition: background-color .25s; }
.pa-gonder svg { width: 16px; height: 16px; fill: #8D9AA6; transition: fill .25s; }

.pa-sonuc { flex: none; width: 300px; padding: 18px; border: 1px solid #1E2A33; border-radius: 24px; background: linear-gradient(180deg, #0B1318, #080D11);
  box-shadow: 0 40px 80px -56px color-mix(in srgb, var(--pa-renk) 70%, transparent); }
.pa-sonuc .pa-sonuc-ust { margin-bottom: 10px; color: #A6B2BC; font: 600 14px/1.2 'Archivo', sans-serif; }
.pa-sonuc u { display: block; height: 7px; border-radius: 4px; background: #1A262F; text-decoration: none; }

/* menü: ürünün fiyatı değişir */
.pa-menu-satir { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 12px; border-top: 1px solid #141D24; }
.pa-menu-satir u:first-child { width: 48%; } .pa-menu-satir u:last-child { width: 18%; }
.pa-menu .pa-menu-ana { border: 1px solid color-mix(in srgb, var(--pa-renk) 55%, #1E2A33); border-radius: 14px; background: color-mix(in srgb, var(--pa-renk) 11%, #0A1116); transition: background-color .5s, border-color .5s; }
.pa-menu-ana > span:first-child { color: #fff; font: 650 19px/1 'Archivo', sans-serif; }
.pa-menu-ana + .pa-menu-satir { border-top: 0; }
.pa-tutar { display: inline-flex; align-items: baseline; gap: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pa-tutar s { color: #6F7E8A; font: 500 14px/1 'Archivo', sans-serif; }
.pa-tutar b { color: var(--pa-renk); font: 700 22px/1 'Archivo', sans-serif; letter-spacing: -.02em; }

/* bekleyen işler: sayılar, sıralanmamış siparişler, gruplar */
.pa-sayilar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.pa-sayilar p { padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--pa-renk) 40%, #1E2A33); border-radius: 14px; background: color-mix(in srgb, var(--pa-renk) 8%, #0A1116); transition: opacity .5s, border-color .5s; }
.pa-sayilar b { display: block; color: var(--pa-renk); font: 700 30px/1 'Archivo', sans-serif; }
.pa-sayilar span { display: block; margin-top: 6px; color: #C3CDD5; font-size: 13.5px; line-height: 1.25; }
.pa-sonuc-ust span { color: var(--pa-renk); }
.pa-yigin { display: none; flex-wrap: wrap; gap: 6px; padding: 10px 2px 12px; }
.pa-yigin i, .pa-taslar i { display: block; width: 17px; height: 14px; border-radius: 4px; }
.pa-yigin i { background: #2A3742; }
.pa-yigin i:nth-child(3n) { transform: rotate(-8deg) translateY(2px); } .pa-yigin i:nth-child(3n+1) { transform: rotate(6deg); } .pa-yigin i:nth-child(4n) { transform: translateY(-3px); }
.pa-grup { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid #141D24; }
.pa-grup-ad { color: #DCE6EE; font: 500 14px/1.2 'Archivo', sans-serif; }
.pa-taslar { display: flex; flex-wrap: wrap; gap: 4px; }
.pa-taslar i { background: color-mix(in srgb, var(--pa-renk) 62%, #0B1218); transition: opacity .4s, transform .5s var(--egri); }
.pa-grup b { color: #fff; font: 650 16px/1 'Archivo', sans-serif; font-variant-numeric: tabular-nums; transition: opacity .4s; }

/* randevu: panele yeni randevu düşer */
.pa-randevu-yeni { margin-bottom: 8px; padding: 14px; border: 1px solid color-mix(in srgb, var(--pa-renk) 55%, #1E2A33); border-radius: 16px;
  background: radial-gradient(120% 80% at 0 0, color-mix(in srgb, var(--pa-renk) 16%, transparent), transparent 70%), #0A1218; }
.pa-randevu-baslik { color: var(--pa-renk); font: 600 13.5px/1 'Archivo', sans-serif; }
.pa-randevu-kim { display: flex; align-items: center; gap: 10px; margin-top: 12px !important; }
.pa-bas { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--pa-renk) 26%, #0A1116); color: #fff; font: 650 15px/1 'Archivo', sans-serif; }
.pa-randevu-kim > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.pa-randevu-kim b { color: #fff; font: 600 16px/1.1 'Archivo', sans-serif; }
.pa-randevu-kim small { color: #A6B2BC; font-size: 13px; }
.pa-randevu-zaman { margin-top: 12px !important; color: #fff; font: 700 22px/1 'Archivo', sans-serif; letter-spacing: -.02em; }
.pa-randevu-kaynak { margin-top: 8px !important; color: #8D9AA6; font-size: 13px; }
.pa-randevu-satir { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; border-top: 1px solid #141D24; }
.pa-randevu-satir u:first-child { width: 46%; } .pa-randevu-satir u:last-child { width: 22%; }

/* ---------- sohbetin adımları (yalnız betik oynatırken) ---------- */
.pa-sohbet.calisiyor .pa-m:not(.acik) { display: none; }
.pa-sohbet.calisiyor .pa-m.acik { animation: pa-balon .5s var(--egri) both; }
.pa-sohbet.calisiyor .pa-yaziyor.su-an { display: flex; animation: pa-balon .35s var(--egri) both; }
.pa-sohbet.calisiyor .pa-yaziyor i { animation: pa-nokta .9s ease-in-out infinite; }
.pa-sohbet.calisiyor .pa-yaziyor i:nth-child(2) { animation-delay: .15s; } .pa-sohbet.calisiyor .pa-yaziyor i:nth-child(3) { animation-delay: .3s; }
.pa-giris-yazi.su-an { display: block; }
.pa-giris:has(.su-an) { border-color: color-mix(in srgb, var(--pa-renk) 60%, #1E2A33); }
.pa-giris:has(.su-an) .pa-ipucu { display: none; }
.pa-giris:has(.su-an) .pa-gonder { background: var(--pa-renk); }
.pa-giris:has(.su-an) .pa-gonder svg { fill: #04121A; }
.pa-giris-yazi.su-an::after { content: ''; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: var(--pa-renk); animation: pa-kursor .9s steps(1) infinite; }
/* menü: önce eski fiyat, sonra yenisi gelir (eskisi üstü çizili kalır) */
.pa-sohbet.calisiyor .pa-menu-ana:not(:has(.acik)) { border-color: #1E2A33; background: #0A1116; }
.pa-sohbet.calisiyor .pa-tutar:not(.acik) s { color: #F5F8FA; font-size: 20px; font-weight: 650; text-decoration: none; }
.pa-sohbet.calisiyor .pa-tutar:not(.acik) b { display: none; }
.pa-sohbet.calisiyor .pa-tutar.acik b { animation: pa-yeni .8s var(--egri) both; }
/* siparişler: önce yığın, sonra gruplara dağılır */
.pa-sohbet.calisiyor .pa-sayilar p:not(.acik) { opacity: .28; border-color: #1E2A33; }
.pa-sohbet.calisiyor .pa-sayilar p.acik { transition-delay: calc(var(--k) * .25s); }
.pa-sohbet.calisiyor .pa-siparis:not(:has(.pa-grup.acik)) .pa-yigin { display: flex; }
.pa-sohbet.calisiyor .pa-grup:not(.acik) .pa-taslar i { opacity: 0; transform: translate(-18px, -26px) rotate(-10deg); }
.pa-sohbet.calisiyor .pa-grup:not(.acik) b { opacity: 0; }
.pa-sohbet.calisiyor .pa-grup.acik .pa-taslar i { transition-delay: calc(var(--k) * .07s + .3s); }
.pa-sohbet.calisiyor .pa-grup.acik b { transition-delay: 1.2s; }
/* randevu */
.pa-sohbet.calisiyor .pa-randevu-yeni:not(.acik) { display: none; }
.pa-sohbet.calisiyor .pa-randevu-yeni.acik { animation: pa-kart .8s var(--egri) both; }
@keyframes pa-balon { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pa-nokta { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }
@keyframes pa-kursor { 50% { opacity: 0; } }
@keyframes pa-yeni { 0% { opacity: 0; transform: translateY(12px) scale(.8); } 60% { opacity: 1; transform: scale(1.12); text-shadow: 0 0 18px var(--pa-renk); } 100% { transform: none; } }
@keyframes pa-kart { 0% { opacity: 0; transform: translateY(-16px) scale(.96); box-shadow: none; } 60% { opacity: 1; box-shadow: 0 0 34px -6px var(--pa-renk); } 100% { transform: none; } }

/* ---------- telefon uygulaması ve asistan her panelde dahil: tek eylem (sihirbaza) ---------- */
.pa-eylem { display: flex; justify-content: center; margin: clamp(64px, 7vw, 110px) 0 0; }

@media (prefers-reduced-motion: reduce) {
  .ah-eylem, .ah-eylem .ok { transition: none; }
  .ah-eylem:hover .ok { transform: none; }
}

/* ---------- düzenler ---------- */
@media (max-width: 1100px) {
  .pa-hikaye, .pa-hikaye:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .pa-hikaye:nth-child(even) .pa-yazi { order: 0; }
  .pa-satir { max-width: 52ch; }
}
@media (max-width: 899px) {
  .pa-ust { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .pa-sohbet { flex-direction: column; gap: 18px; }
  .pa-sonuc { width: min(100%, 340px); }
}
@media (max-width: 400px) {
  .pa-tel { width: min(100%, 312px); height: 580px; padding: 16px 12px 12px; border-radius: 42px; }
  .pa-balon { font-size: 16px; }
  .pa-eylem .ah-eylem { width: 100%; justify-content: center; }
}

/* ================= aynı panel her cihazda (.fa, SVG; eski farkımız A, web-farkimiz.css'ten taşındı) =================
   Bilgisayarda canlı site, önde telefonda ve tablette aynı panel: telefonda duyuru yazılıp yayınlanır → sitede ve tablette çıkar; tabletten
   "Pazar günü" açılır → sitede çalışma saati değişir, telefon da güncellenir. Dar ekranda betik viewBox'ı data-pa-dar yapar ve .dar ekler. */
.fa { display: block; width: 100%; height: auto; overflow: visible; }
.fa text { font-family: 'Archivo', sans-serif; }
.fa-govde { fill: #0A1116; stroke: #26343F; stroke-width: 1.2; }
.fa-ekran { fill: #05080B; stroke: #141E26; }
.fa-ayak { fill: #0A1116; stroke: #26343F; }
.fa-bar { fill: #091015; }
.fa-ayrac { fill: none; stroke: #18232C; }
.fa-tuy { fill: #22303A; }
.fa-adres { fill: #0F181F; }
.fa-kilit { fill: none; stroke: #5F7180; stroke-width: 1.1; }
.fa-adres-yazi { font-size: 10px; fill: #8D9AA6; }
.fa-logo { fill: none; stroke: #7FD3FF; stroke-width: 1.6; stroke-linecap: round; }
.fa-marka { font-size: 11.5px; font-weight: 650; fill: #DCE9F1; }
.fa-cizgi { fill: #1A252E; }
.fa-h1 { font-size: 25px; font-weight: 700; letter-spacing: -.035em; fill: #F5F8FA; }
.fa-dugme { fill: none; stroke: #00A3E0; stroke-width: 1.3; }
.fa-dugme-yazi { font-size: 10px; font-weight: 600; fill: #7FD3FF; text-anchor: middle; }
.fa-gorsel { fill: #0B141B; stroke: #1A252E; }
.fa-dag { fill: #17293A; } .fa-dag2 { fill: #102030; }
.fa-gunes { fill: #E2C792; opacity: .85; }
.fa-ikon { fill: none; stroke: #7F8E9A; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.fa-saat { font-size: 12px; transition: opacity .5s var(--egri); }
.fa-saat-eski { fill: #8D9AA6; opacity: 0; }
.fa-saat-yeni { fill: #7FD3FF; font-weight: 650; }
.fa-saat-isik { fill: #00A3E0; opacity: .14; transition: opacity .5s; }
.fa-soluk { font-size: 12px; fill: #8D9AA6; }
.fa-kartcik { fill: #0A1218; stroke: #18232C; }
.fa-duyuru-yazi { font-size: 12.5px; font-weight: 650; fill: #fff; text-anchor: middle; }
.fa-parilti { opacity: 0; }
/* sitenin gövdesi duyuru gelince aşağı kayar; duyuru üstten iner */
.fa-site { transform: translateY(28px); transition: transform .8s var(--egri); }
.fa-duyuru { transition: transform .8s var(--egri); }
.fa:not(.a3) .fa-site { transform: none; }
.fa:not(.a3) .fa-duyuru { transform: translateY(-30px); }
.fa:not(.a6) .fa-saat-yeni, .fa:not(.a6) .fa-saat-isik { opacity: 0; }
.fa:not(.a6) .fa-saat-eski { opacity: 1; }

/* telefon ve tablet: aynı panel */
.fa-centik { fill: #0A1116; }
.fa-p-baslik { font-size: 12.5px; font-weight: 700; fill: #F5F8FA; }
.fa-p-alt { font-size: 9.5px; fill: #7F8E9A; }
.fa-avatar { fill: #13222D; stroke: #26343F; }
.fa-p-etiket { font-size: 9.5px; fill: #8D9AA6; }
.fa-alan { fill: #0B1319; stroke: #22303A; stroke-width: 1.1; transition: stroke .3s; }
.fa-alan-ipucu { font-size: 10.5px; fill: #55636F; opacity: 0; transition: opacity .12s; }
.fa-alan-yazi { font-size: 10.5px; font-weight: 500; fill: #F5F8FA; transition: opacity .4s; }
.fa-kursor { fill: #19B4EE; opacity: 0; }
.fa-p-satir { font-size: 10.5px; fill: #DCE9F1; }
.fa-anahtar rect { fill: #00A3E0; transition: fill .3s; }
.fa-anahtar circle { fill: #fff; transform: translateX(10px); transition: transform .35s var(--egri), fill .3s; }
.fa-yayinda { transition: opacity .4s; }
.fa-yayinda path { fill: none; stroke: #19B4EE; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fa-yayinda text { font-size: 9.5px; font-weight: 600; fill: #7FD3FF; }
.fa-yayinla { fill: #00A3E0; transform-box: fill-box; transform-origin: center; }
.fa-yayinla-yazi { font-size: 11px; font-weight: 650; fill: #fff; text-anchor: middle; pointer-events: none; }
.fa-cubuk { fill: #2A3843; }
.fa-yan { fill: #081015; }
.fa-yan-ikon { fill: #1A252E; } .fa-yan-ikon.on { fill: #00A3E0; }
.fa-tik { fill: none; stroke: #BDEBFF; stroke-width: 1.6; opacity: 0; transform-box: fill-box; transform-origin: center; }
.fa-nabiz path { fill: none; stroke-linecap: round; stroke-dasharray: 18 100; stroke-dashoffset: 18; opacity: 0; }
.fa-nabiz-hale { stroke: #00A3E0; stroke-width: 9; }
.fa-nabiz-cekirdek { stroke: #CFF1FF; stroke-width: 2.4; }

/* dar dizilişte (telefon; betik viewBox'ı data-fk-dar'a çevirip .dar ekler) telefon ve tablet bilgisayarın altında yan yana durur:
   çizim büyür, yazılar okunur kalır; ışığın yolları da o dizilişin yollarıdır */
.fa .fa-dar, .fa.dar .fa-genis { display: none; }
.fa.dar .fa-dar { display: inline; }
.fa.dar .fa-telefon { transform: translate(140px, 226px); }
.fa.dar .fa-tablet { transform: translate(-146px, 264px); }
.fa.dar .fa-isik { transform: translateY(110px); }

/* adımlar: telefon (1 yazı, 2 Yayınla, 3 eşitleme), tablet (4 anahtar, 5 Yayınla, 6 eşitleme) */
.fa:not(.a1) .fa-ipucu-tel { opacity: 1; }
.fa:not(.a3) .fa-ipucu-tab { opacity: 1; }
.fa:not(.a3) .fa-yazi-tab { opacity: 0; }
.fa:not(.a3) .fa-yayinda-tel, .fa:not(.a6) .fa-yayinda-tab { opacity: 0; }
.fa:not(.a4) .fa-anahtar-tab rect, .fa:not(.a6) .fa-anahtar-tel rect { fill: #1C2731; }
.fa:not(.a4) .fa-anahtar-tab circle, .fa:not(.a6) .fa-anahtar-tel circle { transform: none; fill: #8D9AA6; }
.fa.calisiyor[data-adim="1"] .fa-alan-tel { stroke: #19B4EE; }
.fa.calisiyor[data-adim="1"] .fa-kursor { animation: fa-kursor .9s steps(1) infinite; }
.fa.calisiyor[data-adim="1"] .fa-tik-1, .fa.calisiyor[data-adim="2"] .fa-tik-2,
.fa.calisiyor[data-adim="4"] .fa-tik-3, .fa.calisiyor[data-adim="5"] .fa-tik-4 { animation: fa-tik .8s var(--egri) both; }
.fa.calisiyor[data-adim="2"] .fa-yayinla-tel, .fa.calisiyor[data-adim="5"] .fa-yayinla-tab { animation: fa-bas .5s var(--egri); }
.fa.calisiyor[data-adim="2"] .fa-nabiz-tel path, .fa.calisiyor[data-adim="5"] .fa-nabiz-tab path { animation: fa-nabiz 1s cubic-bezier(.45, 0, .25, 1) .12s both; }
.fa.calisiyor[data-adim="2"] .fa-nabiz-tel .fa-nabiz-hale, .fa.calisiyor[data-adim="5"] .fa-nabiz-tab .fa-nabiz-hale { animation-name: fa-nabiz-hale; }
.fa.calisiyor[data-adim="3"] .fa-parilti { animation: fa-parilti 1.3s ease-out .35s both; }
.fa.calisiyor[data-adim="3"] .fa-alan-tab, .fa.calisiyor[data-adim="6"] .fa-anahtar-tel rect { animation: fa-parla 1.4s ease-out; }
.fa.calisiyor[data-adim="6"] .fa-saat-isik { animation: fa-vurgu 1.6s ease-out both; }
@keyframes fa-kursor { 50% { opacity: 1; } }
@keyframes fa-tik { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes fa-bas { 40% { transform: scale(.94); } }
@keyframes fa-nabiz { 0% { opacity: 0; stroke-dashoffset: 18; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -100; } }
@keyframes fa-nabiz-hale { 0% { opacity: 0; stroke-dashoffset: 18; } 12% { opacity: .28; } 88% { opacity: .28; } 100% { opacity: 0; stroke-dashoffset: -100; } }
@keyframes fa-parilti { 0% { opacity: 1; transform: translateX(-130px); } 100% { opacity: 1; transform: translateX(450px); } }
@keyframes fa-parla { 0% { stroke: #7FD3FF; fill: #12324A; } 100% { } }
@keyframes fa-vurgu { 0% { opacity: .5; } 100% { opacity: .14; } }