/* ── Web Sitelerimiz başlığı ── (tools/yama/abonelik-baslik.html, sayfa-uret.py abonelik_baslik): abonelikler.html.
   Kelime düz beyaz harf yollarıdır (tools/abonelik-kelime.mjs → tools/yama/abonelik-kelime.svg; Archivo 860, yarı dar), i'lerin noktası
   yuvarlak; sonda başlığın noktası (Turan mavisi). Kelime yere basar: logodaki üç çizgili sonsuzluk tabanında yatay bir ışık pisti olarak
   yatar ve pistin doğu ucu bu noktadır. Pist abonelik-baslik.js'te iki tuvale çizilir: .abb-isik harflerin arkasında, .abb-isik.on önünde.
   SVG kap genişliğine ölçeklenir, yüksekliği viewBox oranından gelir: her genişlikte tek satır, yerleşim kayması yok.
   Pistin ön yarısı kelimenin altına iner; alt satır onun altında başlar (pay kelimenin genişliğiyle orantılı: cqw).
   --pist-aci pistin eğimi (derece): betik buradan okur; dar ekranda biraz dik, ilmekler küçük kelimede de seçilsin. */
.abonelik-baslik { --pist-aci: 11; position: relative; container-type: inline-size; padding-bottom: clamp(30px, 3.4vw, 50px); }
.abb-kelime { position: relative; isolation: isolate; margin: 0; }
.abb-svg { position: relative; z-index: 1; display: block; width: 100%; height: auto; overflow: visible; }
.abb-harfler, .abb-inoktalar { fill: var(--murekkep); }
.abb-harfler { fill-rule: evenodd; }
.abb-son { fill: var(--turan); }
.abb-isik { position: absolute; z-index: 0; display: block; pointer-events: none; }
.abb-isik.on { z-index: 2; }
@media (max-width: 760px) { .abonelik-baslik { --pist-aci: 15; } }
@media (forced-colors: active) { .abb-harfler, .abb-inoktalar, .abb-son { fill: CanvasText; } .abb-isik { display: none; } }

/* altındaki satır: web vitrininde nasıl çalışır (üç adım: site türü → hizmetler → plan teklifi); genel katalogda tek cümle + plan bağlantısı.
   Üst payı pistin ön yarısına yer açar; fareyle eğilen halka bu satıra inerse ışık yazının arkasından geçer (z-index), yazı okunur kalır */
