/* Sayfa başlıkları için ortak, hafif ve marka odaklı görsel sistem. */
.page-hero,.article-hero,.project-hero,.contact-page{position:relative;overflow:hidden;isolation:isolate}
.page-hero>.wrap,.article-hero>.wrap,.project-hero>.wrap,.contact-page>.wrap{position:relative;z-index:2}
.page-hero:before,.article-hero:before,.project-hero:before,.contact-page:before{content:"";position:absolute;z-index:-1;right:clamp(-150px,-5vw,-50px);top:50%;width:clamp(330px,34vw,590px);aspect-ratio:1;border-radius:50%;transform:translateY(-50%);border:1px solid currentColor;opacity:.16;box-shadow:0 0 0 58px transparent,0 0 0 59px currentColor,0 0 0 125px transparent,0 0 0 126px currentColor;animation:hero-orbit-drift 12s ease-in-out infinite}
.page-hero:after,.article-hero:after,.project-hero:after,.contact-page:after{content:"TW";position:absolute;z-index:-1;right:clamp(22px,8vw,145px);top:50%;transform:translateY(-50%) rotate(-8deg);font-size:clamp(80px,11vw,185px);line-height:1;font-weight:900;font-style:italic;letter-spacing:-.1em;color:var(--lime);opacity:.92;text-shadow:16px 18px 0 rgba(71,59,255,.7)}

/* Açık zeminlerde mor vurgu. */
.page-hakkimizda .page-hero:after,.page-contact .contact-page:after{color:var(--purple);text-shadow:14px 16px 0 rgba(8,11,8,.13)}
.page-hakkimizda .page-hero:before,.page-contact .contact-page:before{color:var(--ink)}

/* Hizmet sayfalarında kanal kartları hissi. */
.page-service .service-hero:after,.page-seo-danismanligi .service-hero:after,.page-google-ads .service-hero:after,.page-sosyal-medya-yonetimi .service-hero:after,.page-icerik-pazarlama .service-hero:after,.page-web-tasarim .service-hero:after{content:"↗";display:grid;place-items:center;width:clamp(145px,17vw,245px);aspect-ratio:1;background:var(--purple);color:var(--lime);font-size:clamp(75px,10vw,145px);text-shadow:none;right:clamp(35px,8vw,150px);box-shadow:18px 18px 0 rgba(168,245,53,.13)}

/* Blog ve projelerde editoryal numara/damga. */
.page-blog .blog-hero:after{content:"01"}.page-projeler .projects-hero:after{content:"02"}
.page-sss .faq-hero:after{content:"?";font-style:normal}
.page-kvkk-aydinlatma-metni .legal-hero:after,.page-gizlilik-politikasi .legal-hero:after,.page-cerez-politikasi .legal-hero:after{content:"✓";font-style:normal;opacity:.42}

/* Metin görselin altında kalmasın; uzun başlıklarda görsel arkaya çekilir. */
.page-hero h1,.article-hero h1,.project-hero h1{max-width:min(76%,1050px)}
.page-hero>div>p:last-child,.article-hero>div>p,.project-hero>div>p:last-child{max-width:min(66%,760px)}
.page-hakkimizda .page-hero h1,.page-hizmetlerimiz .page-hero h1,.page-sss .faq-hero h1{max-width:72%}

@keyframes hero-orbit-drift{0%,100%{transform:translateY(-50%) rotate(0) scale(1)}50%{transform:translateY(-52%) rotate(7deg) scale(1.035)}}
@media(max-width:900px){.page-hero:before,.article-hero:before,.project-hero:before,.contact-page:before{right:-190px;opacity:.1}.page-hero:after,.article-hero:after,.project-hero:after,.contact-page:after{right:25px;opacity:.25}.page-hero h1,.article-hero h1,.project-hero h1,.page-hakkimizda .page-hero h1,.page-hizmetlerimiz .page-hero h1,.page-sss .faq-hero h1{max-width:92%}.page-hero>div>p:last-child,.article-hero>div>p,.project-hero>div>p:last-child{max-width:82%}}
@media(max-width:560px){.page-hero:before,.article-hero:before,.project-hero:before,.contact-page:before{width:270px;right:-185px}.page-hero:after,.article-hero:after,.project-hero:after,.contact-page:after{font-size:80px;right:18px;top:28%;opacity:.16}.page-service .service-hero:after,.page-seo-danismanligi .service-hero:after,.page-google-ads .service-hero:after,.page-sosyal-medya-yonetimi .service-hero:after,.page-icerik-pazarlama .service-hero:after,.page-web-tasarim .service-hero:after{display:none}.page-hero h1,.article-hero h1,.project-hero h1,.page-hakkimizda .page-hero h1,.page-hizmetlerimiz .page-hero h1,.page-sss .faq-hero h1{max-width:100%}.page-hero>div>p:last-child,.article-hero>div>p,.project-hero>div>p:last-child{max-width:100%}}
@media(prefers-reduced-motion:reduce){.page-hero:before,.article-hero:before,.project-hero:before,.contact-page:before{animation:none}}