/* ==========================================================================
   DGR Web — Ana stil dosyası
   Beyaz + turuncu · "Tasarım tuvali" · Mobil öncelikli · Bağımlılık yok
   ========================================================================== */

/* ---------- Yazı tipleri (yerel dosyalar; Google Fonts yok, KVKK dostu) ---------- */
@font-face {
    font-family: "Mona Sans";
    font-style: normal;
    font-display: swap;
    font-weight: 200 900;
    src: url("../fonts/mona-sans-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Mona Sans";
    font-style: normal;
    font-display: swap;
    font-weight: 200 900;
    src: url("../fonts/mona-sans-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Geist Mono";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/geist-mono-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Geist Mono";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/geist-mono-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tasarım değişkenleri ---------- */
:root {
    /* Marka renkleri — Yönetim > Site Ayarları > Görünüm'den değiştirilebilir */
    --brand: #ff5a1f;
    --ink: #141414;

    /* Beyaz yazı taşıyan turuncu yüzeyler ve küçük turuncu yazılar için koyu ton (WCAG AA ≥ 4.5:1) */
    --brand-600: color-mix(in srgb, var(--brand) 80%, #000);
    --brand-700: color-mix(in srgb, var(--brand) 68%, #000);
    --brand-300: color-mix(in oklab, var(--brand) 55%, #fff);
    --brand-200: color-mix(in oklab, var(--brand) 32%, #fff);
    --brand-100: color-mix(in oklab, var(--brand) 16%, #fff);
    --brand-50: color-mix(in oklab, var(--brand) 7%, #fff);

    --ink-soft: color-mix(in oklab, var(--ink) 78%, #fff);
    --muted: #6b6b6b;
    --faint: #767676;
    --line: #ececec;
    --line-2: #e0e0e0;
    --bg: #ffffff;
    --bg-soft: #fafafa;

    --font: "Mona Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --container: 72rem;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --ease-io: cubic-bezier(0.45, 0.05, 0.25, 1);
    --shadow: 0 1px 0 rgb(0 0 0 / 0.02), 0 24px 48px -30px rgb(20 20 20 / 0.28);
}

/* ---------- Sayfalar arası yumuşak geçiş (destekleyen tarayıcılarda) ---------- */
@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.22s;
}

/* ---------- Temel ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

h1, h2, h3, p, ul, ol, figure {
    margin: 0;
}

ul[role="list"],
ol {
    list-style: none;
    padding: 0;
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

a,
button,
label,
summary {
    -webkit-tap-highlight-color: transparent;
}

::selection {
    background: var(--brand-100);
    color: var(--ink);
}

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}

main:focus {
    outline: none;
}

.icon {
    width: 1.15em;
    height: 1.15em;
    flex: none;
}

.container {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 100;
    padding: 0.65rem 1rem;
    border-radius: 10px;
    background: var(--ink);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-180%);
    transition: transform 0.2s var(--ease);
}

.skip-link:focus {
    transform: none;
}

.track-pixel {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* ---------- Logo ---------- */
.logo {
    display: inline-flex;
    align-items: center;
    color: var(--ink);
    text-decoration: none;
}

.logo__svg {
    display: block;
    width: auto;
    height: 42px;
    overflow: visible;
}

.logo__svg--mark {
    height: 22px;
}

.logo-accent {
    fill: var(--brand);
}

.logo-accent-stroke {
    stroke: var(--brand);
}

/* ---------- Küçük bileşenler ---------- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 32px;
    padding: 0 0.9rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgb(255 255 255 / 0.75);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ink-soft);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.chip--mono {
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.chip__index {
    padding-right: 0.55rem;
    margin-right: 0.05rem;
    border-right: 1px solid var(--line);
    font-weight: 600;
    color: var(--brand-600);
}

.chip__dot {
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand);
}

.chip__dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--brand);
    animation: ping 2.4s var(--ease) infinite;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.2rem 0.4rem;
    margin-top: 0.8rem;
}

.tags li {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--muted);
}

.tags li + li::before {
    content: "·";
    margin-right: 0.4rem;
    color: var(--brand);
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 1rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--ink);
    text-decoration: none;
    transition: color 0.2s;
}

.link-arrow:hover {
    color: var(--brand-600);
}

.link-arrow__icon {
    width: 1em;
    height: 1em;
    transition: transform 0.25s var(--ease);
}

.link-arrow:hover .link-arrow__icon {
    transform: translate(2px, -2px);
}

.empty {
    padding: 4rem 0;
    text-align: center;
    color: var(--muted);
}

/* ---------- Butonlar ---------- */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    height: 46px;
    padding: 0 1.25rem;
    border: 1px solid transparent;
    border-radius: 999px;
    overflow: hidden;
    font-size: 0.94rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.25s var(--ease), background-color 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.btn--lg {
    height: 54px;
    padding: 0 1.6rem;
    font-size: 1rem;
}

.btn--sm {
    height: 38px;
    padding: 0 0.9rem;
    font-size: 0.84rem;
}

.btn__icon {
    width: 1.1em;
    height: 1.1em;
    transition: transform 0.25s var(--ease);
}

.btn:hover .btn__icon {
    transform: translateX(3px);
}

.btn--primary {
    /* Turuncu üzerinde beyaz yazı: 18.7px kalın = "büyük metin" (WCAG AA 3:1) */
    font-size: 1.17rem;
    font-weight: 700;
    color: #fff;
    background: var(--brand);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 14px 30px -14px color-mix(in srgb, var(--brand) 85%, transparent);
}

.btn--primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.35) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.7s var(--ease);
    pointer-events: none;
}

.btn--primary:hover {
    background: var(--brand-600);
    transform: translateY(-1px);
}

.btn--primary:hover::after {
    transform: translateX(120%);
}

.btn--ghost {
    color: var(--ink);
    background: #fff;
    border-color: var(--line-2);
}

.btn--ghost:hover {
    border-color: var(--ink);
}

.btn--light {
    color: var(--ink);
    background: #fff;
}

.btn--light:hover {
    color: #fff;
    background: var(--ink);
}

.btn:active {
    transform: translateY(1px) scale(0.99);
}

.btn[aria-busy="true"] {
    pointer-events: none;
    opacity: 0.7;
}

.icon-btn {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink);
    background: #fff;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.25s var(--ease);
}

.icon-btn .icon {
    width: 17px;
    height: 17px;
}

.icon-btn:hover {
    color: #fff;
    background: var(--ink);
    border-color: var(--ink);
    transform: translateY(-2px);
}

/* ---------- Üst menü (yüzen kapsül) ---------- */
.nav {
    position: fixed;
    inset: 12px 0 auto;
    z-index: 50;
    padding: 0 var(--gutter);
    pointer-events: none;
}

.nav__bar {
    /* Sayfa geçişinde menü yerinde kalır. Bu ad .nav'da olursa .nav "backdrop root" olur ve bulanıklık çalışmaz. */
    view-transition-name: site-nav;
    pointer-events: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    /* İçerik kabıyla aynı genişlik: kapsülün kenarları ızgaralar, çağrı bandı ve alt bilgiyle hizalı */
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 0.5rem 0 1.1rem;
    border: 1px solid rgb(20 20 20 / 0.08);
    border-radius: 26px;
    background: rgb(255 255 255 / 0.8);
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    backdrop-filter: blur(16px) saturate(170%);
    box-shadow: 0 10px 30px -20px rgb(20 20 20 / 0.3);
    transition: box-shadow 0.3s, background-color 0.3s;
}

.nav.is-scrolled .nav__bar {
    background: rgb(255 255 255 / 0.92);
    box-shadow: 0 16px 40px -22px rgb(20 20 20 / 0.4);
}

.nav .logo {
    height: 56px;
}

.nav__toggle {
    display: inline-grid;
    place-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
}

.nav__toggle span {
    display: block;
    width: 18px;
    height: 1.5px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform 0.35s var(--ease);
}

.nav__toggle[aria-expanded="true"] span:first-child {
    transform: translateY(3.25px) rotate(45deg);
}

.nav__toggle[aria-expanded="true"] span:last-child {
    transform: translateY(-3.25px) rotate(-45deg);
}

/* Mobil: menü kapsülün içinde aşağı açılır */
.nav__menu {
    order: 3;
    display: grid;
    grid-template-rows: 0fr;
    width: 100%;
    transition: grid-template-rows 0.4s var(--ease);
}

.nav__list {
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    visibility: hidden;
    transition: visibility 0s linear 0.4s;
}

.nav.is-open .nav__menu {
    grid-template-rows: 1fr;
}

.nav.is-open .nav__list {
    visibility: visible;
    padding-bottom: 0.6rem;
    transition: visibility 0s;
}

.nav__link {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.85rem 0.4rem;
    border-top: 1px solid var(--line);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
    transition: color 0.2s, background-color 0.2s;
}

.nav__link[aria-current="page"] {
    color: var(--ink);
    font-weight: 600;
}

.nav__link[aria-current="page"]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand);
}

.nav__link--cta {
    justify-content: center;
    margin-top: 0.4rem;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: var(--ink);
}

.nav__link--cta[aria-current="page"] {
    color: #fff;
}

.nav__link--cta[aria-current="page"]::before {
    display: none;
}

.nav__cta-icon {
    width: 1em;
    height: 1em;
}

/* Menü bağlantısının altında, fareyle gelince tutuşan ince alev çizgisi (yalnızca masaüstü) */
.flame {
    display: none;
}

@keyframes flame-bed {
    to {
        -webkit-mask-position: 12px 100%;
        mask-position: 12px 100%;
    }
}

@keyframes flame-lick {
    0% { opacity: 0; transform: scale(0.7, 0.2); }
    18% { opacity: 1; transform: scale(1, 0.8) skewX(-8deg); }
    45% { opacity: 1; transform: scale(0.9, 1.05) skewX(7deg); }
    72% { opacity: 0.7; transform: translateY(-1px) scale(0.7, 0.9) skewX(-6deg); }
    100% { opacity: 0; transform: translateY(-3px) scale(0.4, 0.55) skewX(4deg); }
}

@keyframes flame-ember {
    0% { opacity: 0; transform: translate(0, 0); }
    20% { opacity: 0.9; }
    100% { opacity: 0; transform: translate(2px, -11px); }
}

@keyframes flame-wick {
    to {
        background-position: -200% 0;
    }
}

/* ---------- Menü önizleme paneli (masaüstü, fareli cihazlar; main.js etkinleştirir) ---------- */
.navpop {
    display: none;
}

@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
    .navpop:not([hidden]) {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        display: block;
        height: 0;
        pointer-events: none;
    }

    .navpop__box {
        position: absolute;
        top: 10px;
        left: 0;
        width: var(--w, 34rem);
        height: var(--h, 15rem);
        overflow: hidden;
        border: 1px solid rgb(20 20 20 / 0.08);
        border-radius: 22px;
        background: #fff;
        box-shadow: 0 30px 60px -30px rgb(20 20 20 / 0.38), 0 2px 8px -4px rgb(20 20 20 / 0.08);
        opacity: 0;
        visibility: hidden;
        transform: translate3d(var(--x, 0px), -8px, 0) scale(0.98);
        transform-origin: var(--ox, 50%) 0;
        transition: opacity 0.18s, transform 0.3s var(--ease), visibility 0s linear 0.3s;
    }

    .navpop.is-open .navpop__box {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate3d(var(--x, 0px), 0, 0);
        transition: opacity 0.22s, transform 0.42s var(--ease), width 0.42s var(--ease), height 0.42s var(--ease), visibility 0s;
    }

    /* İlk açılışta panel, önceki konumundan kaymadan doğrudan yerinde belirir */
    .navpop.is-snap .navpop__box {
        transition: none;
    }

    .navpop__pane {
        position: absolute;
        top: 0;
        left: 0;
        display: grid;
        gap: 0.9rem;
        width: var(--pw, 34rem);
        padding: 1.1rem;
        opacity: 0;
        visibility: hidden;
        transform: translate3d(calc(var(--dir, 1) * 32px), 0, 0);
        transition: opacity 0.18s, transform 0.42s var(--ease), visibility 0s linear 0.42s;
    }

    .navpop__pane.is-before {
        --dir: -1;
    }

    .navpop__pane.is-active {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity 0.3s 0.06s, transform 0.42s var(--ease), visibility 0s;
    }

    .navpop__pane--projects { --pw: 35rem; }
    .navpop__pane--services { --pw: 34rem; --more-x: 0.75rem; }
    .navpop__pane--process { --pw: 36rem; }

    .navpop__head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        padding: 0 0.35rem;
    }

    .navpop__label {
        font-family: var(--mono);
        font-size: 0.66rem;
        font-weight: 500;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--faint);
    }

    .navpop__count {
        font-size: 0.8rem;
        color: var(--muted);
    }

    .navpop__count b {
        font-family: var(--mono);
        font-weight: 600;
        color: var(--brand-600);
    }

    .navpop__works,
    .navpop__services,
    .navpop__steps {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .navpop__works {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .navpop__work {
        display: grid;
        gap: 0.15rem;
        padding: 0.35rem;
        border-radius: 14px;
        color: var(--ink);
        text-decoration: none;
        transition: background-color 0.2s;
    }

    .navpop__work:hover,
    .navpop__work:focus-visible {
        background: var(--bg-soft);
    }

    .navpop__thumb {
        position: relative;
        display: block;
        overflow: hidden;
        aspect-ratio: 16 / 10;
        margin-bottom: 0.45rem;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: #f4f4f4;
        container-type: inline-size;
    }

    .navpop__thumb > .mock,
    .navpop__thumb > img {
        transition: transform 1.6s var(--ease-io);
    }

    .navpop__thumb > img {
        width: 100%;
        height: auto;
    }

    .navpop__work:hover .navpop__thumb > .mock,
    .navpop__work:focus-visible .navpop__thumb > .mock {
        transform: translateY(-28cqw);
    }

    .navpop__work-title {
        font-size: 0.88rem;
        font-weight: 600;
        letter-spacing: -0.02em;
        line-height: 1.3;
    }

    .navpop__work-cat {
        font-family: var(--mono);
        font-size: 0.62rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--faint);
    }

    .navpop__services {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.35rem;
    }

    .navpop__service {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        height: 100%;
        padding: 0.75rem;
        border-radius: 14px;
        color: var(--ink);
        text-decoration: none;
        transition: background-color 0.2s;
    }

    .navpop__service:hover,
    .navpop__service:focus-visible {
        background: var(--bg-soft);
    }

    .navpop__icon {
        display: grid;
        place-items: center;
        flex: none;
        width: 36px;
        height: 36px;
        border: 1px solid var(--brand-100);
        border-radius: 11px;
        background: var(--brand-50);
        color: var(--brand-600);
        transition: transform 0.35s var(--ease), background-color 0.2s;
    }

    .navpop__icon .icon {
        width: 17px;
        height: 17px;
    }

    .navpop__service:hover .navpop__icon {
        transform: translateY(-2px) rotate(-4deg);
        background: #fff;
    }

    .navpop__service-body {
        display: grid;
        gap: 0.15rem;
        min-width: 0;
    }

    .navpop__service-title {
        font-size: 0.9rem;
        font-weight: 600;
        letter-spacing: -0.015em;
        line-height: 1.3;
    }

    .navpop__service-text {
        font-size: 0.8rem;
        line-height: 1.45;
        color: var(--muted);
    }

    /* Süreç: dört adımlı küçük zaman çizelgesi; panel açılınca çizgi soldan sağa çizilir */
    .navpop__steps {
        position: relative;
        display: grid;
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
        padding-top: 0.4rem;
    }

    .navpop__steps::before {
        content: "";
        position: absolute;
        top: calc(0.4rem + 0.35rem + 17px);
        right: 12.5%;
        left: 12.5%;
        height: 1.5px;
        background: linear-gradient(90deg, var(--brand), var(--brand-300));
        transform: scaleX(0);
        transform-origin: 0 50%;
        transition: transform 0.2s;
    }

    .navpop__pane--process.is-active .navpop__steps::before {
        transform: scaleX(1);
        transition: transform 0.9s 0.12s var(--ease-io);
    }

    .navpop__step {
        position: relative;
        display: grid;
        justify-items: center;
        gap: 0.6rem;
        padding: 0.35rem 0.4rem 0.6rem;
        border-radius: 14px;
        color: var(--ink);
        text-align: center;
        text-decoration: none;
        transition: background-color 0.2s;
    }

    .navpop__step:hover,
    .navpop__step:focus-visible {
        background: var(--bg-soft);
    }

    .navpop__dot {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border: 1px solid var(--line-2);
        border-radius: 50%;
        background: #fff;
        font-family: var(--mono);
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--muted);
        transform: scale(0.6);
        opacity: 0;
        transition: transform 0.2s, opacity 0.2s, color 0.2s, border-color 0.2s, background-color 0.2s;
    }

    .navpop__pane--process.is-active .navpop__dot {
        transform: none;
        opacity: 1;
        transition: transform 0.45s var(--ease), opacity 0.3s, color 0.2s, border-color 0.2s, background-color 0.2s;
    }

    .navpop__pane--process.is-active li:nth-child(2) .navpop__dot { transition-delay: 0.22s, 0.22s, 0s, 0s, 0s; }
    .navpop__pane--process.is-active li:nth-child(3) .navpop__dot { transition-delay: 0.44s, 0.44s, 0s, 0s, 0s; }
    .navpop__pane--process.is-active li:nth-child(4) .navpop__dot { transition-delay: 0.66s, 0.66s, 0s, 0s, 0s; }
    .navpop__pane--process.is-active li:nth-child(n+5) .navpop__dot { transition-delay: 0.8s, 0.8s, 0s, 0s, 0s; }

    .navpop__step:hover .navpop__dot,
    .navpop__step:focus-visible .navpop__dot {
        border-color: var(--brand-600);
        background: var(--brand-600);
        color: #fff;
    }

    .navpop__step-title {
        font-size: 0.86rem;
        font-weight: 600;
        letter-spacing: -0.015em;
        line-height: 1.3;
    }

    .navpop__more {
        display: inline-flex;
        align-items: center;
        justify-self: start;
        gap: 0.35rem;
        margin: 0 0 0 var(--more-x, 0.35rem);
        padding: 0.2rem 0;
        font-size: 0.84rem;
        font-weight: 600;
        color: var(--ink);
        text-decoration: none;
    }

    .navpop__more .icon {
        width: 1em;
        height: 1em;
        color: var(--brand-600);
        transition: transform 0.3s var(--ease);
    }

    .navpop__more:hover .icon,
    .navpop__more:focus-visible .icon {
        transform: translateX(3px);
    }

    /* Panel açıkken, açılan bağlantının alev çizgisi yanık kalır */
    .nav__link[aria-expanded="true"] {
        color: var(--ink);
    }
}

/* ---------- Tuval arka planı (ızgara + yumuşak turuncu ışık + doku) ---------- */
.canvas {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(48% 55% at 50% 0%, color-mix(in srgb, var(--brand) 17%, transparent) 0%, transparent 72%),
        linear-gradient(to right, rgb(20 20 20 / 0.055) 1px, transparent 1px) 0 0 / 72px 72px,
        linear-gradient(to bottom, rgb(20 20 20 / 0.055) 1px, transparent 1px) 0 0 / 72px 72px;
    -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 25%, #000 40%, transparent 80%);
    mask-image: radial-gradient(ellipse 80% 75% at 50% 25%, #000 40%, transparent 80%);
}

.canvas::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.canvas--soft {
    background:
        radial-gradient(42% 60% at 50% 0%, color-mix(in srgb, var(--brand) 13%, transparent) 0%, transparent 72%),
        linear-gradient(to right, rgb(20 20 20 / 0.05) 1px, transparent 1px) 0 0 / 72px 72px,
        linear-gradient(to bottom, rgb(20 20 20 / 0.05) 1px, transparent 1px) 0 0 / 72px 72px;
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(132px, 18vh, 190px) 0 clamp(56px, 9vh, 96px);
    text-align: center;
}

.hero__inner {
    display: grid;
    justify-items: center;
    gap: clamp(3.25rem, 8vw, 4.5rem);
}

.hero__copy {
    display: grid;
    justify-items: center;
    min-width: 0;
}

.hero__showcase {
    width: 100%;
    min-width: 0;
}

.hero__title {
    display: grid;
    justify-items: center;
    gap: 0.04em;
    margin-top: 1.9rem;
    font-size: clamp(2.9rem, 1rem + 7.6vw, 7.4rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.058em;
}

.hero__line {
    display: block;
}

.hero__text {
    display: inline-block;
}

.hero__line--code {
    font-family: var(--mono);
    font-weight: 500;
    font-size: 0.86em;
    letter-spacing: -0.075em;
    word-spacing: -0.22em;
}

/* Tasarım aracındaki seçim çerçevesi */
.sel {
    position: relative;
    display: inline-block;
    padding: 0 0.12em 0.06em;
}

.sel__frame {
    position: absolute;
    inset: 0.04em -0.02em -0.02em;
    border: 2px solid var(--brand);
    pointer-events: none;
    animation: frame-in 0.6s 0.55s var(--ease) both;
}

.sel__frame i {
    position: absolute;
    width: 11px;
    height: 11px;
    border: 2px solid var(--brand);
    background: #fff;
    animation: pop 0.35s var(--ease) both;
}

.sel__frame i:nth-child(1) { top: -6px; left: -6px; animation-delay: 0.85s; }
.sel__frame i:nth-child(2) { top: -6px; right: -6px; animation-delay: 0.92s; }
.sel__frame i:nth-child(3) { bottom: -6px; left: -6px; animation-delay: 0.99s; }
.sel__frame i:nth-child(4) { bottom: -6px; right: -6px; animation-delay: 1.06s; }

.sel__tag {
    position: absolute;
    left: -2px;
    bottom: calc(100% + 6px);
    padding: 0.28rem 0.55rem;
    border-radius: 6px 6px 6px 0;
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.02em;
    color: #fff;
    background: var(--brand-600);
    animation: pop 0.35s 1.1s var(--ease) both;
}

/* Kod editöründeki imleç */
.caret {
    display: inline-block;
    width: 0.075em;
    height: 0.86em;
    margin-left: 0.08em;
    vertical-align: -0.08em;
    background: var(--brand);
    animation: blink 1.1s steps(1, end) infinite;
}

.hero__lead {
    max-width: 35rem;
    margin-top: 1.75rem;
    font-size: clamp(1.04rem, 0.98rem + 0.32vw, 1.22rem);
    line-height: 1.6;
    color: var(--muted);
    text-wrap: pretty;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2.25rem;
}

/* Açılış animasyonu (sayfa yüklenince bir kez) */
.anim-in {
    animation: rise 0.9s var(--ease) both;
}

.anim-in--2 { animation-delay: 0.07s; }
.anim-in--3 { animation-delay: 0.15s; }
.anim-in--4 { animation-delay: 0.24s; }
.anim-in--5 { animation-delay: 0.33s; }

/* ---------- macOS ekranı (hero'da örnek proje) ---------- */
.mac {
    position: relative;
    width: min(100%, 38rem);
    margin: 0 auto;
}

.mac__display {
    position: relative;
    padding: 2.1%;
    border-radius: clamp(12px, 2.6vw, 20px);
    background: linear-gradient(180deg, #232325, #0e0e0f);
    box-shadow:
        inset 0 0 0 1px rgb(255 255 255 / 0.07),
        0 50px 90px -46px rgb(60 24 4 / 0.55),
        0 22px 40px -28px rgb(20 20 20 / 0.45);
}

/* Ön kamera ve cam yansıması */
.mac__display::before {
    content: "";
    position: absolute;
    top: 0.85%;
    left: 50%;
    width: 5px;
    height: 5px;
    margin-left: -2.5px;
    border-radius: 50%;
    background: #2c2c2f;
}


.mac__screen {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border-radius: 6px;
    background: #050505;
    container-type: inline-size;
    text-align: left;
}

/* Cam yansıması */
.mac__screen::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: inherit;
    background: linear-gradient(118deg, rgb(255 255 255 / 0.13) 0%, rgb(255 255 255 / 0.03) 34%, transparent 34.2%);
    pointer-events: none;
}

/* Duvar kâğıdı: marka turuncusu, yumuşak ışık ve ince ızgara */
.mac__wall {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, rgb(255 255 255 / 0.28) 1px, transparent 1px) 0 0 / 6cqw 6cqw,
        linear-gradient(to bottom, rgb(255 255 255 / 0.28) 1px, transparent 1px) 0 0 / 6cqw 6cqw,
        radial-gradient(62% 85% at 86% 110%, var(--brand) 0%, color-mix(in srgb, var(--brand) 45%, transparent) 40%, transparent 72%),
        radial-gradient(55% 75% at 6% 104%, color-mix(in srgb, var(--brand) 45%, #fff) 0%, transparent 70%),
        radial-gradient(80% 60% at 30% -10%, #fff 8%, transparent 70%),
        linear-gradient(165deg, color-mix(in srgb, var(--brand) 5%, #fff) 0%, color-mix(in srgb, var(--brand) 17%, #fff) 55%, color-mix(in srgb, var(--brand) 30%, #fff) 100%);
}

.mac__menubar {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 3.7cqw;
    padding: 0 2.2cqw;
    font-size: 1.7cqw;
    font-weight: 500;
    line-height: 1;
    color: #1d1d1f;
    background: rgb(255 255 255 / 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.mac__menu,
.mac__status {
    display: flex;
    align-items: center;
    gap: 2.1cqw;
    white-space: nowrap;
}

.mac__menu b {
    font-weight: 700;
}

.mac__app {
    width: 2.3cqw;
    height: 2.3cqw;
}

.mac__wifi {
    width: 2.1cqw;
    height: auto;
}

.mac__battery {
    position: relative;
    display: block;
    width: 3.4cqw;
    height: 1.65cqw;
    padding: 0.22cqw;
    border: 0.18cqw solid currentColor;
    border-radius: 0.5cqw;
    opacity: 0.85;
}

.mac__battery::after {
    content: "";
    position: absolute;
    top: 30%;
    right: -0.55cqw;
    width: 0.3cqw;
    height: 40%;
    border-radius: 0 0.2cqw 0.2cqw 0;
    background: currentColor;
}

.mac__battery i {
    display: block;
    width: 72%;
    height: 100%;
    border-radius: 0.2cqw;
    background: currentColor;
}

/* Tarayıcı penceresi (proje penceresi bileşeni yeniden kullanılır) */
.mac__win {
    position: absolute;
    top: 7.2cqw;
    left: 12cqw;
    z-index: 2;
    width: 76cqw;
}

.mac__win .window {
    border: 0;
    border-radius: 1.3cqw;
    box-shadow: 0 0 0 0.12cqw rgb(0 0 0 / 0.14), 0 3cqw 7cqw -2cqw rgb(70 24 0 / 0.5);
}

.mac__win .window:hover {
    transform: none;
    box-shadow: 0 0 0 0.12cqw rgb(0 0 0 / 0.14), 0 3cqw 7cqw -2cqw rgb(70 24 0 / 0.5);
}

.mac__win .window__bar {
    gap: 1.2cqw;
    height: 4.3cqw;
    padding: 0 1.5cqw;
    border-radius: 1.3cqw 1.3cqw 0 0;
}

.mac__win .window__dots {
    gap: 0.75cqw;
}

.mac__win .window__dots i {
    width: 1.25cqw;
    height: 1.25cqw;
}

.mac__win .window__dots i:nth-child(1) { background: #ff5f57; }
.mac__win .window__dots i:nth-child(2) { background: #febc2e; }
.mac__win .window__dots i:nth-child(3) { background: #28c840; }

.mac__win .window__url {
    gap: 0.5cqw;
    height: 2.7cqw;
    padding: 0 1.2cqw;
    border-radius: 0.8cqw;
    font-size: 1.35cqw;
    transform: translateX(-2.6cqw);
}

.mac__win .window__lock {
    width: 1.3cqw;
    height: 1.3cqw;
}

.mac__win .window__screen {
    border-radius: 0 0 1.3cqw 1.3cqw;
}

.mac__win .window__select {
    display: none;
}

/* Sayfa pencerede kendiliğinden, yavaşça aşağı kayıp geri döner (kaydırma mesafesi JS ile belirlenince) */
.mac__win .window__page,
.mac__win .window:hover .window__page,
.mac__win .window.is-playing .window__page {
    transition: none;
    transform: none;
}

.mac__win .window.is-ready .window__page {
    animation: mac-scroll 16s var(--ease-io) 1.2s infinite;
}

/* Ekran görünmüyorken animasyonlar durur */
.mac.is-paused * {
    animation-play-state: paused !important;
}

.mac__dock {
    position: absolute;
    right: 0;
    bottom: 1.3cqw;
    left: 0;
    z-index: 3;
    display: flex;
    gap: 1.1cqw;
    width: fit-content;
    margin: 0 auto;
    padding: 0.95cqw;
    border: 0.15cqw solid rgb(255 255 255 / 0.7);
    border-radius: 2.3cqw;
    background: rgb(255 246 240 / 0.82);
    box-shadow: 0 1.6cqw 4cqw -1.6cqw rgb(70 24 0 / 0.35);
}

.mac__dock-app {
    position: relative;
    display: grid;
    place-items: center;
    width: 5.2cqw;
    height: 5.2cqw;
    border-radius: 1.35cqw;
    font-style: normal;
    box-shadow: inset 0 0 0 0.1cqw rgb(0 0 0 / 0.08);
}

.mac__dock-logo {
    width: 100%;
    height: 100%;
}

.mac__dock-app--browser {
    box-shadow: none;
}

/* Açık uygulamanın altındaki nokta */
.mac__dock-app--browser::after {
    content: "";
    position: absolute;
    bottom: -0.85cqw;
    left: 50%;
    width: 0.55cqw;
    height: 0.55cqw;
    margin-left: -0.275cqw;
    border-radius: 50%;
    background: #1d1d1f;
}

.mac__dock-app--files { background: linear-gradient(#ffd7a8, #ffad62); }
.mac__dock-app--files::before { content: ""; width: 58%; height: 44%; border-radius: 0.35cqw; background: #fff4e6; box-shadow: 0 -0.7cqw 0 -0.25cqw #fff4e6; }
.mac__dock-app--code { background: linear-gradient(#2a2a30, #121215); }
.mac__dock-app--code::before { content: "</>"; font-family: var(--mono); font-size: 1.7cqw; font-weight: 600; color: #ff8a5c; }
.mac__dock-app--design { background: linear-gradient(135deg, #ffffff, #ececf0); }
.mac__dock-app--design::before { content: ""; width: 46%; height: 46%; border: 0.3cqw solid var(--brand); box-shadow: 0.7cqw 0.7cqw 0 -0.05cqw rgb(255 90 31 / 0.25); }
.mac__dock-app--mail { background: linear-gradient(#6fb6ff, #2f7cf0); }
.mac__dock-app--mail::before { content: ""; width: 56%; height: 40%; border-radius: 0.3cqw; background: linear-gradient(160deg, transparent 47%, #d9e9ff 48% 52%, transparent 53%), linear-gradient(20deg, transparent 47%, #d9e9ff 48% 52%, transparent 53%), #fff; }
.mac__dock-app--notes { background: linear-gradient(#fff 0 30%, #fff8d6 30%); }
.mac__dock-app--notes::before { content: ""; width: 60%; height: 34%; margin-top: 22%; background: repeating-linear-gradient(#e8dcae 0 0.18cqw, transparent 0.18cqw 0.9cqw); }

.mac__cursor {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    width: 2.3cqw;
    transform: translate(70cqw, 49cqw);
    animation: mac-cursor 16s var(--ease-io) 1.2s infinite;
}

.mac__cursor svg {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0.3cqw 0.4cqw rgb(0 0 0 / 0.3));
}

/* Ayak (alüminyum) */
.mac__stand {
    position: relative;
    display: block;
    width: 22%;
    aspect-ratio: 22 / 9;
    margin: 0 auto;
}

.mac__stand::before {
    content: "";
    position: absolute;
    inset: 0 0 6px;
    background:
        linear-gradient(180deg, rgb(0 0 0 / 0.22), transparent 38%),
        linear-gradient(90deg, #c5c7ca, #e8e9eb 28%, #f5f5f6 50%, #e3e4e6 72%, #c2c4c7);
    clip-path: polygon(9% 0, 91% 0, 100% 100%, 0 100%);
}

.mac__stand i {
    position: absolute;
    right: -24%;
    bottom: 0;
    left: -24%;
    height: 7px;
    border-radius: 5px 5px 3px 3px;
    background: linear-gradient(90deg, #bfc1c4, #eeeeef 30%, #f7f7f8 50%, #e9e9eb 70%, #bcbec1);
    box-shadow: 0 16px 22px -12px rgb(20 20 20 / 0.45);
}

.mac__caption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0 0.85rem;
    margin-top: 0.8rem;
}

.mac__label {
    padding: 0.28rem 0.6rem;
    border: 1px solid var(--brand-200);
    border-radius: 999px;
    background: var(--brand-50);
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-700);
}

.mac__link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding-block: 0.6rem;
    font-size: 0.95rem;
    color: var(--ink);
    text-decoration: none;
}

.mac__link b {
    font-weight: 600;
}

.mac__link span {
    color: var(--muted);
}

.mac__link span::before {
    content: "·";
    content: "·" / "";
    margin-right: 0.45rem;
}

.mac__go {
    width: 1em;
    height: 1em;
    transition: transform 0.25s var(--ease);
}

.mac__link:hover b {
    color: var(--brand-600);
}

.mac__link:hover .mac__go {
    transform: translateX(3px);
}

@keyframes mac-scroll {
    0%, 12% { transform: none; }
    46%, 62% { transform: translateY(calc(var(--scroll) * -1cqw)); }
    94%, 100% { transform: none; }
}

@keyframes mac-cursor {
    0% { transform: translate(70cqw, 49cqw); }
    9% { transform: translate(50cqw, 31cqw); }
    11% { transform: translate(50cqw, 31cqw) scale(0.86); }
    13%, 44% { transform: translate(50.5cqw, 31.5cqw); }
    60% { transform: translate(54cqw, 29cqw); }
    74% { transform: translate(31cqw, 23cqw); }
    76% { transform: translate(31cqw, 23cqw) scale(0.86); }
    78% { transform: translate(31cqw, 23cqw); }
    100% { transform: translate(70cqw, 49cqw); }
}

/* ---------- İlk giriş animasyonu (ana sayfa, oturumda bir kez) ---------- */
.intro .hero__line,
.intro .hero__line--code {
    animation: none;
}

.intro .hero .chip {
    animation-delay: 0.05s;
}

.intro .hero__text {
    animation: intro-line 1s var(--ease) 0.15s backwards;
}

.intro .sel__frame { animation-delay: 0.85s; }
.intro .sel__frame i:nth-child(1) { animation-delay: 1.05s; }
.intro .sel__frame i:nth-child(2) { animation-delay: 1.11s; }
.intro .sel__frame i:nth-child(3) { animation-delay: 1.17s; }
.intro .sel__frame i:nth-child(4) { animation-delay: 1.23s; }
.intro .sel__tag { animation-delay: 1.3s; }

/* "Sağlam kod." harf harf yazılır (JavaScript); betik çalışmazsa kısa süre sonra görünür */
.intro .hero__code {
    visibility: hidden;
    animation: intro-show 0s 2.4s forwards;
}

.intro .is-typing .hero__code {
    visibility: visible;
    animation: none;
}

.intro .is-typing:not(.is-typed) .caret {
    animation: none;
}

.hero__code .is-pending {
    visibility: hidden;
}

.intro .hero__lead { animation-delay: 1.4s; }
.intro .hero__actions { animation-delay: 1.5s; }

.intro .marquee {
    animation: intro-fade 0.9s var(--ease) 1.6s both;
}

/* Ekran: kalkar, açılır, menü/dock gelir, pencere açılır */
.intro .mac {
    animation: intro-mac 1.2s var(--ease) 0.3s both;
}

.intro .mac__wall { animation: intro-wake 0.9s ease-out 1s both; }
.intro .mac__menubar { animation: intro-menubar 0.6s var(--ease) 1.35s both; }
.intro .mac__dock { animation: intro-dock 0.7s var(--ease) 1.45s both; }
.intro .mac__win { animation: intro-window 0.8s var(--ease) 1.75s both; }
.intro .mac__win .window.is-ready .window__page { animation-delay: 2.7s; }

.intro .mac__cursor {
    animation: intro-fade 0.4s ease-out 2.3s both, mac-cursor 16s var(--ease-io) 2.7s infinite;
}

/* Sayfa arka planda hazırlanırken (önizleme) animasyon bekler */
.intro-wait .hero *,
.intro-wait .hero,
.intro-wait .marquee {
    animation-play-state: paused !important;
}

@keyframes intro-line {
    from {
        clip-path: inset(-0.35em -0.2em 100% -0.2em);
        transform: translateY(0.45em);
    }
    to {
        clip-path: inset(-0.35em -0.2em -0.35em -0.2em);
        transform: none;
    }
}

@keyframes intro-show {
    to {
        visibility: visible;
    }
}

@keyframes intro-fade {
    from {
        opacity: 0;
    }
}

@keyframes intro-mac {
    from {
        opacity: 0;
        transform: translateY(48px) scale(0.965);
    }
}

@keyframes intro-wake {
    from {
        opacity: 0;
        filter: brightness(0.4);
    }
}

@keyframes intro-menubar {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
}

@keyframes intro-dock {
    from {
        opacity: 0;
        transform: translateY(140%);
    }
}

@keyframes intro-window {
    from {
        opacity: 0;
        transform: translateY(14cqw) scale(0.6);
    }
}

/* ---------- Kayan yetenek şeridi ---------- */
.marquee {
    position: relative;
    overflow: hidden;
    padding: 1.1rem 0;
    border-block: 1px solid var(--line);
    background: var(--bg-soft);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee__track {
    display: flex;
    width: max-content;
    animation: marquee 46s linear infinite;
}

.marquee:hover .marquee__track,
.marquee.is-paused .marquee__track {
    animation-play-state: paused;
}

.marquee__group {
    display: flex;
}

.marquee__item {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0 1.4rem;
    font-family: var(--mono);
    font-size: 0.8rem;
    font-weight: 500;
    /* Büyük harfe çevrilmez: lang="tr" altında "JavaScript" → "JAVASCRİPT" olurdu; ifadeler yazıldığı gibi gösterilir. */
    letter-spacing: 0.02em;
    color: var(--ink-soft);
    white-space: nowrap;
}

.marquee__sq {
    width: 8px;
    height: 8px;
    border: 1.5px solid var(--brand);
    background: #fff;
}

/* ---------- Bölüm başlıkları ---------- */
.section {
    padding: clamp(4.5rem, 3rem + 6vw, 8rem) 0;
}

.section-head {
    display: grid;
    justify-items: center;
    max-width: 44rem;
    margin: 0 auto clamp(2.5rem, 5vw, 4rem);
    text-align: center;
}

.section-title {
    margin-top: 1.1rem;
    font-size: clamp(2rem, 1.25rem + 2.9vw, 3.6rem);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.05em;
    text-wrap: balance;
}

.section-intro {
    max-width: 36rem;
    margin-top: 0.9rem;
    font-size: 1.06rem;
    color: var(--muted);
    text-wrap: pretty;
}

.section-foot {
    display: flex;
    justify-content: center;
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

/* İç sayfa başlığı */
.page-head {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(130px, 17vh, 176px) 0 clamp(1.5rem, 3vw, 2.5rem);
    text-align: center;
}

.page-head__inner {
    display: grid;
    justify-items: center;
}

.page-head__title {
    max-width: 16ch;
    margin-top: 1.4rem;
    font-size: clamp(2.6rem, 1.2rem + 5.4vw, 5.6rem);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -0.058em;
    text-wrap: balance;
}

.page-head__intro {
    max-width: 36rem;
    margin-top: 1.4rem;
    font-size: clamp(1.04rem, 0.98rem + 0.3vw, 1.2rem);
    color: var(--muted);
    text-wrap: pretty;
}

.page-head + .section {
    padding-top: clamp(2.5rem, 5vw, 4rem);
}

/* ---------- Proje pencereleri ---------- */
.works {
    --works-gap: clamp(1.25rem, 2.5vw, 2rem);
    display: grid;
    gap: clamp(2.75rem, 5vw, 3.5rem) var(--works-gap);
}

.work {
    min-width: 0;
}

.work.is-hidden {
    display: none;
}

.work.is-shown {
    animation: rise 0.6s var(--ease) both;
}

.work__meta {
    display: grid;
    justify-items: center;
    margin-top: 1.4rem;
    text-align: center;
}

.work__cat:empty::before {
    /* Kategorisiz projede başlık, yandaki kartların başlığıyla aynı hizada kalır */
    content: "\a0";
}

.work__cat {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.work__title {
    margin-top: 0.35rem;
    font-size: 1.28rem;
    font-weight: 600;
    letter-spacing: -0.03em;
}

.work__summary {
    max-width: 34ch;
    margin-top: 0.4rem;
    font-size: 0.95rem;
    color: var(--muted);
}

.window {
    --scroll: 92.5;
    position: relative;
    display: block;
    border: 1px solid var(--line-2);
    border-radius: 14px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    box-shadow: var(--shadow);
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.window--img {
    --scroll: 0;
}

.window__bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    height: 34px;
    padding: 0 0.75rem;
    border-bottom: 1px solid var(--line);
    border-radius: 13px 13px 0 0;
    background: #fbfbfb;
}

.window__dots {
    display: flex;
    gap: 5px;
    flex: none;
}

.window__dots i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #e3e3e3;
    transition: background-color 0.3s;
}


.window__url {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    flex: 1;
    min-width: 0;
    max-width: 64%;
    height: 21px;
    margin: 0 auto;
    padding: 0 0.6rem;
    overflow: hidden;
    border-radius: 6px;
    background: #f0f0f0;
    font-family: var(--mono);
    font-size: 0.66rem;
    color: var(--muted);
    white-space: nowrap;
    transform: translateX(-17px);
}

.window__lock {
    width: 10px;
    height: 10px;
}

.window__screen {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border-radius: 0 0 13px 13px;
    background: #f4f4f4;
    container-type: inline-size;
}

.window__page {
    display: block;
    transition: transform 3s var(--ease-io);
    will-change: transform;
}

.window__page img {
    width: 100%;
    height: auto;
}

.window:focus-visible .window__page,
.window.is-playing .window__page {
    transform: translateY(calc(var(--scroll) * -1cqw));
}

/* Seçim çerçevesi (tasarım aracı dokunuşu) */
.window__select {
    position: absolute;
    inset: -7px;
    border: 1.5px solid var(--brand);
    border-radius: 18px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease);
}

.window__select .h {
    position: absolute;
    width: 9px;
    height: 9px;
    border: 1.5px solid var(--brand);
    background: #fff;
}

.window__select .h--tl { top: -5px; left: -5px; }
.window__select .h--tr { top: -5px; right: -5px; }
.window__select .h--bl { bottom: -5px; left: -5px; }
.window__select .h--br { bottom: -5px; right: -5px; }

.window__tag {
    position: absolute;
    left: -1px;
    bottom: calc(100% + 6px);
    padding: 0.25rem 0.5rem;
    border-radius: 5px 5px 5px 0;
    font-family: var(--mono);
    font-size: 0.68rem;
    line-height: 1.2;
    color: #fff;
    background: var(--brand-600);
    white-space: nowrap;
}

.window__tag em {
    margin-left: 0.5rem;
    font-style: normal;
    opacity: 0.75;
}

.window:focus-visible .window__select {
    opacity: 1;
}

/* Fareyle gezinme efektleri yalnızca fareli cihazlarda: dokunmatik ekranda kaydırırken
   parmak pencereye değdiğinde seçim çerçevesi ve köşe kutucukları belirmez. */
@media (hover: hover) and (pointer: fine) {
    .window:hover .window__dots i:nth-child(1) { background: #ff5f57; }
    .window:hover .window__dots i:nth-child(2) { background: #febc2e; }
    .window:hover .window__dots i:nth-child(3) { background: #28c840; }

    .window:hover .window__page {
        transform: translateY(calc(var(--scroll) * -1cqw));
    }

    .window:hover {
        transform: translateY(-4px);
        box-shadow: 0 1px 0 rgb(0 0 0 / 0.02), 0 34px 60px -32px rgb(20 20 20 / 0.35);
    }

    .window:hover .window__select {
        opacity: 1;
    }
}

.window:focus-visible {
    outline: none;
}

/* ---------- Kodla çizilmiş site önizlemeleri (proje temaları) ---------- */
.mock {
    --mk-bg: #fafafa;
    --mk-ink: #141414;
    --mk-accent: #ff5a1f;
    --mk-on: #fff;
    --mk-line: rgb(0 0 0 / 0.08);
    --mk-head: var(--font);
    --mk-r: 1.2cqw;
    --mk-rb: 99px;
    --mk-c1: #f1d6c7;
    --mk-c2: #e7e2dc;
    --mk-c3: #d8d2cc;
    display: flex;
    flex-direction: column;
    height: 155cqw;
    font-family: var(--font);
    color: var(--mk-ink);
    background: var(--mk-bg);
    text-align: left;
}

.mk-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3.2cqw 5cqw;
}

.mk-logo {
    font-family: var(--mk-head);
    font-size: 3.1cqw;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.mk-links {
    display: flex;
    gap: 2.6cqw;
}

.mk-links i {
    width: 6.5cqw;
    height: 0.9cqw;
    border-radius: 1cqw;
    background: currentColor;
    opacity: 0.22;
}

.mk-btn {
    display: inline-block;
    width: fit-content;
    padding: 1.5cqw 3.2cqw;
    border-radius: var(--mk-rb);
    font-size: 2.1cqw;
    font-weight: 600;
    line-height: 1.2;
    color: var(--mk-on);
    background: var(--mk-accent);
}

.mk-btn--sm {
    padding: 1.1cqw 2.4cqw;
    font-size: 1.8cqw;
}

.mk-btn--light {
    color: var(--mk-accent);
    background: #fff;
}

.mk-hero {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 5cqw;
    padding: 6cqw 5cqw 7cqw;
}

.mk-copy {
    display: grid;
    justify-items: start;
}

.mk-kicker {
    font-size: 1.8cqw;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mk-accent);
}

.mk-h {
    margin: 1.6cqw 0 2.6cqw;
    font-family: var(--mk-head);
    font-size: 6cqw;
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.035em;
}

.mk-line {
    display: block;
    width: 92%;
    height: 1.1cqw;
    margin-bottom: 1.3cqw;
    border-radius: 1cqw;
    background: currentColor;
    opacity: 0.13;
}

.mk-line--short {
    width: 62%;
}

.mk-copy .mk-btn {
    margin-top: 2cqw;
}

.mk-art {
    position: relative;
    aspect-ratio: 1 / 1.08;
    overflow: hidden;
    border-radius: calc(var(--mk-r) * 2);
    background: var(--mk-c1);
}

.mk-art i {
    position: absolute;
    display: block;
}

.mk-section {
    padding: 4cqw 5cqw 6cqw;
}

.mk-h2 {
    display: block;
    font-family: var(--mk-head);
    font-size: 3.8cqw;
    font-weight: 600;
    letter-spacing: -0.03em;
}

.mk-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3cqw;
    margin-top: 3.2cqw;
}

.mk-card {
    display: grid;
}

.mk-card__img {
    aspect-ratio: 4 / 3;
    margin-bottom: 2cqw;
    border-radius: var(--mk-r);
    background: var(--mk-c1);
}

.mk-card__img--2 { background: var(--mk-c2); }
.mk-card__img--3 { background: var(--mk-c3); }

.mk-card__title {
    margin-bottom: 1.4cqw;
    font-size: 2.2cqw;
    font-weight: 600;
}

.mk-band {
    display: grid;
    justify-items: center;
    margin: 0 5cqw;
    padding: 6cqw;
    border-radius: calc(var(--mk-r) * 2);
    color: var(--mk-on);
    background: var(--mk-accent);
}

.mk-band .mk-line {
    width: 60%;
    opacity: 0.45;
}

.mk-band .mk-line--short {
    width: 40%;
}

.mk-band .mk-btn {
    margin-top: 2cqw;
}

.mk-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding: 4.5cqw 5cqw;
    border-top: 1px solid var(--mk-line);
}

/* Tema: Kafe */
.mock--cafe {
    --mk-bg: #f7f0e6;
    --mk-ink: #3a2a1f;
    --mk-accent: #9c4f25;
    --mk-head: Georgia, "Times New Roman", serif;
    --mk-c1: #d9a878;
    --mk-c2: #e8cfae;
    --mk-c3: #c98a55;
}

.mock--cafe .mk-h { font-weight: 400; font-style: italic; }
.mock--cafe .mk-art i:nth-child(1) { inset: 14%; border-radius: 50%; background: #f4eadf; box-shadow: 0 2cqw 4cqw rgb(58 42 31 / 0.25); }
.mock--cafe .mk-art i:nth-child(2) { inset: 26%; border-radius: 50%; background: #fff; }
.mock--cafe .mk-art i:nth-child(3) { inset: 32%; border-radius: 50%; background: radial-gradient(circle at 50% 46%, #f0d9bb 0 16%, transparent 17%), radial-gradient(circle at 44% 40%, #8a5a36, #4a2c18 70%); }

/* Tema: Mimarlık */
.mock--architecture {
    --mk-bg: #f3f2ef;
    --mk-ink: #111;
    --mk-accent: #111;
    --mk-r: 0px;
    --mk-rb: 0px;
    --mk-c1: #cfcac1;
    --mk-c2: #9c968c;
    --mk-c3: #e1ddd5;
}

.mock--architecture .mk-h { font-weight: 500; text-transform: uppercase; letter-spacing: -0.01em; font-size: 5.2cqw; }
.mock--architecture .mk-art { background: linear-gradient(180deg, #dfe4e7 0 62%, #cbc5ba 62%); }
.mock--architecture .mk-art i:nth-child(1) { left: 12%; bottom: 38%; width: 34%; height: 50%; background: linear-gradient(90deg, #2a2a2a, #4a4a4a); }
.mock--architecture .mk-art i:nth-child(2) { right: 8%; bottom: 38%; width: 50%; height: 30%; background: repeating-linear-gradient(90deg, #bdb6aa 0 3cqw, #a39c90 3cqw 3.4cqw); }
.mock--architecture .mk-art i:nth-child(3) { left: 30%; bottom: 66%; width: 52%; height: 3%; background: #111; }

/* Tema: Klinik */
.mock--clinic {
    --mk-bg: #f2fbfa;
    --mk-ink: #0f3b3a;
    --mk-accent: #0a7468;
    --mk-r: 1.8cqw;
    --mk-c1: #c9eee7;
    --mk-c2: #e1f4f1;
    --mk-c3: #b5e4dc;
}

.mock--clinic .mk-art { background: linear-gradient(160deg, #dff5f1, #bfe9e2); }
.mock--clinic .mk-art i:nth-child(1) { inset: 16% 12% 22% 18%; border-radius: 46% 54% 50% 50% / 52% 44% 56% 48%; background: #fff; box-shadow: 0 2cqw 5cqw rgb(15 59 58 / 0.12); }
.mock--clinic .mk-art i:nth-child(2) { top: 34%; left: 38%; width: 22%; aspect-ratio: 1; border-radius: 22%; background: linear-gradient(#fff, #fff) center / 46% 14% no-repeat, linear-gradient(#fff, #fff) center / 14% 46% no-repeat, #12a594; }
.mock--clinic .mk-art i:nth-child(3) { right: 12%; bottom: 14%; width: 14%; aspect-ratio: 1; border-radius: 50%; background: #12a594; opacity: 0.35; }

/* Tema: Otel */
.mock--hotel {
    --mk-bg: #0f1c2a;
    --mk-ink: #f1e8d8;
    --mk-accent: #c8a76a;
    --mk-on: #0f1c2a;
    --mk-line: rgb(255 255 255 / 0.1);
    --mk-head: Georgia, "Times New Roman", serif;
    --mk-r: 0.4cqw;
    --mk-rb: 0.4cqw;
    --mk-c1: #2b4a6b;
    --mk-c2: #6b5b8e;
    --mk-c3: #e98b6d;
}

.mock--hotel .mk-h { font-weight: 400; }
.mock--hotel .mk-art { border-radius: 50% 50% 0.4cqw 0.4cqw / 34% 34% 0.4cqw 0.4cqw; background: linear-gradient(180deg, #f5b98a 0%, #e98b6d 38%, #6b5b8e 72%, #1f3550 100%); }
.mock--hotel .mk-art i:nth-child(1) { left: 0; right: 0; bottom: 0; height: 32%; background: linear-gradient(#2b4a6b, #142a40); }
.mock--hotel .mk-art i:nth-child(2) { left: 38%; top: 46%; width: 24%; aspect-ratio: 1; border-radius: 50%; background: #ffd9a0; }
.mock--hotel .mk-art i:nth-child(3) { left: 20%; right: 20%; bottom: 26%; height: 1.2%; background: rgb(255 217 160 / 0.7); }

/* Tema: Yazılım */
.mock--saas {
    --mk-bg: #0b0c10;
    --mk-ink: #f5f5f7;
    --mk-accent: #355de0;
    --mk-line: rgb(255 255 255 / 0.08);
    --mk-r: 1.4cqw;
    --mk-c1: #15171e;
    --mk-c2: #1b2030;
    --mk-c3: #232a40;
}

.mock--saas .mk-kicker { color: #8fa8ff; }
.mock--saas .mk-art { border: 1px solid #262a35; background: #15171e; }
.mock--saas .mk-art i:nth-child(1) { left: 8%; right: 8%; bottom: 10%; height: 52%; background: linear-gradient(to top, rgb(79 124 255 / 0.05), rgb(79 124 255 / 0.55)); clip-path: polygon(0 100%, 0 70%, 18% 58%, 34% 66%, 52% 34%, 70% 44%, 86% 16%, 100% 24%, 100% 100%); }
.mock--saas .mk-art i:nth-child(2) { left: 8%; top: 10%; width: 40%; height: 7%; border-radius: 1cqw; background: #262a35; }
.mock--saas .mk-art i:nth-child(3) { right: 8%; top: 10%; width: 18%; height: 7%; border-radius: 1cqw; background: #4f7cff; }

/* Tema: E-ticaret */
.mock--shop {
    --mk-bg: #fff;
    --mk-ink: #151515;
    --mk-accent: #d63a52;
    --mk-r: 1cqw;
    --mk-c1: #f3e9e4;
    --mk-c2: #f6efe0;
    --mk-c3: #e9eef2;
}

.mock--shop .mk-art i:nth-child(1) { left: 37%; bottom: 18%; width: 26%; height: 52%; border-radius: 3cqw 3cqw 1.6cqw 1.6cqw; background: linear-gradient(#f9d7cf, #e7a597); }
.mock--shop .mk-art i:nth-child(2) { left: 43%; bottom: 70%; width: 14%; height: 9%; border-radius: 0.8cqw; background: #2b2b2b; }
.mock--shop .mk-art i:nth-child(3) { left: 28%; bottom: 14%; width: 44%; height: 5%; border-radius: 50%; background: rgb(0 0 0 / 0.12); filter: blur(0.6cqw); }

/* Tema: Portfolyo */
.mock--portfolio {
    --mk-c1: #141414;
    --mk-c2: #ffd2c0;
    --mk-c3: #e9e9e9;
}

.mock--portfolio .mk-art i:nth-child(1) { left: 18%; top: 18%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: #ff5a1f; }
.mock--portfolio .mk-art i:nth-child(2) { right: 14%; bottom: 16%; width: 34%; aspect-ratio: 1; background: #fff; transform: rotate(12deg); }
.mock--portfolio .mk-art i:nth-child(3) { left: 10%; right: 10%; bottom: 46%; height: 1.2%; background: #fff; opacity: 0.5; }

/* Tema: Hukuk */
.mock--law {
    --mk-bg: #f6f3ee;
    --mk-ink: #1e2a38;
    --mk-accent: #8a6a3d;
    --mk-head: Georgia, "Times New Roman", serif;
    --mk-r: 0.6cqw;
    --mk-rb: 0.6cqw;
    --mk-c1: #e8e0d2;
    --mk-c2: #d6c9b3;
    --mk-c3: #cbd2da;
}

.mock--law .mk-h { font-weight: 400; }
.mock--law .mk-art { background: linear-gradient(160deg, #e8e0d2, #d6c9b3); }
.mock--law .mk-art i:nth-child(1) { left: 16%; right: 16%; bottom: 16%; height: 46%; background: repeating-linear-gradient(90deg, #f6f3ee 0 6cqw, transparent 6cqw 9.5cqw); }
.mock--law .mk-art i:nth-child(2) { left: 12%; right: 12%; top: 18%; height: 18%; background: #f6f3ee; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.mock--law .mk-art i:nth-child(3) { left: 12%; right: 12%; bottom: 10%; height: 6%; background: #f6f3ee; }

/* ---------- Proje filtresi ---------- */
.filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.filter {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 40px;
    padding: 0 1rem;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: #fff;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ink-soft);
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.filter span {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--faint);
}

.filter:hover {
    border-color: var(--ink);
}

.filter[aria-pressed="true"] {
    color: #fff;
    background: var(--ink);
    border-color: var(--ink);
}

.filter[aria-pressed="true"] span {
    color: rgb(255 255 255 / 0.65);
}

/* ---------- Hizmetler ---------- */
.service-grid {
    display: grid;
    gap: 1.1rem;
}

.service {
    position: relative;
    overflow: hidden;
    padding: 1.4rem 1.4rem 2rem;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: #fff;
    text-align: center;
    transition: border-color 0.3s, transform 0.4s var(--ease), box-shadow 0.4s var(--ease), opacity 0.8s var(--ease);
}

.service::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--brand) 9%, transparent), transparent 45%);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}

.service:hover {
    border-color: var(--brand-200);
    box-shadow: var(--shadow);
}

.service:hover::before {
    opacity: 1;
}

.service__art {
    position: relative;
    display: grid;
    place-items: center;
    height: 190px;
    margin-bottom: 1.6rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background:
        radial-gradient(circle, rgb(20 20 20 / 0.09) 1px, transparent 1.2px) 0 0 / 16px 16px,
        var(--bg-soft);
}

.service__index {
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--brand-600);
}

.service__title {
    margin-top: 0.4rem;
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: -0.035em;
}

.service__text {
    max-width: 30ch;
    margin: 0.5rem auto 0;
    color: var(--muted);
}

/* Hizmet çizimleri (yalnızca CSS) */
.ill {
    position: relative;
    display: grid;
    gap: 8px;
    width: 220px;
    padding: 12px;
    border: 1px solid var(--line-2);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 30px -22px rgb(20 20 20 / 0.4);
    transition: transform 0.5s var(--ease);
}

.service:hover .ill {
    transform: translateY(-4px) rotate(-1deg);
}

.ill b,
.ill i,
.ill u {
    display: block;
}

.ill__bar {
    width: 40%;
    height: 8px;
    border-radius: 4px;
    background: #e8e8e8;
}

.ill__hero {
    position: relative;
    height: 50px;
    border-radius: 6px;
    background: var(--brand-100);
}

.ill__handles {
    position: absolute;
    inset: -4px;
    border: 1.5px solid var(--brand);
}

.ill__handles i {
    position: absolute;
    width: 7px;
    height: 7px;
    border: 1.5px solid var(--brand);
    background: #fff;
}

.ill__handles i:nth-child(1) { top: -4px; left: -4px; }
.ill__handles i:nth-child(2) { top: -4px; right: -4px; }
.ill__handles i:nth-child(3) { bottom: -4px; left: -4px; }
.ill__handles i:nth-child(4) { bottom: -4px; right: -4px; }

.ill .ill__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.ill__row i {
    height: 26px;
    border-radius: 5px;
    background: #f0f0f0;
}

.ill--code {
    gap: 7px;
    border-color: #262626;
    background: #161616;
}

.ill .ill__tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 4px;
}

.ill__tabs i {
    width: 44px;
    height: 8px;
    border-radius: 4px;
    background: #2c2c2c;
}

.ill__tabs i:first-child {
    background: #3a3a3a;
}

.ill .ill__ln {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 8px;
}

.ill__ln.i1 { padding-left: 14px; }
.ill__ln.i2 { padding-left: 28px; }

.ill__ln i {
    height: 7px;
    border-radius: 4px;
    background: #4a4a4a;
}

.ill__ln i.w1 { width: 22px; }
.ill__ln i.w2 { width: 38px; }
.ill__ln i.w3 { width: 60px; }
.ill__ln i.o { background: var(--brand); }

.ill__ln .caret-s {
    width: 2px;
    height: 11px;
    border-radius: 0;
    background: var(--brand);
    animation: blink 1.1s steps(1, end) infinite;
}

.ill--corp {
    width: 200px;
    height: 132px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.ill .ill__page {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: start;
    gap: 7px;
    padding: 10px;
    border: 1px solid var(--line-2);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 16px 30px -22px rgb(20 20 20 / 0.4);
}

.ill .ill__page--back {
    background: #f6f6f6;
    transform: rotate(-7deg) translate(-14px, 6px);
}

.ill__nav {
    height: 7px;
    border-radius: 4px;
    background: #e8e8e8;
}

.ill__banner {
    height: 42px;
    border-radius: 6px;
    background: linear-gradient(120deg, var(--brand), var(--brand-300));
}

.ill .ill__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.ill__cols u {
    height: 30px;
    border-radius: 5px;
    background: #f0f0f0;
}

.ill--app {
    grid-template-columns: 76px 1fr;
    align-items: end;
}

.ill .ill__panel {
    display: grid;
    gap: 9px;
    padding: 6px;
    border-radius: 8px;
    background: var(--bg-soft);
}

.ill .ill__toggle {
    position: relative;
    transition: background-color 0.4s;
    width: 30px;
    height: 16px;
    border-radius: 99px;
    background: #dcdcdc;
}

.ill__toggle::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.4s var(--ease);
}

.ill .ill__toggle.on {
    background: var(--brand);
}

.ill__toggle.on::after {
    transform: translateX(14px);
}

.ill .ill__chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 80px;
    padding: 0 4px;
    border-bottom: 1px solid var(--line-2);
}

.ill__chart i {
    flex: 1;
    border-radius: 4px 4px 0 0;
    background: #e6e6e6;
    transition: height 0.6s var(--ease);
}

.ill__chart i:nth-child(1) { height: 34%; }
.ill__chart i:nth-child(2) { height: 58%; }
.ill__chart i:nth-child(3) { height: 44%; background: var(--brand-300); }
.ill__chart i:nth-child(4) { height: 76%; }
.ill__chart i:nth-child(5) { height: 92%; background: var(--brand); }

.service:hover .ill__chart i:nth-child(1) { height: 52%; }
.service:hover .ill__chart i:nth-child(2) { height: 40%; }
.service:hover .ill__chart i:nth-child(4) { height: 88%; }

.principles {
    display: grid;
    justify-items: center;
    margin-top: clamp(3.5rem, 7vw, 5rem);
    text-align: center;
}

.principles__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem;
    max-width: 52rem;
    margin-top: 1.4rem;
}

.principles__list li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-size: 0.95rem;
    font-weight: 500;
}

.principles__list .icon {
    width: 16px;
    height: 16px;
    color: var(--brand);
}

/* ---------- Süreç ---------- */
.steps {
    position: relative;
    max-width: 46rem;
    margin: 0 auto;
}

.steps__rail {
    position: absolute;
    top: 28px;
    bottom: 28px;
    left: 50%;
    width: 2px;
    background: var(--line);
    transform: translateX(-50%);
}

.steps__fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(var(--brand), var(--brand-300));
    transform: scaleY(var(--progress, 0));
    transform-origin: 50% 0;
}

.steps__list {
    position: relative;
    display: grid;
    gap: clamp(3.5rem, 8vw, 5rem);
    margin: 0;
}

.step {
    display: grid;
    justify-items: center;
    text-align: center;
}

.step__num {
    position: relative;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 1.1rem;
    border: 1px solid var(--line-2);
    border-radius: 50%;
    background: #fff;
    font-family: var(--mono);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
    transition: background-color 0.5s, color 0.5s, border-color 0.5s, box-shadow 0.5s;
}

.step.is-active .step__num {
    color: #fff;
    background: var(--brand-600);
    border-color: var(--brand-600);
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--brand) 14%, transparent);
}

.step__title,
.step__text {
    position: relative;
    padding: 0.15rem 1rem;
    background: var(--bg);
}

.step__title {
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
    font-weight: 600;
    letter-spacing: -0.04em;
}

.step__title {
    padding-bottom: 0.35rem;
}

.step__text {
    max-width: 38ch;
    padding-bottom: 0.4rem;
    color: var(--muted);
}

/* ---------- İletişim ---------- */
.contact {
    display: grid;
    gap: 1.5rem;
}

.contact__side {
    display: grid;
    align-content: start;
    gap: 1rem;
}

.bizcard {
    position: relative;
    overflow: hidden;
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: #fff;
    box-shadow: var(--shadow);
    transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 0.5s var(--ease), opacity 0.8s var(--ease);
}

.bizcard.is-tilting {
    transition: transform 0.12s linear;
}

.bizcard__glow {
    position: absolute;
    top: -130px;
    right: -90px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--brand) 30%, transparent), transparent 70%);
    pointer-events: none;
}

.bizcard__top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bizcard__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.bizcard__brand .logo__svg {
    height: 18px;
}

.bizcard__label {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #5c5c5c;
}

.bizcard__person {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.75rem;
}

.avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 72px;
    height: 72px;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--line-2);
    background: var(--ink);
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar__initials {
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #fff;
}

.bizcard__who {
    display: grid;
}

.bizcard__name {
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.2;
}

.bizcard__role {
    margin-top: 0.15rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--brand-600);
}

.bizcard__bio {
    position: relative;
    margin-top: 1rem;
    font-size: 0.93rem;
    color: var(--muted);
}

.bizcard__lines {
    position: relative;
    display: grid;
    gap: 0.35rem;
    margin-top: 1rem;
}

.bizcard__lines a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.93rem;
    color: var(--ink-soft);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.bizcard__lines a:hover {
    color: var(--brand-600);
}

.bizcard__lines .icon {
    width: 15px;
    height: 15px;
    color: var(--brand);
}

.bizcard__foot {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1.4rem;
    padding-top: 1.1rem;
    border-top: 1px dashed var(--line-2);
}

.bizcard__social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.bizcard__social .icon-btn {
    width: 36px;
    height: 36px;
}

.channels {
    display: grid;
    gap: 0.6rem;
}

.channel {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s, transform 0.25s var(--ease);
}

a.channel:hover {
    border-color: var(--brand-200);
    transform: translateY(-1px);
}

.channel__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    color: var(--brand-600);
    background: var(--brand-50);
}

.channel__icon .icon {
    width: 17px;
    height: 17px;
}

.channel__body {
    display: grid;
    min-width: 0;
}

.channel__label {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--faint);
}

.channel__value {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.channel__go {
    width: 16px;
    height: 16px;
    margin-left: auto;
    color: var(--faint);
}

.form {
    padding: clamp(1.25rem, 3.5vw, 2.25rem);
    border: 1px solid var(--line);
    border-radius: 24px;
    background: #fff;
    box-shadow: var(--shadow);
}

.form__head {
    margin-bottom: 1.25rem;
}

.hp-field {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form__grid {
    display: grid;
    gap: 1rem;
}

.field {
    min-width: 0;
}

.field__label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.86rem;
    font-weight: 600;
}

.field__req {
    color: var(--brand-600);
}

.field__opt {
    font-weight: 400;
    color: var(--faint);
}

.field__input {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--line-2);
    border-radius: 12px;
    background: var(--bg-soft);
    font-size: 1rem;
    line-height: 1.4;
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.field__input:hover {
    border-color: #cfcfcf;
}

.field__input:focus {
    outline: none;
    border-color: var(--brand);
    background: #fff;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent);
}

.field__input[aria-invalid="true"] {
    border-color: #e5484d;
}

.field__textarea {
    min-height: 140px;
    resize: vertical;
}

.field__select {
    position: relative;
    display: block;
}

.field__select select {
    appearance: none;
    padding-right: 2.5rem;
    cursor: pointer;
}

.field__chevron {
    position: absolute;
    top: 50%;
    right: 0.9rem;
    width: 16px;
    height: 16px;
    color: var(--faint);
    transform: translateY(-50%) rotate(90deg);
    pointer-events: none;
}

.field__error {
    margin-top: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #d92d33;
}

.field__error:empty {
    display: none;
}

.check {
    position: relative;
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 0.7rem;
    align-items: start;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--muted);
    cursor: pointer;
}

.check__input {
    position: absolute;
    width: 20px;
    height: 20px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.check__box {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border: 1px solid #cfcfcf;
    border-radius: 6px;
    background: #fff;
    transition: background-color 0.2s, border-color 0.2s;
}

.check__box .icon {
    width: 13px;
    height: 13px;
    color: #fff;
    stroke-width: 3;
    opacity: 0;
}

.check__input:checked + .check__box {
    background: var(--brand-600);
    border-color: var(--brand-600);
}

.check__input:checked + .check__box .icon {
    opacity: 1;
}

.check__input:focus-visible + .check__box {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.check__input[aria-invalid="true"] + .check__box {
    border-color: #e5484d;
}

.check__text a {
    color: var(--ink);
}

.form__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.25rem;
    margin-top: 1.5rem;
}

.form__foot .btn {
    width: 100%;
}

.form-status {
    font-size: 0.92rem;
    font-weight: 600;
}

.form-status:empty {
    display: none;
}

.form-status.is-success {
    color: #15803d;
}

.form-status.is-error {
    color: #d92d33;
}

/* ---------- KVKK ---------- */
.glance {
    display: grid;
    gap: 0.9rem;
}

.glance__item {
    display: grid;
    justify-items: center;
    padding: 1.6rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: #fff;
    text-align: center;
}

.glance__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--brand-600);
    background: var(--brand-50);
}

.glance__icon .icon {
    width: 18px;
    height: 18px;
}

.glance__num {
    margin-top: 1rem;
    font-size: clamp(2.6rem, 2rem + 2vw, 3.4rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.06em;
    font-variant-numeric: tabular-nums;
}

.glance__num span {
    margin-left: 0.4rem;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--muted);
}

.glance__text {
    max-width: 26ch;
    margin-top: 0.75rem;
    font-size: 0.92rem;
    color: var(--muted);
}

.journey {
    display: grid;
    justify-items: center;
    margin-top: clamp(3.5rem, 7vw, 5rem);
    text-align: center;
}

.journey__steps {
    display: grid;
    gap: 1.75rem;
    width: 100%;
    max-width: 58rem;
    margin-top: 1.75rem;
}

.journey__step {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.3rem;
}

.journey__icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 0.5rem;
    border: 1px solid var(--line-2);
    border-radius: 50%;
    background: #fff;
}

.journey__icon .icon {
    width: 20px;
    height: 20px;
}

.journey__step:last-child .journey__icon {
    border-color: var(--brand);
    color: var(--brand-600);
}

.journey__step b {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.journey__step span:last-child {
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--muted);
}

.note {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    max-width: 46rem;
    margin: clamp(3rem, 6vw, 4rem) auto 0;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--brand-100);
    border-radius: 18px;
    background: var(--brand-50);
    font-size: 0.95rem;
    color: var(--ink-soft);
}

.note__icon {
    flex: none;
}

.note__icon .icon {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    color: var(--brand-600);
}

.details {
    display: grid;
    justify-items: center;
    max-width: 46rem;
    margin: clamp(3.5rem, 7vw, 5rem) auto 0;
}

.details__item {
    width: 100%;
    border-bottom: 1px solid var(--line);
}

.details__item:first-of-type {
    margin-top: 1.25rem;
    border-top: 1px solid var(--line);
}

.details__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 0.25rem;
    font-size: 1.04rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    list-style: none;
    cursor: pointer;
}

.details__item summary::-webkit-details-marker {
    display: none;
}

.details__icon {
    width: 18px;
    height: 18px;
    color: var(--muted);
    transition: transform 0.3s var(--ease);
}

.details__item[open] .details__icon {
    color: var(--brand-600);
    transform: rotate(45deg);
}

.details__body {
    padding: 0 0.25rem 1.25rem;
    color: var(--muted);
}

.details__body ul {
    padding-left: 1.1rem;
}

.details__body li + li {
    margin-top: 0.45rem;
}

.details__body p + p {
    margin-top: 0.6rem;
}

.details__body a {
    color: var(--ink);
}

.details__body .rights {
    display: grid;
    gap: 0.5rem;
    padding-left: 0;
}

.details__body .rights li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
}

.rights .icon {
    width: 16px;
    height: 16px;
    margin-top: 4px;
    color: var(--brand);
}

.details__updated {
    margin-top: 1.5rem;
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--faint);
}

/* ---------- Ana sayfa: kartvizit ---------- */
.meet {
    padding-top: 0;
}

.meet__stage {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    justify-items: center;
    max-width: 52rem;
    margin: 0 auto;
    padding: clamp(3.5rem, 7vw, 5rem) clamp(1rem, 4vw, 3rem) clamp(2.5rem, 5vw, 3.5rem);
    border: 1px solid var(--line);
    border-radius: 32px;
    background: var(--bg-soft);
}

.meet__stage .canvas {
    -webkit-mask-image: radial-gradient(ellipse 75% 80% at 50% 45%, #000 30%, transparent 85%);
    mask-image: radial-gradient(ellipse 75% 80% at 50% 45%, #000 30%, transparent 85%);
}

.meet__card {
    position: relative;
    width: min(100%, 27rem);
}

.meet__card .bizcard {
    text-align: left;
}

/* Tasarım aracındaki ölçü etiketi */
.meet__size {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: var(--faint);
}

.meet__size::before,
.meet__size::after {
    content: "";
    width: 2.25rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-2));
}

.meet__size::after {
    transform: scaleX(-1);
}

/* ---------- Çağrı bandı ---------- */
.cta-band {
    padding: 0 0 clamp(4.5rem, 3rem + 5vw, 7.5rem);
}

.cta-band__box {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    justify-items: center;
    padding: clamp(3rem, 2rem + 6vw, 6rem) clamp(1.5rem, 5vw, 4rem);
    border-radius: 32px;
    color: #fff;
    background: var(--brand);
    text-align: center;
}

.cta-band__grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to right, rgb(255 255 255 / 0.12) 1px, transparent 1px) 0 0 / 56px 56px,
        linear-gradient(to bottom, rgb(255 255 255 / 0.12) 1px, transparent 1px) 0 0 / 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 20%, transparent 75%);
}

.cta-band__title {
    max-width: 18ch;
    font-size: clamp(2rem, 1.2rem + 3.2vw, 3.7rem);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.05em;
    text-wrap: balance;
}

.cta-band__text {
    max-width: 38ch;
    margin-top: 1rem;
    font-size: 1.17rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
}

.cta-band__box .btn {
    margin-top: 2rem;
}

/* ---------- Alt bilgi ---------- */
.footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(4rem, 3rem + 5vw, 7rem) 0 clamp(1.25rem, 2.5vw, 1.75rem);
    border-top: 1px solid var(--line);
    text-align: center;
}

/* Kapanış satırının arkasında çok hafif turuncu ışık ve ızgara (sayfa başlığındaki tuvalin yankısı) */
.footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: -1;
    height: 30rem;
    background:
        radial-gradient(40% 70% at 50% 0%, color-mix(in srgb, var(--brand) 10%, transparent) 0%, transparent 70%),
        linear-gradient(to right, rgb(20 20 20 / 0.04) 1px, transparent 1px) 50% 0 / 72px 72px,
        linear-gradient(to bottom, rgb(20 20 20 / 0.04) 1px, transparent 1px) 50% 0 / 72px 72px;
    -webkit-mask-image: radial-gradient(ellipse 60% 85% at 50% 0%, #000 25%, transparent 75%);
    mask-image: radial-gradient(ellipse 60% 85% at 50% 0%, #000 25%, transparent 75%);
    pointer-events: none;
}

.footer__inner {
    display: grid;
    gap: clamp(3rem, 2rem + 4vw, 5rem);
}

/* Kapanış: müsaitlik rozeti, büyük satır, e-posta */
.footer__lead {
    display: grid;
    justify-items: center;
    gap: 1.4rem;
}

.footer__line {
    max-width: 16ch;
    font-size: clamp(2.3rem, 1.1rem + 4.6vw, 5rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.058em;
    text-wrap: balance;
}

/* Uzun bir alt bilgi yazısı girilirse dev başlık yerine sakin bir paragraf boyutu */
.footer__line--long {
    max-width: 32ch;
    font-size: clamp(1.4rem, 1rem + 1.4vw, 2.1rem);
    line-height: 1.2;
    letter-spacing: -0.035em;
}

.footer__mail {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 0.2rem;
}

.footer__email {
    font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.5rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ink);
    overflow-wrap: anywhere;
}

/* Müsaitlik rozeti: açık (yeşil, nabız atar) · yoğun (kehribar) · kapalı (gri, sabit) */
.status {
    --status: #1a9a52;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 34px;
    padding: 0 0.95rem 0 0.8rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgb(255 255 255 / 0.8);
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--ink-soft);
}

.status--busy {
    --status: #d98a00;
}

.status--closed {
    --status: #9b9b9b;
}

.status__dot {
    position: relative;
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--status);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--status) 16%, transparent);
}

.status__dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--status);
    animation: ping 2.6s var(--ease) infinite;
}

.status--closed .status__dot::after {
    display: none;
}

/* Bölüm başlıkları: logodaki "— WEB —" gibi iki yanında ince çizgi olan yazı */
.footer__title {
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--faint);
}

.footer__works > .footer__works-head .footer__title,
.footer__tech > .footer__title {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.footer__works > .footer__works-head .footer__title::before,
.footer__works > .footer__works-head .footer__title::after,
.footer__tech > .footer__title::before,
.footer__tech > .footer__title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-2));
}

.footer__works > .footer__works-head .footer__title::after,
.footer__tech > .footer__title::after {
    transform: scaleX(-1);
}

/* Son çalışmalar: küçük proje pencereleri (fareyle gelince sayfa pencere içinde kayar) */
.footer__works {
    display: grid;
    gap: 1.75rem;
}

.footer__works-head {
    display: grid;
    justify-items: center;
    gap: 0.6rem;
}

.footer__works-head .footer__title {
    width: min(100%, 34rem);
}

.footer__all {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
}

.footer__all .icon {
    width: 1em;
    height: 1em;
    transition: transform 0.3s var(--ease);
}

.footer__all:hover .icon {
    transform: translateX(3px);
}

.footer__works-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer__work {
    min-width: 0;
}

.footer__work .window {
    border-radius: 10px;
    box-shadow: 0 1px 0 rgb(0 0 0 / 0.02), 0 18px 32px -24px rgb(20 20 20 / 0.32);
}

.footer__work .window__bar {
    gap: 0.4rem;
    height: 22px;
    padding: 0 0.5rem;
    border-radius: 9px 9px 0 0;
}

.footer__work .window__dots {
    gap: 3px;
}

.footer__work .window__dots i {
    width: 6px;
    height: 6px;
}

.footer__work .window__url {
    height: 13px;
    padding: 0 0.4rem;
    border-radius: 4px;
    font-size: 0.5rem;
    transform: translateX(-11px);
}

.footer__work .window__lock {
    display: none;
}

.footer__work .window__screen {
    border-radius: 0 0 9px 9px;
}

.footer__work .window__select {
    inset: -5px;
    border-radius: 13px;
}

.footer__work .window__tag {
    font-size: 0.6rem;
}

.footer__work .window__tag em {
    display: none;
}

.footer__work-meta {
    display: grid;
    justify-items: center;
    gap: 0.1rem;
    margin-top: 0.85rem;
}

.footer__work-title {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.footer__work-cat {
    font-family: var(--mono);
    font-size: 0.64rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--faint);
}

/* Sütunlar: sayfalar · hizmetler · iletişim · sosyal */
.footer__cols {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.25rem 1rem;
    padding-block: clamp(2.25rem, 4vw, 3rem);
    border-block: 1px solid var(--line);
}

.footer__col {
    flex: 0 0 calc(50% - 0.5rem);
    min-width: 0;
}

.footer__col--contact {
    flex-basis: 100%;
}

.footer__list {
    display: grid;
    justify-items: center;
    gap: 0.25rem;
    margin: 0.9rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.95rem;
    color: var(--ink-soft);
}

.footer__list > li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    max-width: 100%;
    min-height: 34px;
    overflow-wrap: anywhere;
}

.footer__list a {
    color: inherit;
    transition: color 0.2s;
}

.footer__list a:hover {
    color: var(--ink);
}

.footer__social {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.footer__social .icon {
    width: 15px;
    height: 15px;
    color: var(--muted);
    transition: color 0.2s;
}

.footer__social:hover .icon {
    color: var(--brand-600);
}

.footer__clock {
    font-family: var(--mono);
    font-size: 0.8rem;
    color: var(--muted);
}

.footer__clock-dot {
    width: 6px;
    height: 6px;
    margin-right: 0.15rem;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-100);
}

/* Kullandığımız teknolojiler: tek renkli logolar, üzerine gelince kendi renklerine döner */
.footer__tech {
    display: grid;
    justify-items: center;
    gap: 1.5rem;
}

.footer__tech > .footer__title {
    width: min(100%, 34rem);
}

.tech {
    /* Dört sütun (2 sıra); geniş ekranda tek sıra — yarım kalan sıra olmaz */
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 5.75rem));
    justify-content: center;
    gap: 1.4rem 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tech__item {
    --tc: var(--ink);
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 0.55rem;
    min-width: 0;
    color: var(--faint);
    text-align: center;
}

.tech__icon {
    width: 26px;
    height: 26px;
    transition: color 0.35s, transform 0.45s var(--ease);
}

.tech__name {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.02em;
    line-height: 1.3;
    color: var(--faint);
    transition: color 0.3s;
}

.tech__item--html5 { --tc: #e34f26; }
.tech__item--css { --tc: #663399; }
.tech__item--javascript { --tc: #d9b600; }
.tech__item--php { --tc: #777bb4; }
.tech__item--figma { --tc: #f24e1e; }
.tech__item--git { --tc: #f05032; }
.tech__item--letsencrypt { --tc: #003a70; }
.tech__item--searchconsole { --tc: #4285f4; }

@media (hover: hover) and (pointer: fine) {
    .tech__item:hover .tech__icon {
        color: var(--tc);
        transform: translateY(-3px) scale(1.06);
    }

    .tech__item:hover .tech__name {
        color: var(--ink);
    }
}

/* Alt şerit */
.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1.25rem;
    font-size: 0.86rem;
    color: var(--muted);
}

.footer__copy {
    flex-basis: 100%;
    order: 1;
}

.logo--footer {
    flex-basis: 100%;
    justify-content: center;
}

.logo--footer .logo__svg {
    height: 20px;
}

.footer__kvkk {
    order: 2;
    color: var(--ink-soft);
}

.footer__up {
    order: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 34px;
    padding: 0 0.85rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
    overflow: hidden;
    transition: border-color 0.2s, color 0.2s;
}

.footer__up .icon {
    width: 14px;
    height: 14px;
}

.footer__up:hover {
    border-color: var(--ink);
    color: var(--ink);
}

.footer__up:hover .icon {
    animation: arrow-up-loop 0.55s var(--ease) both;
}

@media (min-width: 720px) {
    .footer__works-grid {
        grid-template-columns: repeat(var(--cols, 2), minmax(0, 17rem));
        justify-content: center;
        gap: 1.5rem;
    }

    .footer__works-grid--3 {
        --cols: 3;
    }

    .footer__works-grid--4 {
        --cols: 2;
    }

    .footer__bottom {
        justify-content: flex-start;
    }

    .logo--footer,
    .footer__copy {
        flex-basis: auto;
        order: 0;
    }

    .footer__copy {
        margin-right: auto;
    }
}

@media (min-width: 900px) {
    .footer__works-grid--4 {
        --cols: 4;
    }

    .footer__cols {
        display: grid;
        grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
        gap: 2rem;
    }

    .footer__cols--2 { --cols: 2; }
    .footer__cols--3 { --cols: 3; }

    .tech {
        grid-template-columns: repeat(8, minmax(0, 5.75rem));
        gap: 1.4rem 0.5rem;
    }

    /* Sütunlar arasında ince dikey çizgiler */
    .footer__col + .footer__col {
        border-left: 1px solid var(--line);
    }
}

/* Ekranda değilken nabız animasyonu durur */
.footer.is-paused .status__dot::after {
    animation-play-state: paused;
}

/* ---------- Küçük etkileşimler (alevle aynı dil: sıcak, kısa, amaçlı) ---------- */

/* Metin bağlantısı: alt çizgi soldan çizilir, ayrılınca sağa doğru toplanır */
.u-draw {
    position: relative;
    text-decoration: none;
}

.u-draw::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -2px;
    left: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: 100% 50%;
    transition: transform 0.4s var(--ease);
    pointer-events: none;
}

.u-draw:hover::after,
.u-draw:focus-visible::after {
    transform: scaleX(1);
    transform-origin: 0 50%;
}

/* Metin içindeki bağlantılar (KVKK, onay kutusu): ince alt çizgi hep görünür, üzerine gelince turuncu çizgi akar */
.details__body a,
.check__text a {
    text-decoration: none;
    background:
        linear-gradient(var(--brand), var(--brand)) 0 100% / 0 1.5px no-repeat,
        linear-gradient(rgb(20 20 20 / 0.38), rgb(20 20 20 / 0.38)) 0 100% / 100% 1px no-repeat;
    transition: background-size 0.45s var(--ease), color 0.2s;
}

.details__body a:hover,
.details__body a:focus-visible,
.check__text a:hover,
.check__text a:focus-visible {
    background-size: 100% 1.5px, 100% 1px;
}

/* Birincil düğmedeki ok: sağa kayıp kaybolur, soldan geri gelir */
.btn--primary:hover .btn__icon,
.btn--light:hover .btn__icon {
    transform: none;
    animation: arrow-loop 0.6s var(--ease) both;
}

/* Çerçeveli düğme: üzerine gelince kenarlık tepeden başlayıp çevresini çizer */
@property --draw {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.btn--ghost {
    overflow: visible;
}

.btn--ghost::before {
    content: "";
    position: absolute;
    inset: -1px;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(from 0deg, var(--ink) var(--draw), transparent 0);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    transition: --draw 0.7s var(--ease-io);
    pointer-events: none;
}

.btn--ghost:hover {
    border-color: var(--line-2);
}

.btn--ghost:hover::before {
    --draw: 360deg;
}

/* Logo: üzerine gelince "WEB" yazısının iki yanındaki ince çizgiler biraz uzar */
.logo__svg--stack > path[stroke-width="2.2"],
.logo-rule {
    transform-box: view-box;
    transform-origin: 171px 129.5px;
    transition: transform 0.6s var(--ease);
}

.logo:hover .logo__svg--stack > path[stroke-width="2.2"],
.logo:hover .logo-rule,
.logo:focus-visible .logo__svg--stack > path[stroke-width="2.2"],
.logo:focus-visible .logo-rule {
    transform: scaleX(1.12);
}

/* Panoya kopyala düğmesi */
.copy {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    color: var(--muted);
    transition: color 0.2s, border-color 0.2s, background-color 0.2s, transform 0.25s var(--ease);
}

.copy[hidden] {
    display: none;
}

.copy .icon {
    grid-area: 1 / 1;
    width: 14px;
    height: 14px;
    transition: opacity 0.2s, transform 0.3s var(--ease);
}

.copy__done {
    color: #1a9a52;
    opacity: 0;
    transform: scale(0.4);
}

.copy:hover {
    color: var(--ink);
    border-color: var(--line-2);
}

.copy:active {
    transform: scale(0.94);
}

.copy.is-done {
    border-color: color-mix(in srgb, #1a9a52 35%, #fff);
    background: color-mix(in srgb, #1a9a52 7%, #fff);
}

.copy.is-done .copy__icon {
    opacity: 0;
    transform: scale(0.4);
}

.copy.is-done .copy__done {
    opacity: 1;
    transform: none;
}

/* İletişim kanalları ve kartvizitte kopyala düğmesi satırın sağında durur */
.channels__item {
    position: relative;
}

.channels__item > .copy {
    position: absolute;
    top: 50%;
    right: calc(1rem + 16px + 0.6rem);
    transform: translateY(-50%);
}

.channels__item > .copy:active {
    transform: translateY(-50%) scale(0.94);
}

.channels__item.has-copy .channel__body {
    padding-right: 2.6rem;
}

/* Dar ekranda ok simgesi kalkar (kartın tamamı zaten bağlantı): uzun e-posta adresi tek satıra sığar */
@media (max-width: 479px) {
    .channels__item.has-copy .channel__go {
        display: none;
    }

    .channels__item > .copy {
        right: 0.85rem;
    }
}

.bizcard__lines li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.bizcard__lines .copy {
    width: 26px;
    height: 26px;
    border-color: transparent;
    background: transparent;
    opacity: 0.75;
}

.bizcard__lines .copy:hover,
.bizcard__lines .copy:focus-visible,
.bizcard__lines .copy.is-done {
    opacity: 1;
    border-color: var(--line);
    background: #fff;
}

.bizcard__lines .copy .icon {
    width: 13px;
    height: 13px;
}

/* Alt bilgide ortalanmış satırlarda kopyala düğmesi yer kaplamaz: metin tam ortada kalır, düğme sağına taşar */
.footer__mail .copy {
    margin-right: calc(-30px - 0.6rem);
}

.footer__copyable .copy {
    width: 28px;
    height: 28px;
    margin-right: calc(-28px - 0.35rem);
}

/* "Kopyalandı" bildirimi */
.toast {
    position: fixed;
    left: 50%;
    bottom: max(1.25rem, env(safe-area-inset-bottom));
    z-index: 70;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    max-width: calc(100% - 2rem);
    padding: 0.65rem 1.05rem 0.65rem 0.85rem;
    border-radius: 999px;
    background: var(--ink);
    box-shadow: 0 18px 40px -18px rgb(20 20 20 / 0.55);
    color: #fff;
    font-size: 0.88rem;
    line-height: 1.3;
    opacity: 0;
    transform: translate(-50%, 14px) scale(0.96);
    transition: opacity 0.25s, transform 0.4s var(--ease);
    pointer-events: none;
}

.toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.toast .icon {
    width: 16px;
    height: 16px;
    color: #6ee7a0;
}

.toast__value {
    overflow: hidden;
    font-family: var(--mono);
    font-size: 0.76rem;
    color: rgb(255 255 255 / 0.68);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Başa dön: kaydırma ilerlemesini gösteren halka (bir ekran aşağı inince belirir) */
.to-top {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 45;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.9);
    box-shadow: 0 0 0 1px rgb(20 20 20 / 0.06), 0 14px 30px -16px rgb(20 20 20 / 0.4);
    color: var(--ink);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(0.85);
    transition: opacity 0.3s, transform 0.45s var(--ease), visibility 0s linear 0.45s;
}

.to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

.to-top__ring {
    position: absolute;
    inset: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    transform: rotate(-90deg);
}

.to-top__track {
    stroke: var(--line);
}

.to-top__bar {
    stroke: var(--brand);
    stroke-linecap: round;
    stroke-dashoffset: calc(100 - var(--progress, 0) * 100);
}

.to-top__icon {
    position: relative;
    width: 18px;
    height: 18px;
}

.to-top:hover .to-top__icon {
    animation: arrow-up-loop 0.55s var(--ease) both;
}

/* Proje pencerelerinde imleci izleyen "İncele" etiketi (yalnızca masaüstü, JS ile eklenir) */
.cursor-pill {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    height: 32px;
    padding: 0 0.8rem 0 0.9rem;
    border-radius: 999px;
    background: var(--ink);
    box-shadow: 0 10px 24px -12px rgb(20 20 20 / 0.6);
    color: #fff;
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    scale: 0.6;
    transition: opacity 0.2s, scale 0.35s var(--ease);
}

.cursor-pill.is-on {
    opacity: 1;
    scale: 1;
}

.cursor-pill .icon {
    width: 13px;
    height: 13px;
    color: var(--brand-300);
}

/* Bölüm başlıkları: satırlar, görünür alana gelince maskenin altından yukarı kayar */
.ln {
    display: inline-block;
    overflow: hidden;
    padding: 0.08em 0.04em 0.16em;
    margin: -0.08em -0.04em -0.16em;
    vertical-align: top;
}

.ln > span {
    display: inline-block;
    transition: transform 1s var(--ease);
    transition-delay: calc(var(--line, 0) * 90ms);
}

.lines-ready [data-lines]:not(.is-in) .ln > span {
    transform: translate3d(0, 108%, 0);
}

/* Menünün alt kenarında kaydırma ilerlemesi: ince çizgi ve ucunda küçük, parlayan bir kor */
.nav__progress {
    position: absolute;
    right: 26px;
    bottom: -1px;
    left: 26px;
    height: 6px;
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}

.nav.is-scrolled .nav__progress {
    opacity: 1;
}

.nav.is-open .nav__progress {
    opacity: 0;
}

.nav__progress-line {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1.5px;
    border-radius: 2px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 20%, transparent), var(--brand) 70%, color-mix(in srgb, var(--brand) 70%, #ffd36b));
    transform: scaleX(var(--progress, 0));
    transform-origin: 0 50%;
}

.nav__progress-tip {
    position: absolute;
    inset: 0;
    transform: translateX(calc(var(--progress, 0) * 100%));
}

.nav__progress-tip i {
    position: absolute;
    bottom: -1.5px;
    left: -2.25px;
    width: 4.5px;
    height: 4.5px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--brand) 55%, #fff1c9);
    box-shadow: 0 0 4px 1px color-mix(in srgb, var(--brand) 80%, #ffd36b), 0 0 12px 3px color-mix(in srgb, var(--brand) 35%, transparent);
    animation: ember-glow 1.8s ease-in-out infinite paused;
}

.nav.is-scrolled .nav__progress-tip i {
    animation-play-state: running;
}

/* Hizmet çizimleri: üzerine gelince küçük bir canlanma */
.ill__handles {
    transition: transform 0.5s var(--ease), border-color 0.3s;
}

.ill__handles i {
    transition: transform 0.4s var(--ease);
}

.ill__hero {
    transition: background-color 0.4s;
}

.ill__row i {
    transition: transform 0.45s var(--ease), background-color 0.3s;
}

.ill__ln i {
    transform-origin: 0 50%;
    transition: transform 0.5s var(--ease);
}

.ill__tabs i {
    transition: background-color 0.3s, transform 0.4s var(--ease);
}

.ill .ill__page--back {
    transition: transform 0.6s var(--ease);
}

.ill .ill__page {
    transition: transform 0.6s var(--ease);
}

.ill__banner {
    background-size: 200% 100%;
    transition: background-position 0.9s var(--ease);
}

.ill__chart i {
    transform-origin: 50% 100%;
}

@media (hover: hover) and (pointer: fine) {
    .service:hover .ill__handles {
        transform: scale(1.04);
    }

    .service:hover .ill__handles i:nth-child(odd) {
        transform: translate(-2px, -2px);
    }

    .service:hover .ill__handles i:nth-child(even) {
        transform: translate(2px, 2px);
    }

    .service:hover .ill__hero {
        background: var(--brand-200);
    }

    .service:hover .ill__row i:nth-child(1) { transform: translateY(-3px); }
    .service:hover .ill__row i:nth-child(2) { transform: translateY(-3px); transition-delay: 0.06s; }
    .service:hover .ill__row i:nth-child(3) { transform: translateY(-3px); transition-delay: 0.12s; }

    .service:hover .ill__ln i.w1 { transform: scaleX(1.35); }
    .service:hover .ill__ln i.w2 { transform: scaleX(0.75); }
    .service:hover .ill__ln i.w3 { transform: scaleX(1.12); }

    .service:hover .ill__tabs i:first-child {
        transform: translateY(-1px);
    }

    .service:hover .ill__page--back {
        transform: rotate(-11deg) translate(-22px, 8px);
    }

    .service:hover .ill--corp .ill__page:not(.ill__page--back) {
        transform: rotate(2deg) translate(6px, -4px);
    }

    .service:hover .ill__banner {
        background-position: 100% 0;
    }

    .service:hover .ill .ill__toggle {
        background: var(--brand);
    }

    .service:hover .ill .ill__toggle.on {
        background: #dcdcdc;
    }

    .service:hover .ill__toggle::after {
        transform: translateX(14px);
    }

    .service:hover .ill__toggle.on::after {
        transform: none;
    }
}

@keyframes arrow-loop {
    0% { transform: none; opacity: 1; }
    42% { transform: translateX(14px); opacity: 0; }
    43% { transform: translateX(-14px); opacity: 0; }
    100% { transform: none; opacity: 1; }
}

@keyframes arrow-up-loop {
    0% { transform: none; opacity: 1; }
    42% { transform: translateY(-12px); opacity: 0; }
    43% { transform: translateY(12px); opacity: 0; }
    100% { transform: none; opacity: 1; }
}

@keyframes ember-glow {
    0%, 100% { opacity: 1; transform: scale(1); }
    35% { opacity: 0.75; transform: scale(0.82); }
    60% { opacity: 1; transform: scale(1.12); }
}

/* ---------- Görünme animasyonu ---------- */
[data-reveal] {
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.reveal-ready [data-reveal]:not(.is-in) {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translate3d(0, 16px, 0);
        filter: blur(6px);
    }
    to {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

@keyframes frame-in {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes pop {
    from {
        opacity: 0;
        transform: scale(0.4);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

@keyframes ping {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    70%, 100% {
        transform: scale(2.8);
        opacity: 0;
    }
}

@keyframes marquee {
    to {
        transform: translateX(-50%);
    }
}

/* ==========================================================================
   Duyarlı düzen
   ========================================================================== */

@media (min-width: 560px) {
    .form__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .field--full {
        grid-column: 1 / -1;
    }

    .form__foot .btn {
        width: auto;
    }

    .glance {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .details__body .rights {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 720px) {
    /* İki sütun; sayı tek kalınca (gizlenen proje/hizmet, kategori filtresi) son kart ortalanır. */
    .works--home,
    .works--grid,
    .service-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .works--grid > .work,
    .works--home.works--n2 > .work {
        flex: 0 0 calc((100% - var(--works-gap)) / 2);
    }

    /* Ana sayfa: üç proje tabletten itibaren tek sırada, eşit genişlikte (hiçbiri alta düşmez) */
    .works--home > .work {
        flex: 0 0 calc((100% - 2 * var(--works-gap)) / 3);
    }

    .works--home.works--n1 > .work {
        flex-basis: min(100%, 36rem);
    }

    .service-grid > .service {
        flex: 0 0 calc((100% - 1.1rem) / 2);
    }

    .journey__steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .journey__step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 27px;
        left: calc(50% + 40px);
        width: calc(100% - 80px + 1.75rem);
        border-top: 1.5px dashed var(--line-2);
    }
}

@media (min-width: 900px) {
    .nav__bar {
        flex-wrap: nowrap;
        padding-right: 0.45rem;
        border-radius: 999px;
    }

    .nav .logo {
        height: 58px;
    }

    .nav__toggle {
        display: none;
    }

    .nav__menu {
        position: relative;
        order: 0;
        display: block;
        width: auto;
    }

    .nav__list {
        display: flex;
        align-items: center;
        gap: 0.15rem;
        overflow: visible;
        visibility: visible;
        transition: none;
    }

    .nav__link {
        height: 40px;
        padding: 0 0.95rem;
        border: 0;
        border-radius: 999px;
        font-size: 0.92rem;
    }

    .nav__link:hover {
        color: var(--ink);
    }

    .nav__link--cta {
        margin: 0 0 0 0.5rem;
        padding: 0 1.05rem;
        color: #fff;
    }

    .nav__link--cta:hover {
        color: #fff;
        background: var(--brand-700);
    }

    .flame {
        position: absolute;
        right: 0.85rem;
        bottom: 1px;
        left: 0.85rem;
        display: block;
        height: 12px;
        pointer-events: none;
        opacity: 0;
        transform: scaleX(0.15);
        transform-origin: 50% 100%;
        transition: opacity 0.3s, transform 0.6s var(--ease);
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
    }

    /* Fitil: ince, sıcak çizgi */
    .flame::before {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 1.5px;
        border-radius: 2px;
        background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 45%, #ffd36b) 30%, color-mix(in srgb, var(--brand) 80%, #ffd36b) 50%, color-mix(in srgb, var(--brand) 45%, #ffd36b) 70%, var(--brand)) 0 0 / 200% 100%;
        box-shadow: 0 0 6px color-mix(in srgb, var(--brand) 60%, transparent);
        animation: flame-wick 2.2s linear infinite;
    }

    /* Alçak, sürekli alev yatağı */
    .flame::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 3px;
        background: linear-gradient(to top, var(--brand), color-mix(in srgb, color-mix(in srgb, var(--brand) 60%, #ffd36b) 70%, transparent) 55%, transparent);
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 4' preserveAspectRatio='none'%3E%3Cpath d='M0 4V2.4C1.5 1.2 2.5 1.2 3 2.2C3.6 0.9 5 0.8 6 2C7 1 8.4 1.2 9 2.2C9.6 1.2 11 1.2 12 2.4V4Z'/%3E%3C/svg%3E") 0 100% / 12px 100% repeat-x;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 4' preserveAspectRatio='none'%3E%3Cpath d='M0 4V2.4C1.5 1.2 2.5 1.2 3 2.2C3.6 0.9 5 0.8 6 2C7 1 8.4 1.2 9 2.2C9.6 1.2 11 1.2 12 2.4V4Z'/%3E%3C/svg%3E") 0 100% / 12px 100% repeat-x;
        animation: flame-bed 0.7s linear infinite;
    }

    /* Yalayan alev dilleri */
    .flame i {
        position: absolute;
        bottom: 0;
        left: var(--x);
        width: var(--w);
        height: var(--h);
        margin-left: calc(var(--w) / -2);
        background: linear-gradient(to top, color-mix(in srgb, var(--brand) 92%, #c01800) 0%, color-mix(in srgb, var(--brand) 85%, #ffd36b) 35%, color-mix(in srgb, var(--brand) 55%, #ffd36b) 65%, color-mix(in srgb, color-mix(in srgb, var(--brand) 30%, #ffe08a) 35%, transparent) 100%);
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16' preserveAspectRatio='none'%3E%3Cpath d='M5.4 0C5.6 4.4 9.6 7.4 9.6 11.6A4.8 4.4 0 0 1 0.4 11.6C0.4 9 2.4 7.6 3.2 5.2C4.2 6.8 5 5 5.4 0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16' preserveAspectRatio='none'%3E%3Cpath d='M5.4 0C5.6 4.4 9.6 7.4 9.6 11.6A4.8 4.4 0 0 1 0.4 11.6C0.4 9 2.4 7.6 3.2 5.2C4.2 6.8 5 5 5.4 0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
        opacity: 0;
        transform-origin: 50% 100%;
        animation: flame-lick var(--d) cubic-bezier(0.4, 0, 0.6, 1) var(--dl) infinite;
    }

    .flame i:nth-child(1) { --x: 12%; --w: 4px; --h: 7px; --d: 1.05s; --dl: -0.2s; }
    .flame i:nth-child(2) { --x: 24%; --w: 5px; --h: 9px; --d: 1.25s; --dl: -0.7s; }
    .flame i:nth-child(3) { --x: 37%; --w: 5.5px; --h: 10px; --d: 0.9s; --dl: -0.35s; }
    .flame i:nth-child(4) { --x: 50%; --w: 6px; --h: 11px; --d: 1.1s; --dl: -0.85s; }
    .flame i:nth-child(5) { --x: 63%; --w: 5.5px; --h: 10px; --d: 0.95s; --dl: -0.1s; }
    .flame i:nth-child(6) { --x: 76%; --w: 5px; --h: 9px; --d: 1.3s; --dl: -0.6s; }
    .flame i:nth-child(7) { --x: 88%; --w: 4px; --h: 7px; --d: 1.15s; --dl: -0.95s; }

    /* Kıvılcımlar */
    .flame b {
        position: absolute;
        bottom: 3px;
        left: var(--x);
        width: 1.5px;
        height: 1.5px;
        border-radius: 50%;
        background: color-mix(in srgb, var(--brand) 75%, #ffd36b);
        opacity: 0;
        animation: flame-ember var(--d) ease-out var(--dl) infinite;
    }

    .nav__link[aria-current="page"] .flame {
        left: calc(0.85rem + 6px + 0.45rem);
    }

    .flame b:nth-of-type(1) { --x: 42%; --d: 1.9s; --dl: -0.3s; }
    .flame b:nth-of-type(2) { --x: 70%; --d: 2.4s; --dl: -1.4s; }

    /* Görünmezken animasyonlar durur (boşa işlemci harcanmaz) */
    .flame::before,
    .flame::after,
    .flame i,
    .flame b {
        animation-play-state: paused;
    }

    .nav__link:hover .flame,
    .nav__link:focus-visible .flame {
        opacity: 1;
        transform: none;
    }

    /* Önizleme paneli açıkken (fare panelin içindeyken de) açılan bağlantının alevi yanık kalır */
    .nav__link[aria-expanded="true"] .flame {
        opacity: 1;
        transform: none;
    }

    .nav__link:hover .flame::before,
    .nav__link:hover .flame::after,
    .nav__link:hover .flame i,
    .nav__link:hover .flame b,
    .nav__link:focus-visible .flame::before,
    .nav__link:focus-visible .flame::after,
    .nav__link:focus-visible .flame i,
    .nav__link:focus-visible .flame b,
    .nav__link[aria-expanded="true"] .flame::before,
    .nav__link[aria-expanded="true"] .flame::after,
    .nav__link[aria-expanded="true"] .flame i,
    .nav__link[aria-expanded="true"] .flame b {
        animation-play-state: running;
    }

    /* İki sütun aynı yükseklikte biter: form, sol sütunun boyuna uzar (mesaj alanı büyür) */
    .contact {
        grid-template-columns: minmax(0, 25rem) minmax(0, 1fr);
        align-items: stretch;
        gap: 1.75rem;
    }

    .contact__main {
        display: grid;
    }

    .contact__main .form {
        display: flex;
        flex-direction: column;
    }

    .contact__main .form__grid {
        flex: 1;
        grid-template-rows: auto auto 1fr auto;
    }

    .contact__main .field--grow {
        display: grid;
        grid-template-rows: auto 1fr auto;
    }

    .contact__main .field--grow .field__textarea {
        height: 100%;
    }
}

@media (min-width: 1040px) {
    .glance {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    /* Hero: yazı solda, örnek proje ekranı sağda */
    .hero--split {
        padding-top: clamp(150px, 20vh, 200px);
        text-align: left;
    }

    .hero--split .hero__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
        align-items: center;
        justify-items: stretch;
        gap: clamp(2.5rem, 4.5vw, 4.5rem);
        /* Üst menüyle aynı hizada: solda logo, sağda "İletişim" düğmesinin kenarı */
        width: calc(min(100% - 2 * var(--gutter), var(--container)) - 1.55rem);
        translate: 0.325rem 0;
    }

    .hero--split .hero__copy {
        container-type: inline-size;
    }

    .hero--split .hero__copy,
    .hero--split .hero__title {
        justify-items: start;
    }

    /* Yazı boyutu sütun genişliğine göre: "Sade tasarım." her ekranda tek satır */
    .hero--split .hero__title {
        font-size: min(5.4rem, 15.4cqi);
    }

    .hero--split .hero__actions {
        justify-content: flex-start;
    }

    .hero--split .mac {
        width: 100%;
    }
}

@media (max-width: 899px) {
    .nav.is-open .nav__bar {
        background: rgb(255 255 255 / 0.98);
    }
}

@media (max-width: 719px) {
    /* Ana sayfa projeleri: parmakla kaydırılan şerit (bir sonraki pencere kenardan görünür) */
    .works--home {
        display: flex;
        gap: 0.9rem;
        margin-inline: calc(-1 * var(--gutter));
        padding: 0.5rem var(--gutter) 1.25rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gutter);
        scrollbar-width: none;
    }

    .works--home::-webkit-scrollbar {
        display: none;
    }

    .works--home > .work {
        flex: 0 0 86%;
        scroll-snap-align: start;
    }

    .reveal-ready .works--home > [data-reveal]:not(.is-in) {
        opacity: 1;
        transform: none;
    }

    .works--home .work__meta {
        margin-top: 1rem;
    }

    .works--grid {
        gap: 3.25rem;
    }

    .work__meta {
        margin-top: 1.1rem;
    }

    .work__title {
        font-size: 1.22rem;
    }

    .section-head {
        margin-bottom: 2.25rem;
    }

    .meet__stage {
        padding: 2.75rem 1rem 2rem;
    }

}

/* Projeler sayfası: filtre kutuları telefon ve dokunmatik tabletlerde gösterilmez; tüm projeler sade bir akışta
   (main.js'teki filtre sıfırlama koşuluyla aynı) */
@media (max-width: 719px), (pointer: coarse) and (max-width: 1023px) {
    .filters {
        display: none;
    }
}

@media (max-width: 420px) {
    .hero__actions .btn {
        width: 100%;
    }
}

/* Hareket hassasiyeti: animasyonları kapat */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }

    .marquee__track {
        flex-wrap: wrap;
        justify-content: center;
        width: auto;
    }

    .marquee__group + .marquee__group {
        display: none;
    }

    .reveal-ready [data-reveal]:not(.is-in) {
        opacity: 1;
        transform: none;
    }
}

@media print {
    .nav,
    .canvas,
    .marquee,
    .cta-band,
    .form,
    .to-top,
    .toast,
    .cursor-pill,
    .copy,
    .footer__works,
    .footer__tech,
    .footer__up {
        display: none !important;
    }

    /* Henüz kaydırılıp görünmemiş öğeler de yazdırılır */
    [data-reveal],
    .ln > span {
        opacity: 1 !important;
        transform: none !important;
    }
}