/* Takvio Arooth teması: ortak bileşenler (tanıtım sayfaları) */
body { font-family: 'Poppins', sans-serif; color: #111827; background: #fff; }
.font-display, h1, h2, h3 { font-family: 'Instrument Sans', 'Poppins', sans-serif; font-weight: 400; letter-spacing: -0.025em; }
section[id] { scroll-margin-top: 110px; }

/* Etiket hapı (Arooth "About Us" rozeti) */
.tag { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #F1E4D6; background: #fff; border-radius: 999px; padding: 7px 16px; font-size: 13px; color: #C2410C; }
.tag svg { width: 15px; height: 15px; }
.chip { display: inline-block; border: 1px solid #E9D9C8; border-radius: 999px; padding: 6px 14px; font-size: 12px; letter-spacing: .03em; text-transform: uppercase; color: #334155; background: #fff; }

/* Dev kayan yazı */
.mq { overflow: hidden; white-space: nowrap; }
.mq-track { display: inline-flex; gap: 40px; animation: mq 60s linear infinite; padding-right: 40px; }
@keyframes mq { to { transform: translateX(-50%); } }

/* Hero görseli: turuncu-lacivert cam küre */
.orb { position: relative; aspect-ratio: 1; border-radius: 32px; overflow: hidden; background: radial-gradient(120% 90% at 30% 20%, #FFE4CC 0%, #FDBA74 28%, #F97316 52%, #1F2A3C 86%, #111827 100%); }
.orb::before { content: ""; position: absolute; inset: -20%; background: conic-gradient(from 200deg at 60% 55%, rgba(255,255,255,0) 0deg, rgba(255,255,255,.55) 40deg, rgba(255,255,255,0) 90deg, rgba(255,255,255,0) 360deg); filter: blur(30px); animation: spin 14s linear infinite; }
.orb::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.08) 0 2px, transparent 2px 22px); mix-blend-mode: overlay; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Hizmet akordeonu */
.svc summary { list-style: none; cursor: pointer; }
.svc summary::-webkit-details-marker { display: none; }
.svc .dot { width: 10px; height: 10px; border-radius: 50%; background: #F97316; opacity: 0; transition: opacity .2s; }
.svc[open] .dot { opacity: 1; }
.svc[open] .svc-title { color: #C2410C; }
.svc .plus { transition: transform .25s; }
.svc[open] .plus { transform: rotate(45deg); }
.faq summary { list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq[open] .plus { transform: rotate(45deg); }
.faq .plus { transition: transform .25s; }

.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.visible { opacity: 1; transform: none; }
/* GSAP devredeyken görünürlüğü GSAP yönetir */
.gs .reveal { opacity: 1; transform: none; transition: none; }
.lift { transition: transform .3s ease, box-shadow .3s ease; }
.lift:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -24px rgba(17,24,39,.3); }
.arrow-btn { width: 30px; height: 30px; border-radius: 999px; background: #F97316; color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: transform .2s; }
a:hover > .arrow-btn { transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } .mq-track, .orb::before { animation: none; } }

/* ===== Efektler ===== */
/* Hero başlığı: kelime maskesi */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-top: .14em; margin-top: -.14em; padding-bottom: .1em; margin-bottom: -.1em; }
.w > span { display: inline-block; will-change: transform; }

/* Butonlarda yazı kaydırma */
.roll { display: inline-flex; flex-direction: column; overflow: hidden; height: 1.5em; line-height: 1.5em; vertical-align: middle; }
.roll > span { transition: transform .5s cubic-bezier(.65,0,.35,1); }
a:hover .roll > span { transform: translateY(-100%); }

/* Ok: çapraz çıkış, yenisi girer */
.arrow-btn.arrow-2 { position: relative; overflow: hidden; }
.arrow-btn.arrow-2 svg { transition: transform .45s cubic-bezier(.65,0,.35,1); }
.arrow-btn.arrow-2 svg + svg { position: absolute; transform: translate(-170%, 170%); }
a:hover .arrow-btn.arrow-2 { transform: none; }
a:hover .arrow-btn.arrow-2 svg:first-child { transform: translate(170%, -170%); }
a:hover .arrow-btn.arrow-2 svg + svg { transform: translate(0, 0); }

/* Kartlar: yukarı kalkma */
#surec li, #paketler .grid > div, main a.group.block, #urunler a.lift { transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s cubic-bezier(.2,.8,.2,1); }
#surec li:hover, #paketler .grid > div:hover, main a.group.block:hover { transform: translateY(-6px); box-shadow: 0 28px 50px -30px rgba(17,24,39,.35); }

/* Hizmet ızgarası: alttan dolan arka plan */
nav[aria-label="Hizmetler"] a { background-image: linear-gradient(#FFF4EA, #FFF4EA); background-repeat: no-repeat; background-position: bottom; background-size: 100% 0; transition: background-size .45s cubic-bezier(.2,.8,.2,1); }
nav[aria-label="Hizmetler"] a:hover { background-size: 100% 100%; }
nav[aria-label="Hizmetler"] a > span:last-child { transition: transform .35s ease, color .2s; }
nav[aria-label="Hizmetler"] a:hover > span:last-child { transform: translateX(4px); }

/* Akordeon gövdesi */
details.svc > div, details.faq > p { will-change: height; }

/* İmleç balonu */
.fx-cursor { position: fixed; left: 0; top: 0; z-index: 70; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 999px; background: #F97316; color: #fff; font-size: 13px; font-weight: 500; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transform: scale(0); box-shadow: 0 16px 40px -12px rgba(249,115,22,.6); }
@media (prefers-reduced-motion: reduce) { .roll > span, .arrow-btn.arrow-2 svg { transition: none; } }

/* ===== Büyüyen banner (Arooth "after banner") ===== */
.bnr { position: relative; padding: 24px 8px 0; }
.bnr-letters { display: flex; align-items: center; justify-content: center; }
.bnr-l { display: none; }
.bnr-box { position: relative; width: 100%; min-height: 560px; border-radius: 32px; overflow: hidden; }
.bnr-inner { position: absolute; inset: 0; }
.bnr-bg { position: absolute; inset: 0; background: radial-gradient(90% 80% at 75% 20%, rgba(249,115,22,.55) 0%, rgba(249,115,22,0) 55%), radial-gradient(70% 70% at 10% 100%, rgba(253,186,116,.25), transparent 60%), #111827; }
.bnr-bg::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 26px); }
.bnr-content { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); padding: 0 6vw; z-index: 1; }
.bnr-ticker { position: absolute; left: 0; right: 0; bottom: 28px; z-index: 1; color: #fff; font-family: 'Instrument Sans', sans-serif; font-size: clamp(28px, 4vw, 56px); line-height: 1.2; }
.bnr-ticker .mq-track { animation-duration: 40s; }
.bnr-ticker i { color: #FDBA74; } .bnr-ticker b { font-weight: 500; color: #F97316; }
/* Masaüstü + GSAP: sabitlenmiş sahne */
.bnr-on .bnr { height: 330vh; padding: 0; }
.bnr-on .bnr-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.bnr-on .bnr-l { display: inline-block; overflow: hidden; font-family: 'Instrument Sans', sans-serif; font-size: 19vw; line-height: .9; letter-spacing: -.04em; color: #111827; }
.bnr-on .bnr-l > span { display: inline-block; }
.bnr-on .bnr-box { flex: none; min-height: 0; width: 24vw; height: 27vh; border-radius: 999px; margin-left: 1vw; }
.bnr-on .bnr-content, .bnr-on .bnr-ticker { opacity: 0; }
.bnr-on .bnr-content { width: 100vw; padding: 0 8vw; }
.bnr-on .bnr-ticker { width: 100vw; }

/* Butonlar: karakter karakter kayma */
.roll > span > i { display: inline-block; font-style: normal; white-space: pre; transition: transform .5s cubic-bezier(.65,0,.35,1); transition-delay: calc(var(--i) * 14ms); }
.roll > span { transition: none !important; }
a:hover .roll > span { transform: none !important; }
a:hover .roll > span > i { transform: translateY(-100%); }

/* Sayaç rakamları */
.dg { display: inline-block; height: 1em; line-height: 1; overflow: hidden; vertical-align: top; }
.dg > span { display: flex; flex-direction: column; }

/* ===== Hero 3D sahne ===== */
.hx { position: relative; aspect-ratio: 1; border-radius: 32px; overflow: hidden; perspective: 1100px;
  background: radial-gradient(80% 70% at 50% 40%, #233149 0%, #111827 70%); box-shadow: 0 40px 80px -30px rgba(249,115,22,.5); }
.hx-glow { position: absolute; inset: 0; background: radial-gradient(45% 40% at 50% 46%, rgba(249,115,22,.55), transparent 70%), radial-gradient(30% 30% at 80% 15%, rgba(253,186,116,.25), transparent 70%); animation: hxPulse 6s ease-in-out infinite; }
.hx-stage { position: absolute; left: 50%; top: 44%; width: 62%; aspect-ratio: 1; transform: translate(-50%,-50%) rotateX(62deg); transform-style: preserve-3d; }
.hx-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(253,186,116,.55); box-shadow: 0 0 24px rgba(249,115,22,.35), inset 0 0 24px rgba(249,115,22,.25); animation: hxSpin 18s linear infinite; }
.hx-ring.r2 { inset: 12%; border-color: rgba(255,255,255,.35); animation-duration: 12s; animation-direction: reverse; transform: rotateY(55deg); }
.hx-ring.r3 { inset: -10%; border-style: dashed; border-color: rgba(255,255,255,.18); animation-duration: 30s; }
.hx-core { position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; transform: translate(-50%,-50%) rotateX(-62deg); border-radius: 30%;
  background: linear-gradient(145deg, rgba(255,255,255,.28), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(10px);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.5); display: grid; place-items: center; animation: hxFloat 5s ease-in-out infinite; }
.hx-core img { width: 72%; filter: drop-shadow(0 6px 16px rgba(249,115,22,.5)); }
.hx-orbit { position: absolute; left: 50%; top: 44%; width: 0; height: 0; animation: hxSpin 24s linear infinite; }
.hx-ic { position: absolute; transform: rotate(var(--a)) translateX(min(38vw, 210px)) rotate(calc(-1 * var(--a))); }
.hx-ic i { display: grid; place-items: center; width: 54px; height: 54px; margin: -27px; border-radius: 16px; color: #fff;
  background: linear-gradient(145deg, rgba(249,115,22,.95), rgba(234,88,12,.75)); border: 1px solid rgba(255,255,255,.4);
  box-shadow: 0 14px 30px -10px rgba(249,115,22,.7), inset 0 1px 0 rgba(255,255,255,.5); animation: hxSpin 24s linear infinite reverse; }
.hx-ic:nth-child(even) i { background: linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.06)); backdrop-filter: blur(8px); }
.hx-ic svg { width: 24px; height: 24px; }
@media (max-width: 640px) { .hx-ic { transform: rotate(var(--a)) translateX(31vw) rotate(calc(-1 * var(--a))); } .hx-ic i { width: 42px; height: 42px; margin: -21px; border-radius: 12px; } .hx-ic svg { width: 19px; height: 19px; } }
@keyframes hxSpin { to { rotate: 360deg; } }
@keyframes hxFloat { 50% { margin-top: -10px; } }
@keyframes hxPulse { 50% { opacity: .7; } }

/* ===== Banner harfleri: gradient + imleç ===== */
.bnr-on .bnr-l { letter-spacing: 0; color: transparent; }
.bnr-on .bnr-l > span { padding: 0 .045em; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: radial-gradient(circle var(--r, 0px) at var(--mx, -999px) var(--my, -999px), #f97316 0%, rgba(249,115,22,0) 100%), linear-gradient(90deg, #1e293b 0%, #1e293b 25%, #f97316 100%);
  background-size: 100% 100%, var(--bw, 100%) 100%; background-position: 0 0, var(--bx, 0) 0; background-repeat: no-repeat; }
html.dark .bnr-on .bnr-l > span { background-image: radial-gradient(circle var(--r, 0px) at var(--mx, -999px) var(--my, -999px), #f97316 0%, rgba(249,115,22,0) 100%), linear-gradient(90deg, #f1f5f9 0%, #cbd5e1 25%, #f97316 100%); }

/* ===== Banner 3D küp ===== */
.bnr-3d { position: absolute; right: 9vw; top: 50%; width: 220px; height: 220px; margin-top: -110px; perspective: 900px; }
.b3-cube { position: absolute; inset: 0; transform-style: preserve-3d; animation: b3Rot 16s linear infinite; }
.b3-cube i { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 28px; color: #fff;
  background: linear-gradient(145deg, rgba(249,115,22,.85), rgba(249,115,22,.25)); border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(6px);
  box-shadow: inset 0 0 40px rgba(255,255,255,.12); }
.b3-cube i:nth-child(even) { background: linear-gradient(145deg, rgba(255,255,255,.2), rgba(255,255,255,.04)); }
.b3-cube svg { width: 42%; height: 42%; }
.b3-cube .f1 { transform: translateZ(110px); } .b3-cube .f2 { transform: rotateY(90deg) translateZ(110px); }
.b3-cube .f3 { transform: rotateY(180deg) translateZ(110px); } .b3-cube .f4 { transform: rotateY(-90deg) translateZ(110px); }
.b3-cube .f5 { transform: rotateX(90deg) translateZ(110px); } .b3-cube .f6 { transform: rotateX(-90deg) translateZ(110px); }
.b3-shadow { position: absolute; left: 10%; right: 10%; bottom: -90px; height: 30px; border-radius: 50%; background: radial-gradient(rgba(249,115,22,.45), transparent 70%); filter: blur(8px); }
@keyframes b3Rot { from { transform: rotateX(-22deg) rotateY(0); } to { transform: rotateX(-22deg) rotateY(360deg); } }
@media (max-width: 1023px) { .bnr-3d { display: none; } }

@media (prefers-reduced-motion: reduce) { .hx-glow, .hx-ring, .hx-core, .hx-orbit, .hx-ic i, .b3-cube { animation: none !important; } }