:root {
  --ink: #111613;
  --soft-ink: #3d4741;
  --muted: #707a74;
  --turquoise: #12b8aa;
  --turquoise-deep: #087e76;
  --mint: #d8f7f1;
  --pale: #f4faf7;
  --paper: #ffffff;
  --line: #e4e9e5;
  --red: #e30a17;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, textarea { font: inherit; }
button { cursor: pointer; }

.skip-link { position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:10px 16px; border-radius:0 0 10px 0; z-index:60; }
.skip-link:focus { left:0; }
:focus-visible { outline:3px solid var(--turquoise); outline-offset:2px; border-radius:6px; }
h1,h2,h3 { text-wrap:balance; }
[hidden] { display:none !important; }
.prompt-hata { display:none; margin:12px 0 0; padding:10px 13px; border-radius:12px; border:1px solid #f3c9bd; background:#fff4f0; color:#8c3a24; font-size:12px; line-height:1.5; }
.prompt-hata.acik { display:block; }
.prompt-durum { display:grid; grid-template-columns:50px 1fr auto; align-items:center; gap:16px; padding:10px; }
.prompt-durum > span:first-child { width:48px; height:48px; display:grid; place-items:center; border-radius:50%; background:var(--mint); color:var(--turquoise-deep); font-size:21px; font-weight:800; }
.prompt-durum b { font-size:17px; }
.prompt-durum p { margin:5px 0 0; color:var(--muted); font-size:13px; }
.prompt-spin { animation:sa-don 1.1s linear infinite; }
@keyframes sa-don { to { transform:rotate(360deg); } }
.prompt-sonuc-aksiyon { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.prompt-sonuc-aksiyon a { min-height:40px; padding:0 16px; display:inline-flex; align-items:center; border-radius:999px; background:var(--turquoise-deep); color:#fff; font-size:12px; font-weight:750; }
.prompt-sonuc-aksiyon button { border:0; background:transparent; color:var(--turquoise-deep); font-size:12px; font-weight:700; text-decoration:underline; }
.yasal-govde { width:min(760px,calc(100% - 40px)); margin:40px auto 80px; }
.yasal-govde h1 { font-size:clamp(30px,4vw,44px); }
.yasal-uyari { border:1px solid #ffdca8; background:#fff8ea; color:#7a5218; border-radius:14px; padding:14px 18px; font-size:13px; line-height:1.6; margin:18px 0 26px; }
.yasal-govde p, .yasal-govde li { color:#3d4741; font-size:14px; line-height:1.75; }

.nav-wrap { width: min(1110px, calc(100% - 40px)); height: 74px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; gap: 26px; position: relative; z-index: 20; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; letter-spacing: -.045em; width: max-content; }
.brand-symbol { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #cfe8e3; border-radius: 10px; color: var(--turquoise-deep); background: #effbf8; font-size: 15px; box-shadow: inset 0 0 0 4px #fff; }
.nav-links { display: flex; gap: 34px; font-size: 13px; color: #636c67; }
.nav-links a, .nav-login { transition: color .2s ease; }
.nav-links a:hover, .nav-login:hover { color: var(--turquoise-deep); }
.nav-login { justify-self: end; font-size: 13px; color: #66706a; }
.nav-cta, .primary-button, .outline-button { min-height: 44px; padding: 0 19px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; font-size: 13px; font-weight: 750; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.nav-cta, .primary-button { color: #fff; background: var(--turquoise-deep); box-shadow: 0 9px 22px rgba(8, 126, 118, .18); }
.nav-cta:hover, .primary-button:hover { transform: translateY(-2px); background: #056b65; box-shadow: 0 13px 28px rgba(8, 126, 118, .23); }

.hero { min-height: 900px; padding: 38px 24px 44px; position: relative; overflow: hidden; text-align: center; background: linear-gradient(180deg, #fff 0%, #fff 16%, rgba(228, 250, 246, .86) 45%, #51d7c7 73%, #087e76 100%); }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 18% 44%, rgba(255,255,255,.98), transparent 25%), radial-gradient(circle at 82% 42%, rgba(255,255,255,.9), transparent 24%), radial-gradient(circle at 50% 69%, rgba(255,255,255,.35), transparent 28%); }
.hero-glow { position: absolute; width: 760px; height: 430px; left: 50%; top: 320px; transform: translateX(-50%); background: rgba(179, 249, 238, .7); filter: blur(80px); border-radius: 50%; }
.hero-copy { position: relative; z-index: 2; }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid #e3ece8; border-radius: 999px; background: rgba(255,255,255,.88); box-shadow: 0 8px 24px rgba(17, 22, 19, .05); color: #66716a; font-size: 12px; font-weight: 600; }
.eyebrow span { font-size: 14px; line-height: 1; }
.eyebrow b { color: #c1c8c4; font-weight: 400; }
.hero h1 { margin: 26px auto 15px; max-width: 1020px; font-size: clamp(50px, 6.4vw, 82px); line-height: .98; letter-spacing: -.066em; font-weight: 790; }
.hero h1 span { display: inline-block; color: var(--turquoise-deep); }
.hero-copy > p { margin: 0; color: #66716a; font-size: 17px; letter-spacing: -.01em; }

.prompt-box { width: min(760px, calc(100% - 24px)); min-height: 178px; margin: 38px auto 0; padding: 22px 24px 18px; position: relative; z-index: 3; text-align: left; background: #fff; border: 1px solid rgba(18, 94, 88, .12); border-radius: 25px; box-shadow: 0 26px 70px rgba(5, 74, 68, .17); }
.prompt-box label { display: block; margin-bottom: 7px; color: #555f59; font-size: 11px; font-weight: 750; letter-spacing: .02em; }
.prompt-box textarea { display: block; width: 100%; height: 86px; padding: 0 60px 0 0; resize: none; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 15px; line-height: 1.55; }
.prompt-box textarea::placeholder { color: #a1a9a4; }
.prompt-actions { display: flex; align-items: center; justify-content: space-between; color: #a0aaa4; font-size: 10px; }
.prompt-actions button { width: 46px; height: 46px; margin-top: -30px; border: 0; border-radius: 50%; background: var(--turquoise); color: #fff; font-size: 24px; line-height: 1; box-shadow: 0 9px 20px rgba(18,184,170,.28); }
.prompt-actions button:disabled { background: #d9e5e1; box-shadow: none; cursor: not-allowed; }
.prompt-box.is-complete { min-height: 178px; display: grid; align-items: center; }
.prompt-success { display: grid; grid-template-columns: 50px 1fr auto; align-items: center; gap: 16px; padding: 10px; }
.prompt-success > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--mint); color: var(--turquoise-deep); font-size: 21px; font-weight: 800; }
.prompt-success b { font-size: 17px; }
.prompt-success p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.prompt-success button { border: 0; background: transparent; color: var(--turquoise-deep); font-size: 12px; font-weight: 700; text-decoration: underline; }

.speed-note { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; margin: 18px 0 16px; }
.speed-note span { padding: 5px 10px; border-radius: 999px; background: var(--turquoise-deep); color: #fff; font-size: 10px; font-weight: 800; box-shadow: 0 7px 17px rgba(8,126,118,.24); }
.speed-note strong { margin-top: 8px; font-size: 13px; }
.speed-note small { margin-top: 2px; color: rgba(10, 67, 62, .68); font-size: 10px; }

.quick-grid { width: min(760px, calc(100% - 24px)); margin: 0 auto; position: relative; z-index: 3; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: left; }
.quick-card { padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.7); border-radius: 18px; background: #fff; color: var(--ink); box-shadow: 0 18px 42px rgba(2, 64, 59, .18); transition: transform .22s ease, box-shadow .22s ease; }
.quick-card:hover { transform: translateY(-5px); box-shadow: 0 24px 52px rgba(2, 64, 59, .23); }
.preview-art { height: 142px; position: relative; overflow: hidden; background: linear-gradient(135deg, #ecfbf8, #c1efe7); }
.preview-art.cafe { background: linear-gradient(135deg, #fdf1df, #f3cfa5); }
.preview-art.service { background: linear-gradient(135deg, #e9f4ff, #a9d4e7); }
.preview-browser { position: absolute; width: 79%; height: 106px; left: 12%; top: 20px; overflow: hidden; border: 2px solid rgba(255,255,255,.8); border-radius: 8px; background: #fff; box-shadow: 0 13px 24px rgba(30,76,69,.18); transform: perspective(500px) rotateX(2deg); }
.preview-top { height: 11px; padding: 0 5px; display: flex; align-items: center; gap: 2px; background: #eff2f1; }
.preview-top i { width: 2px; height: 2px; border-radius: 50%; background: #b7c0bc; }
.preview-top span { width: 42px; height: 3px; margin-left: auto; margin-right: auto; border-radius: 4px; background: #dce3e0; }
.preview-page { padding: 7px 8px; }
.preview-nav { height: 10px; display: flex; align-items: center; gap: 5px; }
.preview-nav b { margin-right: auto; color: var(--turquoise-deep); font-size: 5px; }
.preview-nav span { width: 15px; height: 2px; border-radius: 3px; background: #d5ddda; }
.preview-nav em { width: 18px; height: 6px; border-radius: 6px; background: var(--turquoise); }
.cafe .preview-nav b { color: #a55e25; }.cafe .preview-nav em { background: #bf6e2c; }
.service .preview-nav b { color: #1c7396; }.service .preview-nav em { background: #2985a8; }
.preview-content { display: grid; grid-template-columns: 1.1fr .9fr; gap: 7px; align-items: center; padding-top: 9px; }
.preview-copy small, .preview-copy strong, .preview-copy p, .preview-copy .preview-cta { display: block; border: 0; }
.preview-copy small { width: 28px; height: 3px; border-radius: 3px; background: #b7d9d4; }
.preview-copy strong { width: 62px; height: 7px; margin-top: 5px; border-radius: 2px; background: #20332f; }
.preview-copy strong.short { width: 44px; margin-top: 2px; }
.preview-copy p { width: 55px; height: 3px; margin: 7px 0 0; border-radius: 3px; background: #cfd8d4; box-shadow: 0 5px 0 #dfe5e2; }
.preview-copy .preview-cta { width: 28px; height: 8px; margin-top: 10px; border-radius: 5px; background: var(--turquoise); }
.cafe .preview-copy .preview-cta { background: #bf6e2c; }.service .preview-copy .preview-cta { background: #2985a8; }
.preview-photo { height: 65px; position: relative; overflow: hidden; border-radius: 6px 6px 18px 6px; background: linear-gradient(150deg, #c7efe8, #52c5b7); }
.preview-photo::before { content: ""; position: absolute; width: 38px; height: 38px; left: 50%; bottom: -3px; transform: translateX(-50%); border-radius: 50% 50% 9px 9px; background: rgba(255,255,255,.75); }
.preview-photo span { position: absolute; width: 20px; height: 20px; left: 50%; top: 11px; transform: translateX(-50%); border-radius: 50%; background: #daf8f3; }
.cafe .preview-photo { background: linear-gradient(150deg, #f5c985, #a85827); }.cafe .preview-photo::before { border-radius: 50%; background: #fff3d7; }.cafe .preview-photo span { background: #7c3d20; }
.service .preview-photo { background: linear-gradient(150deg, #bfe7f5, #3185a4); }.service .preview-photo::before { border-radius: 4px 4px 0 0; background: #eefaff; }.service .preview-photo span { border-radius: 3px; background: #f6c454; }
.preview-phone { position: absolute; width: 34px; height: 67px; right: 15px; bottom: 7px; padding: 7px 4px; border: 2px solid #fff; border-radius: 7px; background: #fbfffe; box-shadow: 0 7px 15px rgba(30,76,69,.2); transform: rotate(5deg); }
.preview-phone div { height: 23px; border-radius: 3px; background: #c9eee8; }.cafe .preview-phone div { background: #f1c887; }.service .preview-phone div { background: #b7dded; }
.preview-phone span { display: block; width: 20px; height: 3px; margin-top: 5px; border-radius: 3px; background: #283b37; }.preview-phone span + span { width: 14px; margin-top: 2px; }
.preview-phone > i { display: block; width: 19px; height: 5px; margin-top: 6px; border: 0; border-radius: 4px; background: var(--turquoise); }
.preview-badge { position: absolute; top: 8px; left: 8px; padding: 4px 7px; border-radius: 999px; background: var(--turquoise-deep); color: #fff; font-size: 8px; font-weight: 800; }
.quick-copy { min-height: 76px; padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.quick-copy > span { min-width: 0; display: block; }
.quick-copy strong { display: block; font-size: 12px; }
.quick-copy small { display: block; margin-top: 4px; color: #7a847e; font-size: 9px; line-height: 1.35; }
.quick-copy > b { flex: 0 0 auto; padding: 8px 9px; border-radius: 999px; background: #edf9f6; color: var(--turquoise-deep); font-size: 9px; }

.proof-strip { min-height: 94px; padding: 20px max(24px, calc((100% - 1030px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 30px; border-bottom: 1px solid var(--line); background: #fff; color: #717b75; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.proof-strip span { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.proof-strip b { color: var(--ink); font-size: 15px; letter-spacing: -.03em; text-transform: none; }

.section { width: min(1080px, calc(100% - 40px)); margin: 0 auto; padding: 120px 0; }
.section-kicker { margin-bottom: 20px; color: var(--turquoise-deep); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; }
.section-kicker.centered { text-align: center; }
.section-heading { display: grid; grid-template-columns: 1.2fr .8fr; gap: 90px; align-items: end; }
.section-heading h2, .showcase h2, .faq h2, .center-title { margin: 0; font-size: clamp(38px, 4.6vw, 58px); line-height: 1.04; letter-spacing: -.058em; }
.section-heading p, .showcase-copy > p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 60px; }
.process-grid article { min-height: 390px; padding: 25px; border: 1px solid var(--line); border-radius: 19px; background: #fff; }
.process-grid article > span { color: #98a39d; font-size: 10px; font-weight: 750; }
.process-grid h3 { margin: 22px 0 7px; font-size: 20px; letter-spacing: -.035em; }
.process-grid p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.process-icon { height: 205px; margin: 14px 0 0; position: relative; overflow: hidden; border-radius: 13px; background: var(--pale); }
.talk i { position: absolute; width: 122px; height: 42px; left: 24px; top: 50px; border: 1px solid #ceeae4; border-radius: 13px 13px 13px 3px; background: #fff; box-shadow: 0 10px 23px rgba(8,126,118,.09); }
.talk i::before { content: ""; position: absolute; width: 72px; height: 5px; left: 13px; top: 12px; border-radius: 5px; background: #9fd8cf; box-shadow: 0 10px 0 #e1ece8; }
.talk i + i { left: auto; right: 23px; top: 105px; background: var(--turquoise); border-color: var(--turquoise); border-radius: 13px 13px 3px 13px; }.talk i + i::before { background: #fff; box-shadow: 0 10px 0 rgba(255,255,255,.45); }
.design i { position: absolute; width: 130px; height: 92px; left: 25px; top: 35px; border: 1px solid #d7e8e3; border-radius: 10px; background: #fff; box-shadow: 0 14px 28px rgba(8,81,75,.09); transform: rotate(-6deg); }
.design i::before { content: ""; position: absolute; width: 72px; height: 7px; left: 14px; top: 17px; border-radius: 5px; background: #8bd1c7; box-shadow: 0 18px 0 #dce9e5, 0 34px 0 #e7efec; }
.design i:nth-child(2) { left: 94px; top: 62px; transform: rotate(5deg); }.design i:nth-child(3) { left: 145px; top: 91px; transform: rotate(-2deg); }
.publish::before, .publish::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(18,184,170,.18); left: 50%; top: 50%; transform: translate(-50%,-50%); }
.publish::before { width: 142px; height: 142px; }.publish::after { width: 190px; height: 190px; }
.publish i { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%,-50%); padding: 13px 17px; border-radius: 999px; background: var(--turquoise); color: #fff; font-size: 9px; font-style: normal; font-weight: 750; box-shadow: 0 10px 24px rgba(18,184,170,.25); }

.showcase { width: min(1180px, calc(100% - 32px)); padding: 90px 70px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 95px; border-radius: 28px; background: #f1f7f4; }
.showcase-copy { align-self: center; }
.showcase-copy > p { margin-top: 23px; max-width: 450px; }
.showcase-copy > a { display: inline-flex; align-items: center; gap: 28px; margin-top: 28px; padding-bottom: 6px; border-bottom: 1px solid #a4b8b1; color: var(--turquoise-deep); font-size: 12px; font-weight: 750; }
.feature-list article { display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding: 23px 0; border-top: 1px solid #d4e1dc; }
.feature-list article:last-child { border-bottom: 1px solid #d4e1dc; }
.feature-list article > span { color: var(--turquoise-deep); font-size: 10px; font-weight: 800; }
.feature-list h3 { margin: 0 0 7px; font-size: 18px; letter-spacing: -.025em; }
.feature-list p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }

.center-title { text-align: center; }
.center-lead { max-width: 650px; margin: 18px auto 0; color: var(--muted); text-align: center; font-size: 15px; line-height: 1.7; }
.comparison-card { max-width: 930px; margin: 50px auto 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 22px 60px rgba(21,43,35,.06); }
.comparison-row { display: grid; grid-template-columns: .8fr 1.1fr 1.1fr; border-top: 1px solid var(--line); font-size: 13px; }
.comparison-row:first-child { border: 0; }
.comparison-row span { padding: 18px 21px; }
.comparison-row span:first-child { font-weight: 700; }
.comparison-row span:nth-child(2) { color: #89918c; }
.comparison-row span:nth-child(3) { background: #eefaf7; color: var(--turquoise-deep); font-weight: 700; }
.comparison-row.head { background: #f7f9f8; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }

.pricing { padding-top: 70px; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 55px; align-items: stretch; }
.price-card { padding: 29px; position: relative; border: 1px solid var(--line); border-radius: 19px; background: #fff; }
.featured-price { border: 2px solid var(--turquoise); box-shadow: 0 24px 60px rgba(8,126,118,.12); transform: translateY(-9px); }
.popular { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 6px 11px; border-radius: 999px; background: var(--turquoise); color: #fff; font-size: 9px; font-weight: 800; text-transform: uppercase; white-space: nowrap; }
.plan-name { margin: 0 0 15px; color: var(--turquoise-deep); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .11em; }
.price-card h3 { margin: 0; font-size: 38px; letter-spacing: -.045em; }.price-card h3 span { font-size: 19px; vertical-align: top; }.price-card h3 small { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0; }
.billing { min-height: 15px; margin: 5px 0 0; color: #5f685f; font-size: 9px; }
.plan-description { min-height: 60px; margin: 20px 0 18px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.outline-button { width: 100%; border: 1px solid #cbd8d3; background: #fff; color: var(--ink); }.outline-button:hover { border-color: var(--turquoise); color: var(--turquoise-deep); }
.primary-button.full { width: 100%; min-height: 44px; }
.price-card ul { margin: 23px 0 0; padding: 21px 0 0; display: grid; gap: 11px; border-top: 1px solid var(--line); list-style: none; color: #56615a; font-size: 11px; }
.pricing-note { margin: 22px auto 0; color: #5c655f; text-align: center; font-size: 9px; }

.faq { display: grid; grid-template-columns: .7fr 1fr; gap: 95px; }
.faq-title p { color: var(--muted); font-size: 12px; }.faq-title a { color: var(--turquoise-deep); text-decoration: underline; }
.faq-list details { padding: 22px 0; border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; justify-content: space-between; gap: 20px; list-style: none; cursor: pointer; font-size: 14px; font-weight: 720; }.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: var(--turquoise); font-size: 20px; font-weight: 400; transition: transform .2s ease; }.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { margin: 14px 35px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }

.final-cta { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 92px 24px; position: relative; overflow: hidden; border-radius: 28px; background: linear-gradient(145deg, #d8f7f1 0%, #b8eee5 45%, #6fd8c9 100%); text-align: center; }
.final-cta::before { content: ""; position: absolute; width: 480px; height: 480px; left: -140px; top: -280px; border-radius: 50%; background: rgba(255,255,255,.55); }.final-cta::after { content: ""; position: absolute; width: 310px; height: 310px; right: -100px; bottom: -220px; border-radius: 50%; background: rgba(8,126,118,.1); }
.final-cta > * { position: relative; z-index: 2; }
.final-cta > span { color: var(--turquoise-deep); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.final-cta h2 { margin: 17px 0 0; font-size: clamp(43px, 5.4vw, 68px); line-height: 1.02; letter-spacing: -.06em; }.final-cta h2 em { color: var(--turquoise-deep); font-family: Georgia, serif; font-weight: 400; }
.final-cta p { color: #3e746d; font-size: 13px; }
.final-cta > a { min-height: 50px; margin-top: 15px; padding: 0 23px; display: inline-flex; align-items: center; gap: 25px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 750; box-shadow: 0 13px 28px rgba(17,22,19,.18); }

footer { width: min(1080px, calc(100% - 40px)); margin: 0 auto; padding: 65px 0 28px; }
.footer-main { display: flex; justify-content: space-between; gap: 40px; padding-bottom: 35px; border-bottom: 1px solid var(--line); }.footer-main p { margin: 14px 0 0; color: var(--muted); font-size: 12px; }
.footer-links { display: flex; align-items: center; gap: 26px; color: #626d66; font-size: 11px; }
.footer-note { padding: 22px 0; border-bottom: 1px solid var(--line); }.footer-note p { max-width: 720px; margin: 0; color: #5a635d; font-size: 10px; line-height: 1.6; }.footer-note b { color: #59635d; }
.footer-bottom { padding-top: 21px; display: flex; justify-content: space-between; color: #667069; font-size: 9px; }.footer-bottom div { display: flex; gap: 18px; }

@media (max-width: 920px) {
  .nav-wrap { grid-template-columns: 1fr auto auto; }.nav-links { display: none; }
  .hero { min-height: 870px; }.section-heading { grid-template-columns: 1fr; gap: 24px; }.showcase { grid-template-columns: 1fr; gap: 55px; }.pricing-grid { grid-template-columns: 1fr; max-width: 620px; margin-left: auto; margin-right: auto; }.featured-price { transform: none; }.faq { gap: 50px; }
}

@media (max-width: 680px) {
  .nav-wrap { width: calc(100% - 28px); height: 66px; gap: 12px; }.nav-login { display: none; }.nav-cta { min-height: 39px; padding: 0 14px; font-size: 11px; }.brand { font-size: 18px; }.brand-symbol { width: 29px; height: 29px; }
  .hero { min-height: auto; padding: 30px 8px 42px; background: linear-gradient(180deg,#fff 0%,#fff 18%,#dff8f3 48%,#3dc6b7 78%,#087e76 100%); }.hero h1 { margin-top: 22px; font-size: 45px; }.hero-copy > p { padding: 0 20px; font-size: 14px; line-height: 1.5; }.eyebrow { font-size: 10px; }
  .prompt-box { width: calc(100% - 24px); min-height: 165px; margin-top: 30px; padding: 19px; }.prompt-box textarea { height: 82px; font-size: 13px; }.prompt-success { grid-template-columns: 42px 1fr; }.prompt-success > span { width: 42px; height: 42px; }.prompt-success button { grid-column: 2; justify-self: start; padding: 0; }
  .quick-grid { width: calc(100% - 24px); grid-template-columns: 1fr; }.quick-card { display: grid; grid-template-columns: 42% 58%; }.preview-art { height: 116px; }.preview-browser { width: 88%; left: 5%; top: 16px; transform: scale(.88); transform-origin: top left; }.preview-phone { display: none; }.quick-copy { min-height: 116px; }
  .proof-strip { padding: 24px; overflow-x: auto; justify-content: flex-start; }.section { width: calc(100% - 32px); padding: 82px 0; }.section-heading h2, .showcase h2, .faq h2, .center-title { font-size: 39px; }.process-grid { grid-template-columns: 1fr; }.process-grid article { min-height: auto; }.showcase { width: calc(100% - 16px); padding: 65px 24px; border-radius: 21px; }.comparison-card { overflow-x: auto; }.comparison-row { min-width: 650px; }.faq { grid-template-columns: 1fr; }.final-cta { width: calc(100% - 16px); padding: 70px 18px; border-radius: 21px; }.footer-main { flex-direction: column; }.footer-links { flex-wrap: wrap; }.footer-bottom { flex-direction: column; gap: 12px; }
}

@media (max-width: 390px) {
  .nav-cta span { display: none; }.hero h1 { font-size: 39px; }.eyebrow b, .eyebrow b + span { display: none; }.quick-card { grid-template-columns: 40% 60%; }.quick-copy > b { display: none; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* ============================================================
   HAREKET KATMANI (v7) — progressive enhancement
   JS yoksa her sey gorunur; <html class="js-anim"> eklenince devreye girer.
   ============================================================ */

/* --- Hero giris animasyonu (sayfa acilisinda sirali yukselme) --- */
html.js-anim .hero .eyebrow,
html.js-anim .hero h1,
html.js-anim .hero-copy > p,
html.js-anim .prompt-box,
html.js-anim .speed-note,
html.js-anim .quick-grid { opacity: 0; animation: sa-rise .9s cubic-bezier(.16,1,.3,1) forwards; }
html.js-anim .hero .eyebrow   { animation-delay: .05s; }
html.js-anim .hero h1         { animation-delay: .16s; }
html.js-anim .hero-copy > p   { animation-delay: .30s; }
html.js-anim .prompt-box      { animation-delay: .44s; }
html.js-anim .speed-note      { animation-delay: .60s; }
html.js-anim .quick-grid      { animation-delay: .70s; }
@keyframes sa-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* --- Scroll reveal (JS bir kez gorununce is-visible ekler) --- */
html.js-anim .reveal { opacity: 0; transform: translateY(32px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); will-change: opacity, transform; }
html.js-anim .reveal.is-visible { opacity: 1; transform: none; }

/* --- Stagger: bir kabin cocuklari sirayla --- */
html.js-anim .reveal-stagger > * { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
html.js-anim .reveal-stagger.is-visible > * { opacity: 1; transform: none; }
html.js-anim .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: .09s; }
html.js-anim .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: .18s; }
html.js-anim .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: .27s; }
html.js-anim .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: .36s; }

/* --- Yasayan hero isigi: yavas nefes --- */
html.js-anim .hero-glow { animation: sa-breathe 8s ease-in-out infinite; }
@keyframes sa-breathe { 0%, 100% { opacity: .68; transform: translateX(-50%) scale(1); } 50% { opacity: .96; transform: translateX(-50%) scale(1.09); } }

/* --- Prompt kutusu: odakta yukselir ve parlar --- */
.prompt-box { transition: box-shadow .45s ease, transform .45s cubic-bezier(.16,1,.3,1), border-color .3s ease; }
.prompt-box:focus-within { border-color: rgba(18,184,170,.42); box-shadow: 0 34px 84px rgba(5,74,68,.22), 0 0 0 4px rgba(18,184,170,.12); transform: translateY(-3px); }

/* --- Butonlarda gecen parlama (shine) --- */
.nav-cta, .primary-button { position: relative; overflow: hidden; }
.nav-cta::after, .primary-button::after { content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent); transform: skewX(-18deg); transition: left .6s ease; pointer-events: none; }
.nav-cta:hover::after, .primary-button:hover::after { left: 135%; }

/* --- Kart hover derinlik (mevcut hover korunur, yumusatilir) --- */
.process-grid article, .price-card, .feature-list article, .comparison-card { transition: transform .32s cubic-bezier(.16,1,.3,1), box-shadow .32s ease, border-color .32s ease; }
.process-grid article:hover { transform: translateY(-5px); border-color: #cfe8e3; box-shadow: 0 22px 46px rgba(8,126,118,.1); }
.price-card:hover { transform: translateY(-5px); box-shadow: 0 26px 56px rgba(8,126,118,.13); }
.featured-price:hover { transform: translateY(-14px); }
.comparison-row span:nth-child(3) { transition: background .3s ease; }
.comparison-card:hover .comparison-row span:nth-child(3) { background: #e6f8f4; }

/* --- Proof-strip sayilari sirayla belirir --- */
html.js-anim .proof-strip.is-visible span { animation: sa-pop .55s cubic-bezier(.16,1,.3,1) backwards; }
html.js-anim .proof-strip.is-visible span:nth-child(2) { animation-delay: .1s; }
html.js-anim .proof-strip.is-visible span:nth-child(3) { animation-delay: .2s; }
html.js-anim .proof-strip.is-visible span:nth-child(4) { animation-delay: .3s; }
@keyframes sa-pop { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* --- FAQ acilis yumusatma --- */
.faq-list details p { animation: sa-fade .4s ease; }
@keyframes sa-fade { from { opacity: 0; } to { opacity: 1; } }

/* --- Hareketi azalt tercihi: her seyi aninda gorunur birak --- */
@media (prefers-reduced-motion: reduce) {
  html.js-anim .hero .eyebrow, html.js-anim .hero h1, html.js-anim .hero-copy > p,
  html.js-anim .prompt-box, html.js-anim .speed-note, html.js-anim .quick-grid,
  html.js-anim .reveal, html.js-anim .reveal-stagger > *,
  html.js-anim .proof-strip.is-visible span, .faq-list details p {
    opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important;
  }
  html.js-anim .hero-glow { animation: none !important; }
}

/* ============================================================
   PREMIUM SINEMATIK KATMAN (v8)
   ============================================================ */

/* Hero parcacik agi (canvas — JS ekler) */
.hero-particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero .eyebrow, .hero-copy, .prompt-box, .speed-note, .quick-grid { position: relative; z-index: 3; }
.hero-glow { z-index: 1; }

/* Sahne gecislerini derinlestir: bolumler blur + hafif scale ile sinematik girer */
html.js-anim .reveal { opacity: 0; transform: translateY(46px) scale(.985); filter: blur(7px); transition: opacity .95s cubic-bezier(.16,1,.3,1), transform .95s cubic-bezier(.16,1,.3,1), filter .8s ease; }
html.js-anim .reveal.is-visible { opacity: 1; transform: none; filter: blur(0); }

/* Buyuk basliklar alttan acilir (mask/clip) — sinematik giris */
html.js-anim .reveal .section-heading h2,
html.js-anim .reveal .center-title,
html.js-anim .showcase.reveal h2,
html.js-anim .faq.reveal h2 { clip-path: inset(0 0 105% 0); transition: clip-path 1.05s cubic-bezier(.16,1,.3,1) .12s; }
html.js-anim .reveal.is-visible .section-heading h2,
html.js-anim .reveal.is-visible .center-title,
html.js-anim .showcase.reveal.is-visible h2,
html.js-anim .faq.reveal.is-visible h2 { clip-path: inset(0 0 -8% 0); }

/* Kartlar 3B egilme icin hazir (JS tilt) */
.quick-card, .price-card { transform-style: preserve-3d; will-change: transform; }

/* Miknatis butonlar — yumusak geri donus (JS konumlandirir) */
.nav-cta, .primary-button.full, .final-cta > a { transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, background .3s ease; }

/* Sayaclar duzgun hizalansin */
.proof-strip b[data-count] { font-variant-numeric: tabular-nums; }

/* Hero isigi biraz daha canli (nefes + hafif renk) */
html.js-anim .hero-glow { animation: sa-breathe 8s ease-in-out infinite; }

/* Premium efektler: hareket-azalt tercihinde tamamen kapan */
@media (prefers-reduced-motion: reduce) {
  .hero-particles { display: none !important; }
  html.js-anim .reveal,
  html.js-anim .reveal .section-heading h2, html.js-anim .reveal .center-title,
  html.js-anim .showcase.reveal h2, html.js-anim .faq.reveal h2,
  html.js-anim .reveal.is-visible .section-heading h2, html.js-anim .reveal.is-visible .center-title {
    opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important;
  }
  .quick-card, .price-card, .nav-cta, .primary-button.full, .final-cta > a { transform: none !important; }
}