.abb-alt { position: relative; z-index: 3; display: flex; align-items: baseline; justify-content: space-between; gap: 12px 48px; margin-top: calc(5.2cqw + 10px); }
@media (max-width: 760px) { .abb-alt { margin-top: calc(7cqw + 12px); } }
.abb-cumle { margin: 0; color: #A7B3BE; font-size: clamp(15px, 1.25vw, 17.5px); line-height: 1.55; text-wrap: pretty; }
.abb-cumle a { color: var(--murekkep); text-decoration: none; background: linear-gradient(#ffffff40, #ffffff40) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; transition: color .2s, background-size .2s; }
.abb-cumle a:hover { color: var(--turan-parlak); background-image: linear-gradient(var(--turan), var(--turan)); }
/* cümlenin yanında ayrı WhatsApp düğmesi (sihirbaz.py → sihirbaz_alt; Yusuf 15.10.2026): Turan mavisi zemin, yazı ve simge beyaz */
.abb-alt:has(.abb-wa) { align-items: center; }
.abb-alt:has(.abb-wa) .abb-cumle { max-width: 62ch; }
.abb-wa { flex: none; display: inline-flex; align-items: center; gap: 12px; min-height: 54px; padding: 7px 20px 7px 8px; border-radius: 16px;
  background: var(--turan); color: #fff; font: 600 clamp(14.5px, 1.05vw, 16px)/1.25 'Archivo', sans-serif; letter-spacing: -.005em; text-decoration: none;
  box-shadow: 0 18px 40px -20px rgba(0, 163, 224, .9), inset 0 1px 0 rgba(255, 255, 255, .25); transition: background-color .25s, box-shadow .3s var(--egri); }
.abb-wa-simge { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: #25D366; transition: background-color .25s; }
.abb-wa-simge svg { width: 23px; height: 23px; fill: currentColor; }
.abb-wa .ok { width: 17px; height: 11px; flex: none; margin-left: 2px; transition: transform .25s var(--egri); }
.abb-wa:hover { background: var(--turan-parlak); box-shadow: 0 22px 44px -18px rgba(0, 163, 224, 1), inset 0 1px 0 rgba(255, 255, 255, .3); }
.abb-wa:hover .abb-wa-simge { background: #1EBE5A; }
.abb-wa:hover .ok { transform: translateX(3px); }
.abb-wa:focus-visible .abb-wa-simge { background: #1EBE5A; }
.abonelik-baslik .abb-wa:focus-visible { outline: 2px solid var(--turan-parlak); outline-offset: 3px; border-radius: 16px; }
@media (max-width: 760px) { .abb-wa { width: 100%; } .abb-wa-metin { flex: 1; } }
@media (prefers-reduced-motion: reduce) { .abb-wa, .abb-wa .ok { transition: none; } }
@media (forced-colors: active) { .abb-wa { border: 1px solid ButtonText; } }
.abb-plan { flex: none; display: inline-flex; align-items: baseline; gap: 6px; color: #C3CDD5; font-size: 14px; text-decoration: none; transition: color .2s; }
.abb-plan span { color: var(--turan-parlak); transition: transform .25s var(--egri); }
.abb-plan:hover { color: var(--murekkep); } .abb-plan:hover span { transform: translate(2px, -2px); }
/* üç adım: numara halkaları ince bir hatla birbirine bağlı; adım, ilgili bölüme iner (paketler, hizmetler, iletişim) */
.abb-adimlar { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px clamp(20px, 2.6vw, 44px); margin: 0; padding: 0; list-style: none; }
.abb-adimlar li { position: relative; min-width: 0; }
.abb-adimlar li:not(:last-child)::after { content: ''; position: absolute; top: 13px; left: 38px; right: calc(-1 * clamp(20px, 2.6vw, 44px) + 10px); height: 1px;
  background: linear-gradient(90deg, #00A3E066, #2B3843 60%, #1D2730); pointer-events: none; }
.abb-adimlar a { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; color: inherit; text-decoration: none; }
.abb-no { display: grid; place-items: center; width: 27px; height: 27px; margin-bottom: 9px; border: 1px solid #00A3E088; border-radius: 50%; background: var(--zemin);
  font: 500 11.5px/1 'JetBrains Mono', monospace; color: var(--turan-parlak); transition: background-color .25s, color .25s, border-color .25s; }
.abb-adimlar b { font: 600 15px/1.3 'Archivo', sans-serif; letter-spacing: -.01em; color: #EEF3F6; transition: color .2s; }
.abb-adim-metin { color: #8D9AA6; font-size: 13px; line-height: 1.5; text-wrap: pretty; }
.abb-adimlar a:hover .abb-no, .abb-adimlar a:focus-visible .abb-no { background: var(--turan); border-color: var(--turan); color: #fff; }
.abb-adimlar a:hover b { color: #fff; }
.abonelik-baslik a:focus-visible { outline: 2px solid var(--turan); outline-offset: 4px; border-radius: 2px; }
@media (max-width: 760px) {
  .abb-alt { flex-direction: column; align-items: flex-start; }
  .abb-adimlar { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .abb-adimlar li:not(:last-child)::after { top: 31px; bottom: -14px; left: 13px; right: auto; width: 1px; height: auto; background: linear-gradient(#00A3E066, #1D2730); }
  .abb-adimlar a { grid-template-columns: 27px minmax(0, 1fr); gap: 2px 14px; }
  .abb-no { grid-row: span 2; margin: 0; }
  .abb-adim-metin { font-size: 12.5px; }
}
/* menüdeki ya da başlıktaki "Web Sitelerimiz" bağlantısıyla paketlere inince kartlar hapların altında kalmasın */
#paketler { scroll-margin-top: 104px; }

/* ── Başlık hapı: Web Sitelerimiz ── (sayfa-uret.py abonelik_hap; yalnız bu iki sayfa)
   Sol hapta FLOVEY'in altındaki satır "Web Sitelerimiz"dir ve paketlere inen ayrı bir bağlantıdır (logo ana sayfaya gider).
   Ana sayfa bağlantısının içindeki görünmez kopya (.abk-yer, öbür sayfaların .sayfa-adi'siyle aynı yazı) hapın genişliğini ve iki
   satırlı düzeni ayırır; görünen bağlantı (.abk) tam onun üstüne oturur: sol = logo genişliği + 10 px (site.css: .marka-simge yüksekliği
   × viewBox oranı 2,3346 / 1,09 = 2,14183, .marka a aralığı 10 px), alt = kimlik sütununun altı.
   Yazı hapın yazı rengindedir (beyaz). Logo her turda maviye boyandığında (başlığın ışık pistinin boyandığı an) ve fareyle üzerine
   gelince yazının içinden bir kez renkli ışık geçer (.isil, abonelik-baslik.js); hareketi azaltta geçmez. */
.hap-sol .marka { position: relative; }
.abk-yer { visibility: hidden; }
.marka .abk { --pay-x: 6px; position: absolute; left: calc(clamp(26px, 2.2vw, 32px) * 2.14183 + 10px - var(--pay-x)); bottom: -8px; z-index: 1;
  padding: 4px var(--pay-x) 8px; border-radius: 8px; font: 550 11px/1.1 'Archivo', sans-serif; letter-spacing: .015em; white-space: nowrap; text-decoration: none;
  color: inherit; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(100deg, currentColor 0 36%, #7FDBFF 41%, #9D7BFF 46%, #FF6FB5 51%, #FFB04D 56%, currentColor 62% 100%) 100% 0 / 300% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.marka .abk.isil { animation: abk-isil 1.5s cubic-bezier(.45, .05, .2, 1) both; }
@keyframes abk-isil { from { background-position: 100% 0; } to { background-position: 0 0; } }
.ust .abk:focus-visible { outline-offset: -2px; }
@media (forced-colors: active) { .marka .abk { background: none; -webkit-text-fill-color: currentColor; } }