/* SketchOwn tanıtım sitesi — uygulamanın tasarım dili: kâğıt zemin, mürekkep çizgi, sert gölgeli kartlar, Nunito. */
@font-face { font-family: Nunito; src: url(../fonts/nunito/Nunito-Regular.ttf) format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: Nunito; src: url(../fonts/nunito/Nunito-Bold.ttf) format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: Nunito; src: url(../fonts/nunito/Nunito-Black.ttf) format("truetype"); font-weight: 900; font-display: swap; }

:root {
    --paper: #FAF7F2; --ink: #1C1B1F; --muted: #706D68; --red: #E8553D; --teal: #2A9D8F;
    --butter: #F4C95D; --sand: #EDE6DA; --white: #FFFDFA; --shadow: #D7CCBD;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 Nunito, system-ui, sans-serif; overflow-x: hidden; }
img { max-width: 100%; display: block; }
main, .foot { overflow-wrap: anywhere; } /* dar ekranda uzun sözcükler taşmasın */
.steps > *, .modes > *, .split > *, .gallery > *, .hero > * { min-width: 0; }
a { color: inherit; }

.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 14px clamp(16px, 4vw, 48px); background: rgba(250, 247, 242, .92); backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--sand); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 900; font-size: 22px; letter-spacing: -.5px; }
.top nav { display: flex; align-items: center; gap: clamp(10px, 2vw, 26px); font-weight: 700; font-size: 15px; }
.top nav a { text-decoration: none; }
@media (max-width: 720px) { .top nav a:not(.btn) { display: none; } }

main { padding: 0 clamp(16px, 4vw, 48px); max-width: 1180px; margin: 0 auto; }
.eyebrow { margin: 0 0 6px; color: var(--red); font-weight: 900; font-size: 13px; letter-spacing: 1.6px; }
.eyebrow.light { color: #FF8F7C; }
h1 { font-size: clamp(40px, 7vw, 72px); line-height: 1.02; letter-spacing: -2px; margin: 6px 0 18px; font-weight: 900; }
h2 { font-size: clamp(28px, 4vw, 40px); line-height: 1.1; letter-spacing: -1px; margin: 0 0 16px; font-weight: 900; }
h3 { margin: 0 0 6px; font-size: 21px; font-weight: 900; }
.lead { font-size: 19px; color: #3b3a3e; max-width: 560px; }
.small-note { color: var(--muted); font-size: 14px; }
.mark { background: linear-gradient(transparent 62%, var(--butter) 62%); padding: 0 4px; }

.btn { display: inline-block; padding: 14px 24px; border-radius: 99px; background: var(--red); color: #fff; font-weight: 900;
    text-decoration: none; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); transition: transform .12s, box-shadow .12s; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.btn.ghost { background: var(--white); color: var(--ink); }
.btn.small { padding: 8px 16px; font-size: 14px; box-shadow: 3px 3px 0 var(--ink); }
.cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 26px 0 12px; }

.card { background: var(--white); border: 2px solid var(--ink); border-radius: 26px 20px 24px 28px; box-shadow: 6px 7px 0 var(--ink); padding: 24px; }
.card.dark { background: #242226; color: #fff; box-shadow: 6px 7px 0 var(--teal); }
.tilt-r { transform: rotate(1deg); }
.tilt-l { transform: rotate(-1deg); }

.hero { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; padding: clamp(40px, 8vw, 96px) 0 40px; }
.hero-art .card { background: #F3E7D8; padding: 30px; max-width: 380px; margin-left: auto; }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; } .hero-art .card { margin: 0 auto; max-width: 280px; } }

.section { padding: clamp(40px, 7vw, 80px) 0; }
.steps, .modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 18px; }
.step .num { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--red);
    color: #fff; font-weight: 900; margin-bottom: 12px; border: 2px solid var(--ink); }
.step p, .mode p { margin: 0; color: #3b3a3e; }
.mode:nth-child(1) { background: #E6F1F3; }
.mode:nth-child(2) { background: #F7EBD6; }
.mode:nth-child(3) { background: #EDE8F7; }
@media (max-width: 860px) { .steps, .modes { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; overflow: hidden; }
.compare img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.compare img + img { border-left: 3px solid var(--red); }

.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 18px; }
.gallery .g { margin: 0; padding: 12px; }
.gallery img { aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 14px; mix-blend-mode: multiply; }
.gallery figcaption { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: 14px; }
.gallery figcaption span { color: var(--muted); }
@media (max-width: 860px) { .gallery { grid-template-columns: repeat(2, 1fr); gap: 14px; } }

.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.checks li { padding-left: 30px; position: relative; color: #E9E6EC; }
.checks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--butter); font-weight: 900; }

.foot { border-top: 1px solid var(--sand); padding: 30px clamp(16px, 4vw, 48px) 40px; display: grid; gap: 12px; justify-items: start;
    max-width: 1180px; margin: 40px auto 0; }
.foot nav { display: flex; flex-wrap: wrap; gap: 18px; font-weight: 700; }