/* ---------- İllüstrasyonlar: renkler, çizgiler, hareket ---------- */
.art { display: block; overflow: visible; }
.art * { transform-box: fill-box; transform-origin: center; }
.art .o { stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.art-icon .o { stroke-width: 2.6; }
.art-spark { width: 1.6rem; height: 1.6rem; }
.art-spark .o { stroke-width: 1.7; }

.f-ink { fill: var(--ink); } .f-white { fill: #fff; } .f-paper { fill: var(--paper); }
.f-cobalt { fill: var(--cobalt); } .f-coral { fill: var(--coral); } .f-lemon { fill: var(--lemon); }
.f-mint { fill: var(--mint); } .f-lilac { fill: var(--lilac); }

/* Dron */
.art-drone .arm-o { stroke: var(--ink); stroke-width: 9; stroke-linecap: round; fill: none; }
.art-drone .arm-f { stroke: var(--lemon); stroke-width: 4; stroke-linecap: round; fill: none; }
.blade { fill: rgba(15, 17, 21, 0.16); stroke: var(--ink); stroke-width: 2.5; }
.led, .tally { animation: blink 1.4s steps(1) infinite; }
.gimbal { transform-origin: 50% 0; animation: tilt 4s ease-in-out infinite alternate; }
.drone-bob, .mini-bob { animation: bob 2.8s ease-in-out infinite alternate; }
.blade { animation: blade 0.12s linear infinite alternate; }
.b2 { animation-delay: -0.06s; }

/* Klaket */
.clap-arm { transform-box: view-box; transform-origin: 24px 43px; animation: clap 5s ease-in-out infinite; }

/* Makaralar */
.reel-spin { animation: spin 16s linear infinite; }
.reel-l { animation: spin 12s linear infinite; }
.reel-r { animation: spin 12s linear infinite reverse; }

/* Maskot */
.art-mascot { --ex: 0; --ey: 0; }
.art-mascot .iris { transform: translate(calc(var(--ex) * 0.55px), calc(var(--ey) * 0.55px)); transition: transform 0.15s ease-out; }
.art-mascot .pupil { transform: translate(calc(var(--ex) * 0.45px), calc(var(--ey) * 0.45px)); transition: transform 0.15s ease-out; }
.art-mascot .lid { transform-origin: 50% 0; transform: scaleY(0); animation: lid 5.5s ease-in-out infinite; }

/* Güneş, parıltı, bulut, uçak */
.sun-rays { animation: spin 48s linear infinite; }
.sun-rays rect { transform-box: view-box; transform-origin: 100px 100px; }
.spark { animation: twinkle 2.6s ease-in-out infinite; }
.s2 { animation-delay: -0.9s; } .s3 { animation-delay: -1.7s; }
.art-spark { animation: twinkle 2.8s ease-in-out infinite; }
.art-plane { animation: float 3.6s ease-in-out infinite alternate; }

/* Hizmet ikonları */
.eq { transform-origin: 50% 100%; animation: eq 1s ease-in-out infinite alternate; }
.e2 { animation-duration: 0.8s; animation-delay: -0.3s; } .e3 { animation-duration: 0.9s; animation-delay: -0.6s; }
.wave { animation: wave 1.8s ease-in-out infinite; } .w2 { animation-delay: 0.2s; } .w3 { animation-delay: 0.4s; }
.win { fill: #fff; animation: win 3.2s steps(1) infinite; } .wb { animation-delay: -1s; } .wc { animation-delay: -2s; }
.flash { animation: flash 3.2s ease-out infinite; }
.playhead { animation: scan 3.4s linear infinite alternate; }
.line { stroke-dasharray: 44; stroke-dashoffset: 44; animation: write 3.4s ease-in-out infinite; } .l2 { animation-delay: 0.5s; } .l3 { animation-delay: 1s; }
.pen { animation: wiggle 1.2s ease-in-out infinite alternate; }

/* Süreç ikonları */
.dot { animation: hop 1.2s ease-in-out infinite; } .d2 { animation-delay: 0.15s; } .d3 { animation-delay: 0.3s; }
.fr { animation: frin 4s ease-out infinite; } .fr2 { animation-delay: 0.5s; } .fr3 { animation-delay: 1s; } .fr4 { animation-delay: 1.5s; }
.focus { animation: focus 2.4s ease-in-out infinite; }
.prog { transform-origin: 0 50%; animation: fillbar 3s ease-in-out infinite; }
.up { animation: bobup 1.5s ease-in-out infinite alternate; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { from { transform: translateY(0) rotate(-1.5deg); } to { transform: translateY(-9px) rotate(1.5deg); } }
@keyframes blade { from { transform: scaleX(1); } to { transform: scaleX(0.35); } }
@keyframes blink { 50% { opacity: 0.2; } }
@keyframes tilt { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes clap { 0% { transform: rotate(0); } 8% { transform: rotate(-26deg); } 62% { transform: rotate(-26deg); } 69% { transform: rotate(0); } 73% { transform: rotate(-8deg); } 77%, 100% { transform: rotate(0); } }
@keyframes lid { 0%, 90% { transform: scaleY(0); } 93% { transform: scaleY(1); } 97%, 100% { transform: scaleY(0); } }
@keyframes twinkle { 0%, 100% { transform: scale(0.65) rotate(0); opacity: 0.55; } 50% { transform: scale(1.12) rotate(12deg); opacity: 1; } }
@keyframes float { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-10px) rotate(3deg); } }
@keyframes eq { from { transform: scaleY(0.3); } to { transform: scaleY(1); } }
@keyframes wave { 0%, 100% { opacity: 0.2; } 40% { opacity: 1; } }
@keyframes win { 0% { fill: #fff; } 50% { fill: var(--lemon); } }
@keyframes flash { 0% { transform: scale(0.2); opacity: 0; } 12% { transform: scale(1.35); opacity: 1; } 30% { transform: scale(1); opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes scan { from { transform: translateX(-24px); } to { transform: translateX(24px); } }
@keyframes write { 0% { stroke-dashoffset: 44; } 40%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 44; } }
@keyframes wiggle { from { transform: translate(-3px, 0) rotate(-4deg); } to { transform: translate(3px, -4px) rotate(2deg); } }
@keyframes hop { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-7px); } }
@keyframes frin { 0% { transform: scale(0.4); opacity: 0; } 12%, 80% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes focus { 0%, 100% { transform: scale(0.88); } 50% { transform: scale(1.12); } }
@keyframes fillbar { from { transform: scaleX(0.06); } to { transform: scaleX(1); } }
@keyframes bobup { from { transform: translateY(0); } to { transform: translateY(-5px); } }

@media (prefers-reduced-motion: reduce) {
  .art, .art * { animation: none !important; transition: none !important; }
}

/* =====================================================================
   Çizgi film katmanı: kalın çizgi, sert gölge, noktalı defter zemini
   ===================================================================== */
:root { --bw: 3px; --hard: 6px 6px 0 var(--ink); --hard-sm: 4px 4px 0 var(--ink); }
::selection { background: var(--lemon); color: var(--ink); }
body { background-image: radial-gradient(rgba(15, 17, 21, 0.1) 1.3px, transparent 1.4px); background-size: 28px 28px; }

/* Gezinme ve butonlar */
.nav { border: var(--bw) solid var(--ink); box-shadow: var(--hard-sm); background: rgba(255, 255, 255, 0.94); }
.nav-links a:hover, .nav-links a[aria-current="true"] { background: var(--lemon); color: var(--ink); }
.nav-links .nav-cta { border: var(--bw) solid var(--ink); background: var(--coral); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); transition: transform 0.15s, box-shadow 0.15s; }
.nav-links .nav-cta:hover { background: var(--coral); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.btn { border: var(--bw) solid var(--ink); box-shadow: var(--hard-sm); transition: transform 0.15s, box-shadow 0.15s, background-color 0.2s; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn-cobalt { background: var(--cobalt); color: #fff; }
.btn-line { background: #fff; color: var(--ink); border-color: var(--ink); }
.btn-line:hover { background: var(--lemon); color: var(--ink); }
.btn-lemon { border-color: var(--ink); }
.chip { border-width: var(--bw); background: #fff; }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* Kartlar */
.reel, .hero-reel, .hero-art, .portrait { border: var(--bw) solid var(--ink); box-shadow: var(--hard); }
.reel:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); }
.hero-reel:hover { transform: none; box-shadow: var(--hard); }
.svc, .steps li, .quote { border: var(--bw) solid var(--ink); box-shadow: var(--hard); transition: transform 0.2s, box-shadow 0.2s; }
.svc:hover, .steps li:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); }
.facts > div { border: var(--bw) solid var(--ink); box-shadow: var(--hard-sm); }
.companies li, .skills li { border: var(--bw) solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.skills li { background: #fff; transition: transform 0.15s, background-color 0.2s; }
.skills li:hover { background: var(--lemon); color: var(--ink); transform: translate(-2px, -2px) rotate(-1deg); }
.player { border: var(--bw) solid var(--ink); }
.field input, .field select, .field textarea { border: var(--bw) solid var(--ink); }
.contact-panel { position: relative; border: 4px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); }
.contact-panel :focus-visible { outline-color: var(--lemon); }
.form-summary { border: var(--bw) solid var(--ink); }

/* Başlık altı el yazısı çizgi (kaydırınca çizilir) */
.section h2::after {
  content: ""; display: block; width: 7.5rem; height: 0.95rem; margin-top: 0.55rem; transform-origin: left center;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'%3E%3Cpath d='M3 8 Q17 0 30 7 T58 7 T86 7 T116 6' fill='none' stroke='%233b4bff' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / contain;
}
.contact-panel h2::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'%3E%3Cpath d='M3 8 Q17 0 30 7 T58 7 T86 7 T116 6' fill='none' stroke='%23ffd23f' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .section h2::after { transform: scaleX(0); transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s; }
  .section h2.in::after { transform: scaleX(1); }
}

/* ---------- Açılış sahnesi ---------- */
.hero { position: relative; padding-bottom: clamp(5.5rem, 12vw, 9.5rem); }
.hero > .wrap { position: relative; z-index: 1; }
.sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.cloud { position: absolute; left: 0; width: clamp(6rem, 11vw, 10rem); }
.cl1 { top: 3%; animation: drift 85s linear infinite -22s; }
.cl2 { top: 13%; width: clamp(5rem, 8vw, 8rem); animation: drift 120s linear infinite -80s; }
.cl3 { bottom: 15%; animation: drift 100s linear infinite -48s; }
.sp { position: absolute; }
.sp1 { left: 44%; top: 18%; } .sp2 { right: 2.5%; top: 52%; } .sp3 { left: 51%; bottom: 20%; } .sp4 { left: 3%; bottom: 17%; }
.sp2 .art-spark { animation-delay: -0.8s; } .sp3 .art-spark { animation-delay: -1.5s; } .sp4 .art-spark { animation-delay: -2.1s; }
.hills { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 0; height: clamp(4rem, 9vw, 8rem); pointer-events: none; }
.hills .art { width: 100%; height: 100%; }

.hero-name i { display: inline-block; font-style: normal; }
.deco { position: absolute; z-index: 4; pointer-events: none; translate: calc(var(--mx, 0) * 14px) calc(var(--my, 0) * 9px); transition: translate 0.25s ease-out; }
.deco-drone { left: -3.6rem; top: -1.6rem; width: clamp(7.5rem, 14.5vw, 12rem); }
.deco-sun { position: absolute; top: -2.4rem; right: -1.6rem; width: clamp(6.5rem, 11vw, 9.5rem); z-index: 0; translate: calc(var(--mx, 0) * -8px) calc(var(--my, 0) * -6px); }
.hero-reel { z-index: 1; }
.hero-reel .reel-meta { left: 7.4rem; right: 10rem; }
.deco-clapper { left: -1.8rem; bottom: -0.2rem; width: clamp(5rem, 8vw, 6.5rem); rotate: -9deg; }
.deco .art { width: 100%; height: auto; }
@media (max-width: 59.99rem) {
  .deco-drone { left: 0.1rem; top: -1.3rem; width: 6.3rem; }
  .deco-clapper { left: 0.2rem; width: 4.5rem; }
  .deco-sun { top: -1.8rem; right: -0.4rem; width: 5.5rem; }
  .hero-reel .reel-meta { left: 5.8rem; right: 7rem; }
  .stamp { width: 6.4rem; height: 6.4rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .deco-sun .art { animation: sunrise 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s both; }
  .deco-drone { animation: flyin 1.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.9s both; }
  .deco-clapper { animation: popin 0.75s cubic-bezier(0.3, 1.5, 0.5, 1) 1.55s both; }
  .stamp { animation: popin 0.7s cubic-bezier(0.3, 1.5, 0.5, 1) 1.2s both; }
  .stamp > svg { animation: spin 22s linear infinite; }
  .stamp-dot { animation: pulse 1.8s ease-in-out infinite; }
  .hero-name.is-split { animation: none; }
  .hero-name.is-split i { animation: letter 0.8s cubic-bezier(0.2, 0.9, 0.3, 1.15) both; animation-delay: calc(var(--i) * 38ms + 0.1s); }
}
@keyframes drift { from { transform: translateX(-14rem); } to { transform: translateX(calc(100vw + 4rem)); } }
@keyframes sunrise { from { transform: translateY(75%) scale(0.85); opacity: 0; } }
@keyframes flyin { from { transform: translate(38vw, -9vh) rotate(14deg) scale(0.65); opacity: 0; } }
@keyframes popin { from { transform: scale(0.2) rotate(-35deg); opacity: 0; } }
@keyframes letter { from { opacity: 0; transform: translateY(0.6em) rotate(8deg); } }

/* Hizmet ve süreç kartlarındaki çizimler */
.svc-art { display: grid; place-items: center; width: 4.75rem; height: 4.75rem; padding: 0.55rem; background: #fff; border: var(--bw) solid var(--ink); border-radius: 20px; box-shadow: var(--hard-sm); rotate: -4deg; margin-bottom: var(--s2); }
.svc:nth-child(even) .svc-art { rotate: 3deg; }
.svc-art .art { width: 100%; height: 100%; }
.steps li { padding-top: var(--s5); }
.step-art { display: block; width: 5.5rem; height: 5.5rem; margin-bottom: var(--s2); }
.step-art .art { width: 100%; height: 100%; }
.step-no { position: absolute; top: 1rem; right: 1rem; margin: 0; border: var(--bw) solid var(--ink); }

/* Hakkımda: maskot */
.portrait-art { position: relative; display: grid; place-items: end center; overflow: hidden; border-radius: 32px; padding: 4rem 0 0; background: linear-gradient(var(--lemon) 0 70%, var(--mint) 70% 100%); }
.portrait-art .art-mascot { position: relative; z-index: 1; width: 112%; max-width: none; height: auto; margin-bottom: -0.2rem; }
.mascot-bubble { position: absolute; top: 1.1rem; left: 1.1rem; z-index: 2; background: #fff; border: var(--bw) solid var(--ink); border-radius: 18px 18px 18px 4px; padding: 0.4rem 0.95rem; font-weight: 700; font-size: 0.95rem; box-shadow: 3px 3px 0 var(--ink); }
.mascot-cloud { position: absolute; top: 3.8rem; right: -1.5rem; width: 7rem; animation: drift-s 18s ease-in-out infinite alternate; }
@keyframes drift-s { to { transform: translateX(-2.5rem); } }

/* İletişim: kâğıt uçak */
.contact-art { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.contact-panel > .contact-text, .contact-panel > .form { position: relative; z-index: 1; }
.plane { position: absolute; top: -2.6rem; right: 2.2rem; width: clamp(5rem, 9vw, 7.5rem); rotate: 12deg; }
.csp { position: absolute; }
.csp1 { top: 1.3rem; left: 46%; } .csp2 { bottom: 1.6rem; right: 40%; }
.csp .art-spark { width: 1.4rem; height: 1.4rem; }
.reel-deco { position: absolute; bottom: -2.2rem; left: 2rem; width: 5rem; }
.contact-panel.sent .plane { animation: fly-away 1.5s cubic-bezier(0.5, 0, 0.8, 0.4) forwards; }
.contact-panel.back .plane { animation: plane-back 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes fly-away { to { transform: translate(52vw, -40vh) rotate(-16deg) scale(0.45); opacity: 0; } }
@keyframes plane-back { from { transform: translate(-30vw, 10vh) scale(0.5); opacity: 0; } }

/* Altbilgi: film şeridi */
.filmstrip { height: 26px; background: var(--ink); position: relative; overflow: hidden; margin-bottom: var(--s5); }
.filmstrip::before { content: ""; position: absolute; inset: 6px 0; background: linear-gradient(90deg, var(--paper) 14px, transparent 14px) 0 0 / 30px 100% repeat-x; border-radius: 2px; animation: strip 5s linear infinite; }
@keyframes strip { to { background-position: 30px 0; } }

/* Ekran dışındaki çizimler duraklar (pil ve işlemci tasarrufu) */
/* SVG alt öğelerinin dönüşümleri ana iş parçacığında çizilir: yalnızca ekrandayken oynat */
.art, .art * { animation-play-state: paused; }
.art.is-on, .art.is-on * { animation-play-state: running; }
.cloud { animation-play-state: paused; }
.cloud.is-on { animation-play-state: running; }

@media (prefers-reduced-motion: reduce) {
  .filmstrip::before, .cloud, .mascot-cloud { animation: none !important; }
  .cl1 { left: 8%; } .cl2 { left: 52%; } .cl3 { left: 30%; }
  .deco-sun .art, .deco, .stamp, .stamp > svg, .stamp-dot, .plane { animation: none !important; }
}

@media (max-width: 59.99rem) {
  .cl1, .cl2, .sp1, .sp3 { display: none; }
}

/* Açılıştaki ana videonun canlı önizlemesi (4:5 kartı 16:9 video ile doldurur) */
.hero-embed { position: absolute; top: 0; left: 50%; z-index: -1; height: 100%; width: auto; aspect-ratio: 16 / 9; transform: translateX(-50%); border: 0; pointer-events: none; opacity: 0; transition: opacity 0.9s ease; }
.hero-embed.is-ready { opacity: 1; }

/* ---------- 404 sayfası ---------- */
.lost { position: relative; min-height: 100svh; display: grid; align-content: center; justify-items: center; gap: var(--s4); padding: var(--s7) var(--gutter); text-align: center; overflow: hidden; }
.lost h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 7vw, 5rem); line-height: 0.95; letter-spacing: -0.04em; max-width: 14ch; }
.lost p { color: var(--mute); max-width: 36ch; }
.lost-drone { width: clamp(11rem, 28vw, 17rem); margin-bottom: var(--s3); }
.lost-cloud { position: absolute; width: clamp(6rem, 12vw, 10rem); }
.lost-cloud.l1 { top: 14%; left: 0; animation: drift 70s linear infinite -20s; }
.lost-cloud.l2 { top: 62%; left: 0; animation: drift 95s linear infinite -60s; }
.lost-spark { position: absolute; top: 20%; right: 22%; }
.lost-cloud, .lost-cloud.is-on { animation-play-state: running; }

/* Köşedeki dönen mühür */
.stamp { position: absolute; z-index: 3; right: 0; bottom: 0; width: 8.25rem; height: 8.25rem; display: grid; place-items: center; border-radius: 50%; background: var(--mint); border: var(--bw) solid var(--ink); box-shadow: 0 0 0 6px var(--paper), var(--hard-sm); }
.stamp > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.stamp text { font-family: var(--font-body); font-weight: 700; font-size: 10.4px; fill: var(--ink); }
.stamp-dot { width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--coral); border: var(--bw) solid var(--ink); }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.4); } }

/* ---------- Gizlilik / KVKK sayfası ve form notu ---------- */
.form-legal { font-size: 0.9rem; opacity: 0.95; }
.form-legal a, .footer a { text-underline-offset: 3px; }
.contact-panel .form-legal a { color: #fff; font-weight: 700; }
.footer .wrap { gap: var(--s4); }
.doc { max-width: 46rem; padding-block: var(--s7) var(--s8); }
.doc h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1; letter-spacing: -0.04em; margin: var(--s4) 0 var(--s4); }
.doc h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; margin: var(--s6) 0 var(--s2); }
.doc h2::after { display: none; }
.doc p, .doc li { max-width: 62ch; }
.doc ul { list-style: disc; padding-left: 1.3rem; display: grid; gap: var(--s2); }
.doc a { color: var(--cobalt-deep); font-weight: 600; }
.doc-lead { font-size: 1.15rem; color: var(--mute); }
.doc-date { margin-top: var(--s6); color: var(--mute); font-size: 0.93rem; }