/* Luden Studio — site stilleri.
   Değerler design_handoff_esik_petek/README.md'deki token tablosundan;
   demo istek parçaları design_demo_istek/ tuvalinden. */

:root {
  --zemin: #060608;
  --yuzey: #0B0B0E;
  --koyu: #0A0A0C;
  --sari: #FFCA00;
  --turuncu: #EA580C;
  --metin: #fff;
  --govde: #CBD5E1;
  --ikincil: #94A3B8;
  --soluk: #64748B;
  --kenar: rgba(255,255,255,0.09);
  --grot: 'Space Grotesk', sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --marka: 'Special Gothic Expanded One', 'Sora', 'Space Grotesk', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--zemin); scroll-snap-type: y proximity; }
[data-snap] { scroll-snap-align: start; scroll-snap-stop: normal; }
body { background: var(--zemin); color: var(--metin); font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
::selection { background: rgba(255,202,0,0.35); color: #fff; }
a { color: var(--sari); text-decoration: none; }
a:hover { color: #fff; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
input::placeholder, textarea::placeholder { color: rgba(148,163,184,0.55); }
img, video { display: block; }
[hidden] { display: none !important; }
.marka { font-family: var(--marka); font-weight: 400; }
.mono { font-family: var(--mono); }
.grot { font-family: var(--grot); }

/* --- animasyonlar --- */
[data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity 1s cubic-bezier(0.16,1,0.3,1), transform 1s cubic-bezier(0.16,1,0.3,1); }
[data-reveal][data-in] { opacity: 1; transform: none; }
@keyframes petekGlow { 0%, 100% { opacity: 0.10; } 50% { opacity: 0.2; } }
@keyframes petekFloatA { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(6vw, 8vh, 0) scale(1.14); } }
@keyframes petekFloatB { 0%, 100% { transform: translate3d(0,0,0) scale(1.08); } 50% { transform: translate3d(-7vw, -6vh, 0) scale(1); } }
@keyframes petekFloatC { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-9vw, 10vh, 0) scale(1.2); } }
@keyframes tagIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ctaGlow { 0%, 100% { box-shadow: 0 0 30px -6px rgba(255,202,0,0.8); } 50% { box-shadow: 0 0 54px -4px rgba(255,202,0,1); } }
@keyframes arrowDip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* --- okuma çubuğu + nav --- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; background: rgba(255,255,255,0.06); }
.progress > div { height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(to right, #EA580C, #FFCA00, #fff); box-shadow: 0 0 12px rgba(255,202,0,0.7); }

.nav { position: fixed; top: 2px; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 16px 48px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: rgba(6,6,8,0.5); border-bottom: 1px solid rgba(255,255,255,0.07); }
.nav-marka { display: flex; align-items: center; gap: 12px; color: var(--sari); }
.nav-marka img { width: 30px; height: 30px; object-fit: contain; }
.nav-marka span { font-size: 15px; letter-spacing: 0.06em; white-space: nowrap; }
.nav-marka span b { font-weight: 400; color: #fff; }
.nav-links { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.nav-links a { padding: 9px 16px; border-radius: 999px; color: var(--ikincil); transition: all 0.3s; }
.nav-links a:hover { color: #fff; background: rgba(255,255,255,0.06); }
.nav-links a.cta { margin-left: 10px; min-height: 44px; display: flex; align-items: center; padding: 0 24px; font-weight: 500; color: var(--zemin); background: var(--sari); box-shadow: 0 0 24px -6px rgba(255,202,0,0.75); }
.nav-links a.cta:hover { color: var(--zemin); background: var(--sari); transform: scale(1.04); box-shadow: 0 0 34px -4px rgba(255,202,0,0.9); }

/* --- hero --- */
.hero { position: relative; min-height: 100vh; overflow: hidden; background: var(--zemin); }
.hero hex-comb { position: absolute; inset: 0; pointer-events: none; }
.hero-perde { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(6,6,8,0.82) 0%, rgba(6,6,8,0.24) 26%, rgba(6,6,8,0.34) 62%, rgba(6,6,8,0.86) 88%, #060608 100%); }
.hero-icerik { position: relative; min-height: 100vh; max-width: 1280px; margin: 0 auto; padding: 150px 48px 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 32px; }
.hero-blok { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.kilit { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.kilit .luden { font-size: clamp(42px, 8.6vw, 118px); line-height: 1.02; color: var(--sari); text-shadow: 0 0 90px rgba(255,202,0,0.4), 0 8px 60px rgba(6,6,8,0.6); }
.kilit .studio { font-size: clamp(22px, 4.2vw, 58px); line-height: 1.05; letter-spacing: 0.26em; text-indent: 0.26em; color: #fff; text-shadow: 0 4px 40px rgba(6,6,8,0.7); }
.slogan { font-family: var(--grot); font-size: clamp(21px, 2.7vw, 36px); line-height: 1.24; font-weight: 500; letter-spacing: -0.02em; color: #fff; max-width: 24ch; text-wrap: balance; text-shadow: 0 4px 30px rgba(6,6,8,0.7); }
.tanim { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sari); }
.tanim > span { padding: 8px 14px; border-radius: 8px; border: 1px solid rgba(255,202,0,0.4); background: rgba(255,202,0,0.1); animation: tagIn 0.7s cubic-bezier(0.16,1,0.3,1) both; transition: transform 0.3s, background 0.3s, box-shadow 0.3s; }
.tanim > span:nth-child(1) { animation-delay: 0.10s; }
.tanim > span:nth-child(2) { animation-delay: 0.18s; }
.tanim > span:nth-child(3) { animation-delay: 0.26s; }
.tanim > span:nth-child(4) { animation-delay: 0.34s; }
.tanim > span:hover { transform: translateY(-3px); background: rgba(255,202,0,0.18); box-shadow: 0 8px 22px -10px rgba(255,202,0,0.85); }
.kesfet { min-height: 60px; display: inline-flex; align-items: center; gap: 12px; padding: 0 44px; border-radius: 999px; font-family: var(--mono); font-size: 15px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--zemin); background: var(--sari); transition: transform 0.3s; animation: ctaGlow 3.2s ease-in-out infinite; }
.kesfet:hover { color: var(--zemin); transform: translateY(3px) scale(1.04); }
.kesfet .ok { display: inline-block; font-size: 17px; line-height: 1; animation: arrowDip 1.8s ease-in-out infinite; }

/* --- hero sonrası sabit arka plan --- */
.govde { position: relative; background: var(--zemin); }
.arka { position: sticky; top: 0; height: 100vh; margin-bottom: -100vh; z-index: 0; overflow: hidden; pointer-events: none; }
.arka line-waves { position: absolute; inset: 0; mask-image: radial-gradient(135% 105% at 50% 45%, black 30%, transparent 92%); -webkit-mask-image: radial-gradient(135% 105% at 50% 45%, black 30%, transparent 92%); }
.leke { position: absolute; border-radius: 50%; filter: blur(30px); }
.leke-a { top: -18%; left: -12%; width: 62vw; height: 62vw; background: radial-gradient(circle, rgba(255,202,0,0.16), transparent 68%); animation: petekFloatA 26s ease-in-out infinite; }
.leke-b { bottom: -22%; right: -14%; width: 58vw; height: 58vw; background: radial-gradient(circle, rgba(234,88,12,0.14), transparent 68%); animation: petekFloatB 34s ease-in-out infinite; }
.leke-c { top: 30%; left: 46%; width: 34vw; height: 34vw; background: radial-gradient(circle, rgba(120,140,255,0.10), transparent 70%); animation: petekFloatC 44s ease-in-out infinite; }

section { position: relative; z-index: 1; background: transparent; }

/* --- biz kimiz --- */
.biz { padding: 110px 48px 108px; overflow: hidden; scroll-margin-top: 70px; }
.biz-isik { position: absolute; top: -30%; left: 50%; transform: translateX(-50%); width: 900px; height: 620px; border-radius: 50%; background: var(--sari); filter: blur(180px); opacity: 0.09; pointer-events: none; }
.biz-bas { position: relative; max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.biz-bas img { width: 120px; height: 120px; object-fit: contain; }
.etiket { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sari); }
.biz-bas h2 { font-family: var(--grot); font-size: clamp(28px, 3.2vw, 42px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; max-width: 34ch; text-wrap: balance; }
.biz-bas p { font-size: 17px; line-height: 1.75; color: var(--ikincil); max-width: 58ch; text-wrap: pretty; }
.vurgu { color: var(--sari); }
.biz-kartlar { position: relative; max-width: 1080px; margin: 56px auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.biz-kart { display: flex; flex-direction: column; gap: 12px; padding: 24px 24px 26px; background: var(--yuzey); border: 1px solid var(--kenar); border-radius: 18px; }
.biz-kart h3 { font-family: var(--grot); font-size: 18px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; min-height: 47px; }
.biz-kart p { font-size: 15px; line-height: 1.7; color: var(--ikincil); text-wrap: pretty; }

/* --- kurulumlar --- */
.kurulumlar { padding: 0 0 30px; }
.bolum-bas { max-width: 1000px; margin: 0 auto; padding: 120px 48px 76px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.bolum-bas h2 { font-family: var(--grot); font-size: clamp(34px, 3.8vw, 56px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.06; text-wrap: balance; }
.bolum-bas p { font-size: 17px; line-height: 1.75; color: var(--ikincil); max-width: 46ch; text-wrap: pretty; }
.izgara { max-width: 1280px; margin: 0 auto; padding: 0 48px 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.kart { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 20px 18px 18px; color: inherit; background: var(--yuzey); border: 1px solid var(--kenar); border-radius: 18px; overflow: hidden; transition: transform 0.4s, border-color 0.4s, box-shadow 0.4s; }
.kart:hover { transform: translateY(-6px); border-color: rgba(255,202,0,0.55); box-shadow: 0 0 44px -18px rgba(255,202,0,0.6); }
.kart-gorsel { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: repeating-linear-gradient(115deg, #14151a 0 12px, #0b0c10 12px 24px); }
.kart-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kart-gorsel .isik { position: absolute; inset: 0; background: radial-gradient(70% 60% at 30% 14%, rgba(255,202,0,0.18), transparent 74%); }
.kart-gorsel .perde { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(6,6,8,0.72) 0%, rgba(6,6,8,0.12) 46%, rgba(6,6,8,0.30) 100%); }
.kart-gorsel .no { position: absolute; top: 12px; left: 12px; font-family: var(--grot); font-size: 30px; font-weight: 700; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1px rgba(255,202,0,0.65); }
.kart-bas { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.kart-bas h3 { font-family: var(--grot); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.kart-bas a { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; color: var(--ikincil); }
.kart-bas a:hover { color: #fff; }

/* Demoya Erişin — seçilen buton stili (design_demo_istek, hero=True) */
.demo-btn { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 32px; border-radius: 999px; border: 1px solid var(--sari); background: var(--sari); color: var(--zemin); box-shadow: 0 0 36px -6px rgba(255,202,0,0.85); font-family: var(--grot); font-size: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; transition: all 0.3s; }
.demo-btn:hover { color: var(--zemin); transform: scale(1.04); box-shadow: 0 0 52px 0 rgba(255,202,0,0.95); }
.demo-btn svg { width: 18px; height: 18px; flex: none; }
.demo-btn.tam { width: 100%; }
.demo-btn.buyuk { min-height: 60px; font-size: 17px; }
.demo-btn:disabled { opacity: 0.6; cursor: wait; transform: none; }

/* --- proje bölümleri --- */
.proje { min-height: 100vh; display: flex; padding: 92px 48px 44px; scroll-margin-top: 70px; }
.proje-ic { width: 100%; max-width: 1280px; margin: 0 auto; min-height: 0; display: grid; grid-template-columns: 0.85fr 1fr; gap: 64px; align-items: stretch; }
.proje-gorsel { position: relative; min-height: 0; border: 1px solid var(--kenar); border-radius: 22px; overflow: hidden; background: var(--yuzey); }
.proje-gorsel img, .proje-gorsel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.proje-metin { min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.proje-meta { display: flex; align-items: baseline; gap: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ikincil); }
.proje-meta span:first-child { color: var(--sari); }
.proje-metin h2 { font-family: var(--grot); font-size: clamp(36px, 4.4vw, 76px); font-weight: 700; letter-spacing: -0.045em; line-height: 0.96; }
.proje-metin > p { font-size: 17px; line-height: 1.65; color: var(--govde); max-width: 44ch; text-wrap: pretty; }
.tagler { display: flex; gap: 8px; flex-wrap: wrap; }
.tagler span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sari); border: 1px solid rgba(255,202,0,0.4); background: rgba(255,202,0,0.1); padding: 5px 10px; border-radius: 8px; }
.kunye { display: flex; flex-wrap: wrap; gap: 1px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; overflow: hidden; }
.kunye div { flex: 1 1 42%; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: rgba(11,11,14,0.72); font-family: var(--mono); letter-spacing: 0.1em; }
.kunye div.tam { flex-basis: 100%; }
.kunye span:first-child { font-size: 10px; color: var(--ikincil); text-transform: uppercase; }
.kunye span:last-child { font-size: 12px; color: #fff; line-height: 1.5; }
.proje-demo { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 10px; }
.proje-demo small { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; line-height: 1.6; color: var(--soluk); text-align: center; }

/* --- stüdyo --- */
.studyo { padding: 130px 48px; background: linear-gradient(to bottom, rgba(10,10,12,0) 0%, rgba(10,10,12,0.72) 22%, rgba(10,10,12,0.72) 78%, rgba(10,10,12,0) 100%); overflow: hidden; }
.studyo-doku { position: absolute; inset: 0; opacity: 0.55; background-image: radial-gradient(circle, rgba(255,202,0,0.16) 1px, transparent 1px); background-size: 26px 26px; mask-image: radial-gradient(70% 60% at 50% 45%, black, transparent 100%); -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, black, transparent 100%); }
.studyo-isik { position: absolute; top: 12%; right: -6%; width: 560px; height: 560px; border-radius: 50%; background: var(--sari); filter: blur(160px); opacity: 0.12; animation: petekGlow 12s ease-in-out infinite; }
.studyo-ic { position: relative; max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 0.72fr 1fr; gap: 64px; align-items: center; }
.studyo-gorsel { position: relative; aspect-ratio: 4 / 5; border: 1px solid var(--kenar); border-radius: 22px; overflow: hidden; background: var(--yuzey); }
.studyo-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.studyo-metin { display: flex; flex-direction: column; gap: 24px; }
.studyo-metin .etiket { font-size: 11px; }
.studyo-metin h2 { font-family: var(--grot); font-size: clamp(36px, 4vw, 62px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.04; }
.studyo-rol { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ikincil); }
.studyo-p1 { font-size: 18px; line-height: 1.7; color: var(--govde); max-width: 56ch; text-wrap: pretty; }
.studyo-p2 { font-size: 16px; line-height: 1.75; color: var(--ikincil); max-width: 56ch; text-wrap: pretty; }
.butonlar { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.pill { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 26px; border-radius: 999px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; transition: all 0.3s; }
.pill.dolu { color: var(--zemin); background: var(--sari); }
.pill.dolu:hover { color: var(--zemin); transform: scale(1.04); }
.pill.cerceve { border: 1px solid rgba(255,255,255,0.26); color: #fff; }
.pill.cerceve:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,0.08); }

/* --- iletişim + footer --- */
.iletisim { padding: 150px 48px 160px; overflow: hidden; }
.iletisim-isik { position: absolute; bottom: -20%; left: 50%; transform: translateX(-50%); width: 900px; height: 520px; border-radius: 50%; background: var(--sari); filter: blur(170px); opacity: 0.11; }
.iletisim-ic { position: relative; max-width: 900px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 30px; }
.iletisim-ic .luden { font-size: clamp(38px, 5.8vw, 84px); line-height: 1.02; color: var(--sari); text-shadow: 0 0 70px rgba(255,202,0,0.4); }
.iletisim-ic .studio { font-size: clamp(20px, 2.9vw, 42px); line-height: 1.05; letter-spacing: 0.26em; text-indent: 0.26em; color: #fff; }
.iletisim-ic .slogan { font-size: clamp(21px, 2.5vw, 34px); text-shadow: none; }
.iletisim-ic .slogan .vurgu { text-shadow: 0 0 46px rgba(255,202,0,0.5); }
.iletisim-mail { font-family: var(--mono); font-size: 15px; letter-spacing: 0.08em; color: var(--sari); transition: color 0.3s; }
.iletisim-ic .pill.dolu { padding: 0 34px; font-size: 13px; font-weight: 500; box-shadow: 0 0 32px -6px rgba(255,202,0,0.8); }
.iletisim-ic .pill.dolu:hover { box-shadow: 0 0 44px -4px rgba(255,202,0,0.95); }

.footer { position: relative; z-index: 1; border-top: 1px solid rgba(255,255,255,0.08); background: var(--koyu); padding: 30px 48px; }
.footer-ic { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; color: var(--ikincil); text-transform: uppercase; }
.footer .nav-marka img { width: 24px; height: 24px; }
.footer .nav-marka span { font-size: 14px; text-transform: none; }
.footer-links { display: flex; gap: 26px; }
.footer-links a { color: var(--ikincil); }
.footer-links a:hover { color: #fff; }

/* --- demo istek penceresi (Form A) --- */
.modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(6,6,8,0.6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.modal[data-acik] { opacity: 1; pointer-events: auto; }
.modal-kutu { position: relative; width: 480px; max-width: 100%; max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 28px; padding: 36px 36px 32px; background: var(--yuzey); border: 1px solid rgba(255,255,255,0.12); border-radius: 22px; box-shadow: 0 40px 120px -30px rgba(0,0,0,0.9), 0 0 80px -30px rgba(255,202,0,0.35); transform: translateY(16px) scale(0.98); transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); }
.modal[data-acik] .modal-kutu { transform: none; }
.kapat { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 999px; color: var(--ikincil); transition: all 0.2s; }
.kapat:hover { color: #fff; background: rgba(255,255,255,0.08); }
.form-bas { display: flex; flex-direction: column; gap: 10px; }
.form-bas .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sari); }
.form-bas .eyebrow span { color: var(--ikincil); }
.form-bas h2 { font-family: var(--grot); font-size: 30px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; }
.form-bas p { font-size: 15px; line-height: 1.6; color: var(--ikincil); text-wrap: pretty; }
.alanlar { display: flex; flex-direction: column; gap: 18px; }
.alan { display: flex; flex-direction: column; gap: 8px; }
.alan > span { display: flex; justify-content: space-between; align-items: baseline; }
.alan > span > span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ikincil); }
.alan > span > small { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--soluk); }
.alan input { height: 52px; padding: 0 16px; border-radius: 12px; background: var(--yuzey); border: 1px solid rgba(255,255,255,0.12); font-size: 15px; color: #fff; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
.alan input:focus { border-color: var(--sari); box-shadow: 0 0 0 4px rgba(255,202,0,0.14); }
.alan input:user-invalid { border-color: #F87171; }
.form-alt { display: flex; flex-direction: column; gap: 12px; }
.form-alt .demo-btn { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; padding: 0 22px; box-shadow: 0 0 32px -8px rgba(255,202,0,0.8); }
.form-alt .demo-btn svg { width: 14px; height: 14px; }
.form-not { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; line-height: 1.6; color: var(--soluk); text-align: center; }
.form-hata { font-size: 13px; line-height: 1.5; color: #F87171; text-align: center; }
.form-hata:empty { display: none; }
.tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* gönderildi durumu */
.onay { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; padding: 8px 4px 0; }
.onay-ikon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 999px; color: var(--zemin); background: var(--sari); box-shadow: 0 0 44px -6px rgba(255,202,0,0.8); }
.onay h2 { font-family: var(--grot); font-size: 30px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.onay p { font-size: 15px; line-height: 1.65; color: var(--ikincil); max-width: 34ch; text-wrap: pretty; }
.onay p b { font-weight: 500; color: #fff; }
.chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 8px; border: 1px solid rgba(255,202,0,0.4); background: rgba(255,202,0,0.1); font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sari); }
.chip span { color: rgba(255,202,0,0.6); }

/* --- hareket azaltma --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; scroll-behavior: auto; }
  * { animation: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* --- dar ekran --- */
@media (max-width: 1100px) {
  .izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proje-ic { grid-template-columns: 1fr; gap: 28px; }
  .proje { min-height: 0; }
  .proje-gorsel { aspect-ratio: 4 / 5; }
  .studyo-ic { grid-template-columns: 1fr; gap: 36px; }
  .studyo-gorsel { max-width: 480px; }
}
@media (max-width: 820px) {
  .nav { padding: 12px 20px; }
  .nav-links a:not(.cta) { display: none; }
  .nav-links a.cta { margin-left: 0; min-height: 40px; padding: 0 18px; font-size: 11px; }
  .hero-icerik, .biz, .bolum-bas, .izgara, .proje, .studyo, .iletisim, .footer { padding-left: 20px; padding-right: 20px; }
  .hero-icerik { padding-top: 120px; padding-bottom: 60px; }
  .biz { padding-top: 80px; padding-bottom: 72px; }
  .biz-kartlar { grid-template-columns: 1fr; margin-top: 36px; }
  .biz-kart h3 { min-height: 0; }
  .bolum-bas { padding-top: 80px; padding-bottom: 44px; }
  .izgara { gap: 12px; }
  .kart { padding: 14px 12px 12px; }
  .kart-bas h3 { font-size: 16px; }
  .demo-btn { padding: 0 18px; font-size: 13px; }
  .proje { padding-top: 72px; padding-bottom: 32px; scroll-snap-align: none; }
  .kunye div { flex-basis: 100%; }
  .studyo { padding-top: 80px; padding-bottom: 80px; }
  .iletisim { padding-top: 100px; padding-bottom: 100px; }
  .footer-ic { flex-direction: column; gap: 14px; }
  .modal { padding: 0; align-items: flex-end; }
  .modal-kutu { width: 100%; padding: 14px 22px 28px; border-radius: 24px 24px 0 0; border-bottom: 0; gap: 24px; }
  .modal-kutu::before { content: ""; width: 40px; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.18); align-self: center; }
  .form-bas h2 { font-size: 28px; }
  .alanlar { gap: 16px; }
}