/* ============================================================
   ÜÇ YİRMİİKİ — kurumsal renkler
   sarı #EDC41A (ana renk) · antrasit #373736 (logodan ölçüldü)
   Harici font/görsel/kütüphane yok: başlıklar kullanıcının
   bilgisayarında kurulu dar (condensed) yazı tiplerinden gelir.
   ============================================================ */
@font-face {
    font-family: "UcyThin";
    font-weight: 100 400;
    font-display: swap;
    src: local("AvenirNextCondensed-UltraLight"), local("Avenir Next Condensed Ultra Light"), local("Bahnschrift Light Condensed"), local("BahnschriftLightCondensed"), local("RobotoCondensed-Light"), local("Roboto Condensed Light"), local("ArialNarrow")
}

@font-face {
    font-family: "UcyBold";
    font-weight: 500 900;
    font-display: swap;
    src: local("AvenirNextCondensed-DemiBold"), local("Avenir Next Condensed Demi Bold"), local("HelveticaNeue-CondensedBold"), local("Bahnschrift SemiBold Condensed"), local("BahnschriftSemiBoldCondensed"), local("RobotoCondensed-Bold"), local("Roboto Condensed Bold"), local("ArialNarrow-Bold")
}

:root {
    --y: #EDC41A;
    --ys: #FBF1C5;
    --yd: #C9A40E;
    --k: #373736;
    --k2: #2F2F2E;
    --paper: #FAF8F2;
    --white: #fff;
    --muted: #6E6D69;
    --line: rgba(55, 55, 54, .14);
    --thin: "UcyThin", "Arial Narrow", sans-serif;
    --bold: "UcyBold", "Arial Narrow", sans-serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --gut: clamp(18px, 4vw, 56px);
    --r: 22px;
    --ease: cubic-bezier(.19, 1, .22, 1);
    --spring: cubic-bezier(.34, 1.56, .64, 1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 84px;
    overflow-x: clip
}

body {
    background: var(--paper);
    color: var(--k);
    font: 400 17px/1.6 var(--sans);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip
}

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

a {
    color: inherit;
    text-decoration: none
}

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

button {
    background: none;
    border: 0;
    cursor: pointer
}

ul,
ol {
    list-style: none
}

address {
    font-style: normal
}

[hidden] {
    display: none !important
}

::selection {
    background: var(--y);
    color: var(--k)
}

:focus-visible {
    outline: 3px solid var(--k);
    outline-offset: 3px;
    border-radius: 8px
}

.skip {
    position: fixed;
    left: 12px;
    top: -80px;
    z-index: 300;
    background: var(--k);
    color: #fff;
    padding: 10px 16px;
    border-radius: 99px
}

.skip:focus {
    top: 12px
}

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

.w {
    width: min(1240px, 100% - var(--gut)*2);
    margin-inline: auto
}

/* ---------- tipografi ---------- */
.t-xl,
.t-l {
    font-family: var(--thin);
    font-weight: 200;
    text-transform: uppercase;
    line-height: .95;
    letter-spacing: .005em
}

.t-xl {
    font-size: clamp(44px, 6.6vw, 104px)
}

.t-l {
    font-size: clamp(38px, 4.8vw, 74px)
}

.t-xl b,
.t-l b {
    font-family: var(--bold);
    font-weight: 700
}

.t-xl .y,
.t-l .y {
    color: var(--yd)
}

.dark .t-l .y,
.dark .t-xl .y {
    color: var(--y)
}

.lead {
    font-size: clamp(17px, 1.35vw, 20px);
    color: color-mix(in srgb, var(--k) 82%, transparent);
    max-width: 36em
}

.kick {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 22px
}

/* numaraların önündeki işaret: logodaki // — sol çizgi sarı, sağ çizgi antrasit */
.kick::before {
    content: "";
    flex: none;
    width: 26px;
    height: 34px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 34'%3E%3Cpath d='M12.5 3 2.5 33' stroke='%23EDC41A' stroke-width='2.8'/%3E%3Cpath d='M23.5 1 13.5 31' stroke='%23373736' stroke-width='2.8'/%3E%3C/svg%3E") center/contain no-repeat
}

/* koyu zeminde antrasit çizgi beyaz olur (logonun koyu zemin hali) */
.dark .kick::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 34'%3E%3Cpath d='M12.5 3 2.5 33' stroke='%23EDC41A' stroke-width='2.8'/%3E%3Cpath d='M23.5 1 13.5 31' stroke='%23FFFFFF' stroke-width='2.8'/%3E%3C/svg%3E")
}

/* sarı zeminde sarı çizgi beyaz olur */
.contact .kick::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 34'%3E%3Cpath d='M12.5 3 2.5 33' stroke='%23FFFFFF' stroke-width='2.8'/%3E%3Cpath d='M23.5 1 13.5 31' stroke='%23373736' stroke-width='2.8'/%3E%3C/svg%3E")
}

.kick span {
    color: var(--muted);
    font-weight: 600
}

/* ---------- butonlar ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 56px;
    padding: 0 26px;
    border-radius: 99px;
    font-weight: 700;
    font-size: 16px;
    white-space: nowrap;
    transition: transform .5s var(--spring), background .3s, color .3s, box-shadow .3s
}

.btn svg {
    width: 20px;
    height: 20px;
    transition: transform .5s var(--ease)
}

.btn:hover {
    transform: translateY(-3px)
}

.btn:hover svg {
    transform: translateX(4px)
}

.btn-y {
    background: var(--y);
    color: var(--k);
    box-shadow: 0 10px 30px -12px rgba(201, 164, 14, .8)
}

.btn-y:hover {
    box-shadow: 0 18px 40px -14px rgba(201, 164, 14, .9)
}

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

.btn-o {
    border: 1.5px solid currentColor
}

.btn-o:hover {
    background: var(--k);
    color: #fff;
    border-color: var(--k)
}

.btn-play i {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-left: -12px;
    border-radius: 50%;
    background: var(--y)
}

.btn-play i::after {
    content: "";
    border-left: 10px solid var(--k);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    margin-left: 3px
}

/* ---------- görünür olunca ---------- */
.js .rv {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .9s var(--ease), transform 1.1s var(--ease);
    transition-delay: calc(var(--d, 0)*90ms)
}

.js .rv.in {
    opacity: 1;
    transform: none
}

/* ekranda değilken otomatik animasyonlar durur */
[data-play] .ap {
    animation-play-state: paused !important
}

[data-play].is-in .ap {
    animation-play-state: running !important
}

/* ---------- LOGO ---------- */
.logo {
    height: 44px;
    width: auto;
    --ld: var(--k);
    --ly: var(--y)
}

.logo-inv {
    --ld: #fff
}

.lg-d {
    stroke: var(--ld);
    fill: none
}

.lg-df {
    fill: var(--ld)
}

.lg-y {
    stroke: var(--ly);
    fill: none
}

.lg-yf {
    fill: var(--ly)
}

.lg-t {
    fill: var(--ld);
    font-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
    font-weight: 400
}

.js .intro .lg-y,
.js .intro .lg-d {
    stroke-dasharray: 420;
    stroke-dashoffset: 420;
    animation: draw 1.4s var(--ease) forwards
}

.js .intro .lg-df,
.js .intro .lg-yf,
.js .intro .lg-t {
    opacity: 0;
    animation: fadeIn .6s .9s forwards
}

@keyframes draw {
    to {
        stroke-dashoffset: 0
    }
}

@keyframes fadeIn {
    to {
        opacity: 1
    }
}

/* ---------- HEADER ---------- */
.hd {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    transition: background .35s, box-shadow .35s, padding .35s
}

.hd .w {
    display: flex;
    align-items: center;
    gap: 26px;
    height: 84px;
    transition: height .35s
}

.hd.solid {
    background: rgba(250, 248, 242, .92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 var(--line)
}

.hd.solid .w {
    height: 70px
}

.nav {
    display: flex;
    gap: 4px;
    margin-left: auto;
    font-weight: 600;
    font-size: 15px
}

.nav a {
    padding: 9px 14px;
    border-radius: 99px;
    transition: background .25s
}

.nav a:hover {
    background: rgba(55, 55, 54, .07)
}

.hd .btn {
    height: 46px;
    padding: 0 20px;
    font-size: 15px
}

.burger {
    display: none;
    margin-left: auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--k);
    position: relative
}

.burger i {
    position: absolute;
    left: 14px;
    right: 14px;
    height: 2px;
    background: #fff;
    transition: transform .4s var(--ease)
}

.burger i:first-child {
    top: 18px
}

.burger i:last-child {
    top: 26px
}

.burger[aria-expanded=true] i:first-child {
    transform: translateY(4px) rotate(45deg)
}

.burger[aria-expanded=true] i:last-child {
    transform: translateY(-4px) rotate(-45deg)
}

.mnav {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: var(--y);
    padding: 110px var(--gut) 40px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transform: translateY(-100%);
    transition: transform .6s var(--ease)
}

.mnav.open {
    transform: none
}

.mnav a {
    font-family: var(--bold);
    font-weight: 700;
    font-size: clamp(32px, 9vw, 52px);
    text-transform: uppercase;
    line-height: 1.15
}

.mnav p {
    margin-top: auto;
    font-weight: 600
}

@media (max-width:1020px) {

    .nav,
    .hd .btn {
        display: none
    }

    .burger {
        display: block
    }
}

/* ---------- HERO ---------- */
.hero {
    position: relative;
    padding: clamp(120px, 15vh, 160px) 0 clamp(60px, 9vh, 100px);
    overflow: hidden
}

.hero::before {
    content: "";
    position: absolute;
    right: -12vw;
    top: -20vh;
    width: 62vw;
    height: 140vh;
    background: var(--y);
    transform: skewX(-21deg);
    transform-origin: top;
    z-index: -1;
    opacity: .95
}

.hero .w {
    display: grid;
    grid-template-columns: 1.02fr 1fr;
    gap: clamp(24px, 4vw, 70px);
    align-items: center
}

.hero h1 {
    margin-bottom: 26px
}

.hero h1 span {
    display: block
}

.js .hero h1 span {
    opacity: 0;
    transform: translateY(40px);
    animation: up 1s var(--ease) forwards
}

.js .hero h1 span:nth-child(2) {
    animation-delay: .12s
}

.js .hero h1 span:nth-child(3) {
    animation-delay: .24s
}

@keyframes up {
    to {
        opacity: 1;
        transform: none
    }
}

.hero .lead {
    margin-bottom: 34px
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px
}

.trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin-top: 38px;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted)
}

.trust li {
    display: flex;
    align-items: center;
    gap: 8px
}

.trust b {
    font-family: var(--bold);
    font-size: 22px;
    color: var(--k)
}

@media (max-width:960px) {
    .hero .w {
        grid-template-columns: 1fr
    }

    .hero::before {
        right: -40vw;
        top: auto;
        bottom: -10vh;
        height: 70vh;
        width: 110vw
    }
}

/* hero "video" — ekranda görününce kendi kendine oynar */
.hv {
    position: relative;
    filter: drop-shadow(0 40px 60px rgba(55, 55, 54, .28))
}

.hv-screen {
    position: relative;
    aspect-ratio: 16/11;
    border-radius: 26px;
    overflow: hidden;
    background: var(--white);
    border: 10px solid var(--k)
}

.hv-scene {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden
}

.hv-scene.on {
    opacity: 1;
    visibility: visible
}

.hv-tag {
    position: absolute;
    left: 16px;
    bottom: 14px;
    padding: 7px 12px;
    border-radius: 99px;
    background: var(--k);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    z-index: 5
}

.hv-wipe {
    position: absolute;
    inset: -10% -60%;
    z-index: 20;
    background: var(--y);
    transform: translateX(-120%) skewX(-21deg);
    pointer-events: none
}

.hv-wipe.go {
    animation: wipe .8s cubic-bezier(.7, 0, .3, 1) forwards
}

@keyframes wipe {
    0% {
        transform: translateX(-120%) skewX(-21deg)
    }

    100% {
        transform: translateX(120%) skewX(-21deg)
    }
}

.hv-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px
}

.hv-steps {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px
}

.hv-steps li {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--k);
    opacity: .45;
    transition: opacity .3s;
    cursor: pointer
}

.hv-steps li i {
    display: block;
    height: 4px;
    border-radius: 4px;
    background: rgba(55, 55, 54, .18);
    margin-bottom: 7px;
    overflow: hidden
}

.hv-steps li i::after {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    background: var(--k);
    transform-origin: left;
    transform: scaleX(var(--p, 0))
}

.hv-steps li.on {
    opacity: 1
}

.hv-steps li.done i::after {
    transform: scaleX(1)
}

.pp {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--k);
    color: #fff;
    display: grid;
    place-items: center
}

.pp svg {
    width: 14px;
    height: 14px
}

.pp .i-play {
    display: none
}

.pp[aria-pressed=true] .i-play {
    display: block
}

.pp[aria-pressed=true] .i-pause {
    display: none
}

.hv.paused .hv-scene *,
.hv.paused .hv-scene *::before,
.hv.paused .hv-scene *::after {
    animation-play-state: paused !important
}

/* sahne 1: logo & kimlik */
.s-logo {
    background: var(--paper)
}

.sl-mark {
    position: absolute;
    left: 10%;
    top: 16%;
    width: 34%
}

.sl-mark circle {
    fill: none;
    stroke: var(--k);
    stroke-width: 5;
    stroke-dasharray: 290;
    stroke-dashoffset: 290
}

.sl-mark path {
    stroke: var(--y);
    stroke-width: 9;
    stroke-linecap: round;
    stroke-dasharray: 90;
    stroke-dashoffset: 90
}

.on .sl-mark circle {
    animation: draw 1s .1s var(--ease) forwards
}

.on .sl-mark path {
    animation: draw .6s .8s var(--ease) forwards
}

.sl-word {
    position: absolute;
    left: 10%;
    top: 74%;
    display: grid;
    gap: 8px;
    width: 34%
}

.sl-word i {
    height: 12px;
    border-radius: 6px;
    background: var(--k);
    transform-origin: left;
    transform: scaleX(0)
}

.sl-word i+i {
    width: 60%;
    background: rgba(55, 55, 54, .35)
}

.on .sl-word i {
    animation: grow .5s var(--ease) forwards;
    animation-delay: 1.1s
}

.on .sl-word i+i {
    animation-delay: 1.25s
}

@keyframes grow {
    to {
        transform: scaleX(1)
    }
}

.sl-sw {
    position: absolute;
    right: 9%;
    top: 14%;
    display: flex;
    gap: 10px
}

.sl-sw span {
    width: clamp(34px, 4.6vw, 62px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--y);
    transform: scale(0)
}

.sl-sw span:nth-child(2) {
    background: var(--k)
}

.sl-sw span:nth-child(3) {
    background: #fff;
    box-shadow: inset 0 0 0 3px var(--line)
}

.on .sl-sw span {
    animation: pop .6s var(--spring) forwards
}

.on .sl-sw span:nth-child(1) {
    animation-delay: 1.4s
}

.on .sl-sw span:nth-child(2) {
    animation-delay: 1.55s
}

.on .sl-sw span:nth-child(3) {
    animation-delay: 1.7s
}

@keyframes pop {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

.sl-card {
    position: absolute;
    right: 8%;
    top: 42%;
    width: 42%;
    aspect-ratio: 1.75;
    border-radius: 12px;
    background: var(--k);
    box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .5);
    transform: translateX(140%) rotate(8deg)
}

.sl-card::before {
    content: "";
    position: absolute;
    left: 12%;
    top: 18%;
    width: 20%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 3px solid var(--y)
}

.sl-card::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 30%;
    bottom: 22%;
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .5);
    box-shadow: 0 -16px 0 rgba(255, 255, 255, .85)
}

.on .sl-card {
    animation: cardIn .9s 1.9s var(--spring) forwards
}

@keyframes cardIn {
    to {
        transform: translateX(0) rotate(-4deg)
    }
}

/* sahne 2: web sitesi */
.s-web {
    background: #F1EEE4
}

.sw-br {
    position: absolute;
    left: 7%;
    right: 7%;
    top: 9%;
    bottom: 14%;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .35);
    transform: translateY(20px);
    opacity: 0
}

.on .sw-br {
    animation: up .7s var(--ease) forwards
}

.sw-top {
    height: 9%;
    background: var(--k);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 3%
}

.sw-top i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--y)
}

.sw-top i:nth-child(2) {
    background: #fff
}

.sw-top i:nth-child(3) {
    background: #9a9a96
}

.sw-hero {
    position: relative;
    height: 56%
}

.sw-hero .h {
    position: absolute;
    left: 6%;
    top: 16%;
    height: 13%;
    width: 42%;
    border-radius: 6px;
    background: var(--k);
    transform-origin: left;
    transform: scaleX(0)
}

.sw-hero .h2 {
    position: absolute;
    left: 6%;
    top: 36%;
    height: 7%;
    width: 30%;
    border-radius: 4px;
    background: rgba(55, 55, 54, .3);
    transform-origin: left;
    transform: scaleX(0)
}

.sw-hero .b {
    position: absolute;
    left: 6%;
    top: 56%;
    height: 14%;
    width: 18%;
    border-radius: 99px;
    background: var(--y);
    transform: scale(0)
}

.sw-hero .im {
    position: absolute;
    right: 6%;
    top: 12%;
    width: 36%;
    height: 76%;
    border-radius: 10px;
    background: var(--y);
    overflow: hidden;
    clip-path: inset(0 0 100% 0)
}

.sw-hero .im::after {
    content: "";
    position: absolute;
    left: 18%;
    bottom: -20%;
    width: 64%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--k)
}

.on .sw-hero .h {
    animation: grow .6s .5s var(--ease) forwards
}

.on .sw-hero .h2 {
    animation: grow .6s .7s var(--ease) forwards
}

.on .sw-hero .b {
    animation: pop .5s .95s var(--spring) forwards
}

.on .sw-hero .im {
    animation: reveal .8s .6s var(--ease) forwards
}

@keyframes reveal {
    to {
        clip-path: inset(0)
    }
}

.sw-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4%;
    padding: 0 6%;
    height: 26%
}

.sw-cards i {
    border-radius: 8px;
    background: #F1EEE4;
    opacity: 0;
    transform: translateY(20px)
}

.on .sw-cards i {
    animation: up .6s var(--ease) forwards
}

.on .sw-cards i:nth-child(1) {
    animation-delay: 1.1s
}

.on .sw-cards i:nth-child(2) {
    animation-delay: 1.2s
}

.on .sw-cards i:nth-child(3) {
    animation-delay: 1.3s
}

.sw-cur {
    position: absolute;
    left: 70%;
    top: 80%;
    width: 22px;
    height: 22px;
    opacity: 0
}

.sw-cur::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--k);
    clip-path: polygon(0 0, 0 80%, 25% 60%, 45% 100%, 58% 94%, 40% 55%, 75% 55%)
}

.sw-cur::after {
    content: "";
    position: absolute;
    left: -10px;
    top: -10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--k);
    opacity: 0
}

.on .sw-cur {
    animation: cur 1.4s 1.5s var(--ease) forwards
}

.on .sw-cur::after {
    animation: ripple .6s 2.8s ease-out forwards
}

@keyframes cur {
    0% {
        opacity: 0;
        left: 70%;
        top: 80%
    }

    20% {
        opacity: 1
    }

    100% {
        opacity: 1;
        left: 16%;
        top: 46%
    }
}

@keyframes ripple {
    0% {
        opacity: 1;
        transform: scale(.3)
    }

    100% {
        opacity: 0;
        transform: scale(2.4)
    }
}

/* sahne 3: sosyal medya */
.s-soc {
    background: var(--y)
}

.ss-ph {
    position: absolute;
    left: 50%;
    top: 7%;
    width: 34%;
    height: 92%;
    margin-left: -17%;
    border-radius: 26px 26px 0 0;
    background: var(--k);
    padding: 10px 10px 0;
    transform: translateY(100%)
}

.on .ss-ph {
    animation: phoneUp .8s var(--ease) forwards
}

@keyframes phoneUp {
    to {
        transform: none
    }
}

.ss-in {
    height: 100%;
    border-radius: 18px 18px 0 0;
    background: #fff;
    padding: 9% 7%;
    display: flex;
    flex-direction: column;
    gap: 7%
}

.ss-hd {
    display: flex;
    align-items: center;
    gap: 8px
}

.ss-hd i {
    width: 20%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--y);
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--k)
}

.ss-hd b {
    height: 8px;
    width: 45%;
    border-radius: 4px;
    background: var(--k)
}

.ss-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px
}

.ss-grid i {
    aspect-ratio: 1;
    border-radius: 6px;
    background: var(--k);
    transform: scale(0)
}

.ss-grid i:nth-child(2),
.ss-grid i:nth-child(3) {
    background: var(--y)
}

.on .ss-grid i {
    animation: pop .5s var(--spring) forwards
}

.on .ss-grid i:nth-child(1) {
    animation-delay: .7s
}

.on .ss-grid i:nth-child(2) {
    animation-delay: .85s
}

.on .ss-grid i:nth-child(3) {
    animation-delay: 1s
}

.on .ss-grid i:nth-child(4) {
    animation-delay: 1.15s
}

.ss-h {
    position: absolute;
    font-size: clamp(18px, 2.2vw, 30px);
    color: var(--k);
    opacity: 0;
    line-height: 1
}

.ss-h.a {
    left: 22%;
    top: 60%
}

.ss-h.b {
    left: 72%;
    top: 52%;
    color: #fff
}

.ss-h.c {
    left: 26%;
    top: 30%;
    color: #fff
}

.on .ss-h {
    animation: heart 1.6s ease-out forwards
}

.on .ss-h.a {
    animation-delay: 1.3s
}

.on .ss-h.b {
    animation-delay: 1.6s
}

.on .ss-h.c {
    animation-delay: 1.9s
}

@keyframes heart {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(.4)
    }

    25% {
        opacity: 1;
        transform: translateY(0) scale(1.2)
    }

    100% {
        opacity: 0;
        transform: translateY(-70px) scale(1)
    }
}

.ss-n {
    position: absolute;
    right: 5%;
    top: 12%;
    padding: 10px 14px;
    border-radius: 14px;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .35);
    transform: translateX(130%)
}

.ss-n::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--y);
    box-shadow: 0 0 0 2px var(--k);
    margin-right: 8px
}

.on .ss-n {
    animation: slideL .7s 2s var(--spring) forwards
}

@keyframes slideL {
    to {
        transform: none
    }
}

/* sahne 4: basılı işler */
.s-print {
    background: var(--k);
    perspective: 900px
}

.sp-book {
    position: absolute;
    left: 50%;
    top: 18%;
    width: 56%;
    height: 62%;
    margin-left: -28%;
    transform-style: preserve-3d
}

.sp-pg {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    background: var(--paper);
    box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .6)
}

.sp-pg.l {
    left: 0;
    border-radius: 8px 0 0 8px;
    transform-origin: right;
    transform: rotateY(-90deg)
}

.sp-pg.r {
    right: 0;
    border-radius: 0 8px 8px 0
}

.sp-pg.l::before {
    content: "";
    position: absolute;
    inset: 12%;
    border-radius: 6px;
    background: var(--y)
}

.sp-pg.r::before {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    top: 14%;
    height: 34%;
    border-radius: 6px;
    background: var(--k)
}

.sp-pg.r::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 30%;
    top: 58%;
    height: 6px;
    border-radius: 3px;
    background: rgba(55, 55, 54, .35);
    box-shadow: 0 14px 0 rgba(55, 55, 54, .35), 0 28px 0 rgba(55, 55, 54, .35), 0 42px 0 rgba(55, 55, 54, .2)
}

.on .sp-pg.l {
    animation: open 1.1s .3s var(--ease) forwards
}

@keyframes open {
    to {
        transform: rotateY(0)
    }
}

.sp-post {
    position: absolute;
    right: 6%;
    bottom: 10%;
    width: 18%;
    aspect-ratio: .7;
    border-radius: 6px;
    background: var(--y);
    transform: translateY(160%) rotate(10deg);
    box-shadow: 0 20px 30px -14px rgba(0, 0, 0, .6)
}

.sp-post::after {
    content: "";
    position: absolute;
    left: 14%;
    right: 14%;
    bottom: 12%;
    height: 22%;
    border-radius: 4px;
    background: var(--k)
}

.on .sp-post {
    animation: postIn .8s 1.3s var(--spring) forwards
}

@keyframes postIn {
    to {
        transform: rotate(6deg)
    }
}

.s-print .hv-tag {
    background: var(--y);
    color: var(--k)
}

/* sahne 5: tanıtım filmi */
.s-film {
    background: #1f1f1e
}

.sf-f {
    position: absolute;
    inset: 10% 6% 18%;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(#F3DA73, var(--y))
}

.sf-sun {
    position: absolute;
    left: 58%;
    top: 22%;
    width: 22%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #fff;
    opacity: .9;
    transform: translateY(60%)
}

.on .sf-sun {
    animation: sun 3s ease-out forwards
}

@keyframes sun {
    to {
        transform: translateY(0)
    }
}

.sf-hill {
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -30%;
    height: 70%;
    border-radius: 50% 50% 0 0;
    background: var(--k)
}

.sf-hill.b {
    left: 30%;
    right: -40%;
    bottom: -40%;
    background: #4a4a48
}

.sf-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60px;
    height: 60px;
    margin: -30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    display: grid;
    place-items: center
}

.sf-play::after {
    content: "";
    border-left: 18px solid var(--k);
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    margin-left: 5px
}

.on .sf-play {
    animation: playOut .5s .6s ease forwards
}

@keyframes playOut {
    to {
        transform: scale(1.6);
        opacity: 0
    }
}

.sf-tl {
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: 9%;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .25)
}

.sf-tl i {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background: var(--y);
    transform-origin: left;
    transform: scaleX(0)
}

.on .sf-tl i {
    animation: grow 2.6s .6s linear forwards
}

.sf-rec {
    position: absolute;
    right: 8%;
    top: 14%;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em
}

.sf-rec::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #E5484D;
    margin-right: 6px;
    animation: blink 1s steps(2) infinite
}

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

.s-film .hv-tag {
    background: var(--y);
    color: var(--k)
}

/* ---------- REFERANS BANDI ---------- */
.band {
    background: var(--k);
    color: #fff;
    padding: 22px 0;
    overflow: hidden
}

.band-in {
    display: flex;
    gap: 44px;
    width: max-content;
    animation: marq 70s linear infinite
}

.band:hover .band-in {
    animation-play-state: paused !important
}

.band span {
    font-family: var(--thin);
    font-weight: 200;
    font-size: clamp(22px, 2.4vw, 32px);
    text-transform: uppercase;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 44px
}

.band span:nth-child(odd) {
    font-family: var(--bold);
    font-weight: 700
}

.band span::after {
    content: "";
    width: 14px;
    height: 24px;
    background: linear-gradient(to top left, transparent calc(50% - 1.5px), var(--y) calc(50% - 1.5px), var(--y) calc(50% + 1.5px), transparent calc(50% + 1.5px))
}

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

/* ---------- BÖLÜMLER ---------- */
section {
    position: relative
}

.sec {
    padding: clamp(45px, 6.5vh, 75px) 0
}

.sec-hd {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(20px, 4vw, 70px);
    align-items: end;
    margin-bottom: clamp(40px, 6vh, 70px)
}

@media (max-width:860px) {
    .sec-hd {
        grid-template-columns: 1fr
    }
}

.dark {
    background: var(--k);
    color: #fff
}

.dark .lead {
    color: rgba(255, 255, 255, .78)
}

.dark .kick span {
    color: rgba(255, 255, 255, .6)
}

/* biz kimiz */
.about-top {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(30px, 5vw, 90px);
    align-items: center
}

.about .lead+.lead {
    margin-top: 16px
}

.about .sig {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
    font-weight: 600;
    justify-content: flex-end;
}

.about .sig i {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--y);
    display: grid;
    place-items: center;
    font-family: var(--bold);
    font-weight: 700;
    font-size: 18px;
    font-style: normal
}

.about .sig small {
    display: block;
    color: var(--muted);
    font-weight: 500
}

@media (max-width:900px) {
    .about-top {
        grid-template-columns: 1fr
    }
}

.board {
    background: var(--k);
    color: #fff;
    border-radius: 28px;
    padding: clamp(24px, 3vw, 40px);
    box-shadow: 0 40px 80px -40px rgba(55, 55, 54, .7)
}

.board-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6)
}

.board-top b {
    color: var(--y)
}

/* panonun üstündeki sabit imza satırı (3//22) */
.board-sig {
    margin-top: 14px;
    font-size: clamp(15px, 1.3vw, 17px);
    color: rgba(255, 255, 255, .8)
}

.board-sig b {
    color: var(--y)
}

.flaps {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: clamp(24px, 4vw, 40px) 0 clamp(20px, 3vw, 30px);
    perspective: 600px
}

.flap {
    position: relative;
    width: clamp(56px, 7.4vw, 96px);
    height: clamp(80px, 10.4vw, 136px);
    border-radius: 12px;
    background: #2a2a29;
    font-family: var(--bold);
    font-weight: 700;
    font-size: clamp(54px, 7vw, 92px);
    line-height: 1;
    display: grid;
    place-items: center;
    overflow: hidden;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .4)
}

.flap::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    background: rgba(0, 0, 0, .45)
}

.flap.go span {
    animation: flip .5s var(--ease)
}

.flap.hl {
    color: var(--y)
}

@keyframes flip {
    0% {
        transform: rotateX(0)
    }

    45% {
        transform: rotateX(90deg);
        opacity: .2
    }

    55% {
        transform: rotateX(-90deg);
        opacity: .2
    }

    100% {
        transform: rotateX(0)
    }
}

.board-cap {
    text-align: center;
    min-height: 3.2em;
    font-size: clamp(16px, 1.4vw, 19px);
    transition: opacity .3s
}

.board-cap b {
    color: var(--y)
}

.board-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px
}

.board-dots i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .25);
    transition: background .3s, width .3s
}

.board-dots i.on {
    background: var(--y);
    width: 24px;
    border-radius: 4px
}

.values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: clamp(50px, 7vh, 80px)
}

.values li {
    padding: 28px;
    border-radius: var(--r);
    background: #fff;
    border: 1px solid var(--line);
    transition: transform .5s var(--spring), box-shadow .4s
}

.values li:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 50px -30px rgba(55, 55, 54, .4)
}

.values .ic {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: var(--y);
    display: grid;
    place-items: center;
    margin-bottom: 18px
}

.values .ic svg {
    width: 28px;
    height: 28px;
    stroke: var(--k);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round
}

.values h3 {
    font-family: var(--bold);
    font-weight: 700;
    font-size: 26px;
    text-transform: uppercase;
    line-height: 1.05;
    margin-bottom: 8px
}

.values p {
    color: var(--muted);
    font-size: 16px
}

@media (max-width:900px) {
    .values {
        grid-template-columns: 1fr
    }
}

/* hizmetler */
.svc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px
}

.svc {
    display: flex;
    flex-direction: column;
    border-radius: 26px;
    background: #fff;
    border: 1px solid var(--line);
    overflow: hidden;
    transition: transform .5s var(--spring), box-shadow .4s
}

.svc:hover {
    transform: translateY(-6px);
    box-shadow: 0 34px 60px -34px rgba(55, 55, 54, .45)
}

.svc-art {
    position: relative;
    aspect-ratio: 16/9;
    background: var(--y);
    overflow: hidden
}

.svc-bd {
    padding: 26px 26px 30px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1
}

.svc h3 {
    font-family: var(--bold);
    font-weight: 700;
    font-size: 30px;
    text-transform: uppercase;
    line-height: 1
}

.svc h3 small {
    display: block;
    font-family: var(--sans);
    font-size: 13px;
    letter-spacing: .1em;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: 8px
}

.svc ul {
    display: grid;
    gap: 7px;
    font-size: 15.5px
}

.svc li {
    display: flex;
    gap: 10px;
    align-items: flex-start
}

.svc li::before {
    content: "";
    flex: none;
    width: 8px;
    height: 14px;
    margin-top: 5px;
    background: linear-gradient(to top left, transparent calc(50% - 1.2px), var(--yd) calc(50% - 1.2px), var(--yd) calc(50% + 1.2px), transparent calc(50% + 1.2px))
}

.svc .more {
    margin-top: auto;
    padding-top: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px
}

.svc .more svg {
    width: 18px;
    height: 18px;
    transition: transform .4s var(--ease)
}

.svc:hover .more svg {
    transform: translateX(5px)
}

.svc-wide {
    grid-column: span 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px
}

.svc-wide .svc {
    flex-direction: row
}

.svc-wide .svc-art {
    flex: 0 0 44%;
    aspect-ratio: auto
}

@media (max-width:1020px) {
    .svc-grid {
        grid-template-columns: 1fr 1fr
    }

    .svc-wide {
        grid-column: span 2;
        grid-template-columns: 1fr
    }
}

@media (max-width:680px) {
    .svc-grid {
        grid-template-columns: 1fr
    }

    .svc-wide {
        grid-column: auto
    }

    .svc-wide .svc {
        flex-direction: column
    }

    .svc-wide .svc-art {
        aspect-ratio: 16/9
    }
}

/* hizmet illüstrasyonları (ekrandayken sonsuz döngü) */
.a-pen .c {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44%;
    aspect-ratio: 1;
    margin: -22% 0 0 -22%;
    border-radius: 50%;
    border: 5px solid var(--k);
    clip-path: inset(0 100% 0 0);
    animation: wipeR 4s var(--ease) infinite
}

.a-pen .s {
    position: absolute;
    left: 50%;
    top: 18%;
    width: 5px;
    height: 64%;
    background: var(--yd);
    transform: rotate(21deg) scaleY(0);
    transform-origin: top;
    animation: slashIn 4s var(--ease) infinite
}

.a-pen .d {
    position: absolute;
    top: 50%;
    width: 9%;
    aspect-ratio: 1;
    margin-top: -4.5%;
    border-radius: 50%;
    background: var(--y);
    box-shadow: 0 0 0 3px var(--ys);
    transform: scale(0);
    animation: dot 4s var(--spring) infinite
}

.a-pen .d.d1 {
    left: 9%
}

.a-pen .d.d2 {
    left: 9%;
    top: 72%;
    background: var(--k);
    animation-delay: .12s
}

.a-pen .d.d3 {
    left: 82%;
    top: 34%;
    background: #fff;
    box-shadow: inset 0 0 0 3px var(--line), 0 0 0 3px var(--ys);
    animation-delay: .24s
}

@keyframes wipeR {
    0% {
        clip-path: inset(0 100% 0 0)
    }

    35%,
    85% {
        clip-path: inset(0 0 0 0)
    }

    100% {
        clip-path: inset(0 0 0 100%)
    }
}

@keyframes slashIn {

    0%,
    35% {
        transform: rotate(21deg) scaleY(0)
    }

    55%,
    85% {
        transform: rotate(21deg) scaleY(1)
    }

    100% {
        transform: rotate(21deg) scaleY(0);
        opacity: 0
    }
}

@keyframes dot {

    0%,
    50% {
        transform: scale(0)
    }

    62%,
    88% {
        transform: scale(1)
    }

    100% {
        transform: scale(0)
    }
}

.a-web .b {
    position: absolute;
    left: 14%;
    right: 14%;
    top: 14%;
    bottom: 0;
    border-radius: 12px 12px 0 0;
    background: #fff;
    box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .35);
    overflow: hidden
}

.a-web .b::before {
    content: "";
    display: block;
    height: 14%;
    background: var(--k)
}

.a-web i {
    position: absolute;
    border-radius: 5px;
    background: var(--k);
    transform-origin: left;
    animation: bar 3.6s var(--ease) infinite
}

.a-web i:nth-child(1) {
    left: 9%;
    top: 26%;
    width: 46%;
    height: 12%
}

.a-web i:nth-child(2) {
    left: 9%;
    top: 44%;
    width: 32%;
    height: 7%;
    background: rgba(55, 55, 54, .3);
    animation-delay: .2s
}

.a-web i:nth-child(3) {
    left: 9%;
    top: 60%;
    width: 20%;
    height: 12%;
    border-radius: 99px;
    background: var(--y);
    animation-delay: .4s
}

.a-web i:nth-child(4) {
    right: 9%;
    left: auto;
    top: 24%;
    width: 30%;
    height: 52%;
    border-radius: 10px;
    background: var(--y);
    animation-delay: .3s;
    transform-origin: bottom
}

@keyframes bar {
    0% {
        transform: scaleX(0)
    }

    25%,
    80% {
        transform: scaleX(1)
    }

    100% {
        transform: scaleX(1);
        opacity: 0
    }
}

.a-soc .ph {
    position: absolute;
    left: 50%;
    top: 12%;
    bottom: -8%;
    width: 30%;
    margin-left: -15%;
    border-radius: 18px;
    background: var(--k);
    padding: 7px
}

.a-soc .ph div {
    height: 100%;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 6px;
    align-content: start
}

.a-soc .ph i {
    aspect-ratio: 1;
    border-radius: 4px;
    background: var(--y);
    animation: feed 3s var(--ease) infinite
}

.a-soc .ph i:nth-child(odd) {
    background: var(--k)
}

.a-soc .ph i:nth-child(2) {
    animation-delay: .15s
}

.a-soc .ph i:nth-child(3) {
    animation-delay: .3s
}

.a-soc .ph i:nth-child(4) {
    animation-delay: .45s
}

.a-soc .ph i:nth-child(5) {
    animation-delay: .6s
}

.a-soc .ph i:nth-child(6) {
    animation-delay: .75s
}

@keyframes feed {
    0% {
        transform: scale(0)
    }

    20%,
    80% {
        transform: scale(1)
    }

    100% {
        transform: scale(0)
    }
}

.a-soc .h {
    position: absolute;
    right: 22%;
    bottom: 20%;
    font-size: 26px;
    color: var(--k);
    animation: heart 3s ease-out infinite
}

.a-soc .h.b {
    right: auto;
    left: 22%;
    bottom: 40%;
    animation-delay: 1.5s
}

.a-vid {
    background: var(--k) !important
}

.a-vid .f {
    position: absolute;
    inset: 16% 12% 26%;
    border-radius: 10px;
    background: linear-gradient(#F3DA73, var(--y));
    overflow: hidden
}

.a-vid .f::after {
    content: "";
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -40%;
    height: 80%;
    border-radius: 50% 50% 0 0;
    background: var(--k);
    animation: hill 4s ease-in-out infinite alternate
}

@keyframes hill {
    to {
        transform: translateX(-8%)
    }
}

.a-vid .t {
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 13%;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .25)
}

.a-vid .t i {
    position: absolute;
    inset: 0;
    background: var(--y);
    transform-origin: left;
    animation: grow 4s linear infinite
}

.a-vid .t::after {
    content: "";
    position: absolute;
    top: -5px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    animation: head 4s linear infinite
}

@keyframes head {
    from {
        left: -7px
    }

    to {
        left: calc(100% - 7px)
    }
}

.a-ag .o {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 62%;
    aspect-ratio: 1;
    margin: -31% 0 0 -31%;
    border-radius: 50%;
    border: 2px dashed rgba(55, 55, 54, .35);
    animation: spin 18s linear infinite
}

.a-ag .o i {
    position: absolute;
    width: 26%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--k);
    border: 4px solid var(--ys);
    animation: spin 18s linear infinite reverse
}

.a-ag .o i:nth-child(1) {
    left: 37%;
    top: -13%
}

.a-ag .o i:nth-child(2) {
    right: -13%;
    top: 37%;
    background: var(--y)
}

.a-ag .o i:nth-child(3) {
    left: 37%;
    bottom: -13%
}

.a-ag .o i:nth-child(4) {
    left: -13%;
    top: 37%;
    background: var(--y)
}

.a-ag .c {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 26%;
    aspect-ratio: 1;
    margin: -13% 0 0 -13%;
    border-radius: 50%;
    background: var(--y);
    display: grid;
    place-items: center;
    font-family: var(--bold);
    font-weight: 700;
    font-size: clamp(12px, 1.2vw, 16px);
    text-transform: uppercase;
    animation: pulse 2.4s ease-in-out infinite
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes pulse {
    50% {
        transform: scale(1.08)
    }
}

/* nasıl çalışıyoruz */
.model {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(30px, 5vw, 90px);
    align-items: center;
    margin-bottom: clamp(70px, 10vh, 120px)
}

@media (max-width:900px) {
    .model {
        grid-template-columns: 1fr
    }
}

@media (max-width:560px) {
    .model .orbit {
        width: min(275px, calc(100% - 64px))
    }

    .m-hide {
        display: none
    }

    .model .orbit .node {
        font-size: 12px;
        padding: 7px 11px;
        gap: 6px
    }

    .model .orbit .node::before {
        width: 8px;
        height: 8px
    }

    .model .orbit .core {
        inset: 32.5%
    }

    .model .orbit .core b {
        font-size: 10.5px
    }

    .model .orbit .core small {
        font-size: 9px
    }
}

#surec {
    overflow-x: clip
}

.orbit {
    position: relative;
    aspect-ratio: 1;
    max-width: 460px;
    width: 100%;
    margin-inline: auto
}

.orbit .ring {
    position: absolute;
    inset: 6%;
    border-radius: 50%;
    border: 1.5px dashed rgba(255, 255, 255, .25)
}

.orbit .ring.i2 {
    inset: 24%;
    border-color: rgba(237, 196, 26, .4)
}

.orbit .rot {
    position: absolute;
    inset: 6%;
    animation: spin 30s linear infinite
}

.orbit .node {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 99px;
    background: #fff;
    color: var(--k);
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6);
    animation: spin 30s linear infinite reverse
}

.orbit .node::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--y);
    box-shadow: 0 0 0 2px var(--k)
}

.orbit .n1 {
    left: 50%;
    top: 0;
    translate: -50% -50%
}

.orbit .n2 {
    left: 100%;
    top: 50%;
    translate: -50% -50%
}

.orbit .n3 {
    left: 50%;
    top: 100%;
    translate: -50% -50%
}

.orbit .n4 {
    left: 0;
    top: 50%;
    translate: -50% -50%
}

.orbit .core {
    position: absolute;
    inset: 34%;
    border-radius: 50%;
    background: var(--y);
    color: var(--k);
    display: grid;
    place-content: center;
    text-align: center;
    box-shadow: 0 0 0 14px rgba(237, 196, 26, .18), 0 0 0 30px rgba(237, 196, 26, .08);
    animation: pulse 3s ease-in-out infinite
}

.orbit .core b {
    font-family: var(--bold);
    font-weight: 700;
    font-size: clamp(14px, 1.3vw, 18px);
    text-transform: uppercase;
    line-height: 1
}

.orbit .core small {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase
}

.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px
}

.step {
    position: relative;
    text-align: left;
    padding: 26px 22px 24px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    transition: background .4s, color .4s, transform .5s var(--spring);
    color: #fff
}

.step .bar {
    position: absolute;
    left: 22px;
    right: 22px;
    top: 0;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: rgba(255, 255, 255, .12);
    overflow: hidden
}

.step .bar::after {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    background: var(--k);
    transform-origin: left;
    transform: scaleX(var(--p, 0))
}

.step .n {
    font-family: var(--bold);
    font-weight: 700;
    font-size: 44px;
    line-height: 1;
    color: var(--y);
    display: block;
    margin: 6px 0 10px
}

.step h3 {
    font-family: var(--bold);
    font-weight: 700;
    font-size: 24px;
    text-transform: uppercase;
    line-height: 1.05;
    margin-bottom: 8px
}

.step p {
    font-size: 15px;
    opacity: .75
}

.step.on {
    background: var(--y);
    color: var(--k);
    transform: translateY(-8px)
}

.step.on .n {
    color: var(--k)
}

.step.on .bar {
    background: rgba(55, 55, 54, .2)
}

.step.on p {
    opacity: .85
}

@media (max-width:900px) {
    .steps {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width:520px) {
    .steps {
        grid-template-columns: 1fr
    }
}

/* neler sunuyoruz */
.offers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px
}

.offer {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 26px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid var(--line)
}

.offer svg {
    flex: none;
    width: 44px;
    height: 44px
}

.offer svg circle {
    fill: var(--y)
}

.offer svg path {
    fill: none;
    stroke: var(--k);
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 30;
    stroke-dashoffset: 30
}

.offer.in svg path {
    animation: draw .7s var(--ease) forwards;
    animation-delay: calc(var(--d, 0)*120ms + .3s)
}

.offer h3 {
    font-family: var(--bold);
    font-weight: 700;
    font-size: 22px;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 6px
}

.offer p {
    color: var(--muted);
    font-size: 15.5px
}

@media (max-width:980px) {
    .offers {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width:620px) {
    .offers {
        grid-template-columns: 1fr
    }
}

/* seçili çalışmalar (mini sahneler) */
.works {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px
}

.wk {
    display: block;
    border-radius: 26px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    transition: transform .5s var(--spring), box-shadow .4s
}

.wk:hover {
    transform: translateY(-6px);
    box-shadow: 0 34px 60px -34px rgba(55, 55, 54, .5)
}

.wk-st {
    position: relative;
    aspect-ratio: 16/11;
    background: #EFEBDF;
    overflow: hidden
}

.wk-st .ttl {
    position: absolute;
    left: 6%;
    top: 50%;
    translate: 0 -50%;
    font-family: var(--bold);
    font-weight: 700;
    font-size: clamp(40px, 5.2vw, 78px);
    line-height: .9;
    color: var(--y);
    text-transform: uppercase;
    white-space: nowrap
}

.pc {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 8px;
    box-shadow: 0 14px 26px -12px rgba(0, 0, 0, .4);
    animation: fan 6s var(--ease) infinite;
    --x: 0%;
    --y: 0%;
    --r: 0deg
}

.pc.p1 {
    width: 26%;
    height: 52%;
    margin: -26% 0 0 -13%;
    background: var(--y)
}

.pc.p1::after {
    content: attr(data-l);
    position: absolute;
    left: 10%;
    top: 2%;
    font-family: var(--bold);
    font-weight: 700;
    font-size: clamp(40px, 4.6vw, 66px);
    line-height: 1;
    color: var(--k)
}

.pc.p2 {
    width: 48%;
    height: 40%;
    margin: -20% 0 0 -24%;
    background: #fff
}

.pc.p2::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 14%;
    border-radius: 8px 8px 0 0;
    background: var(--k)
}

.pc.p2::after {
    content: "";
    position: absolute;
    left: 10%;
    top: 30%;
    width: 44%;
    height: 14%;
    border-radius: 4px;
    background: var(--k);
    box-shadow: 0 20px 0 -3px rgba(55, 55, 54, .3)
}

.pc.p3 {
    width: 18%;
    height: 26%;
    margin: -13% 0 0 -9%;
    background: var(--k)
}

.pc.p3::after {
    content: "";
    position: absolute;
    inset: 22%;
    border-radius: 50%;
    background: var(--y)
}

.pc.p4 {
    width: 15%;
    height: 44%;
    margin: -22% 0 0 -7.5%;
    border-radius: 12px;
    background: var(--k);
    border: 4px solid var(--k)
}

.pc.p4::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: #fff
}

.pc.p4::after {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    top: 8%;
    height: 26%;
    border-radius: 4px;
    background: var(--y)
}

.pc.p1 {
    --x: -120%;
    --y: -8%;
    --r: -8deg
}

.pc.p2 {
    --x: 36%;
    --y: -38%;
    --r: 3deg
}

.pc.p3 {
    --x: -160%;
    --y: 120%;
    --r: 10deg
}

.pc.p4 {
    --x: 260%;
    --y: 18%;
    --r: 6deg
}

@keyframes fan {

    0%,
    12% {
        transform: translate(0, 0) rotate(0)
    }

    40%,
    72% {
        transform: translate(var(--x), var(--y)) rotate(var(--r))
    }

    100% {
        transform: translate(0, 0) rotate(0)
    }
}

.wk-bd {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 20px 22px
}

.wk-bd b {
    display: block;
    font-family: var(--bold);
    font-weight: 700;
    font-size: 24px;
    text-transform: uppercase;
    line-height: 1
}

.wk-bd small {
    color: var(--muted);
    font-size: 14px;
    font-weight: 600
}

.wk-bd .go {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--y);
    display: grid;
    place-items: center;
    transition: transform .5s var(--spring)
}

.wk-bd .go::after {
    content: "";
    border-left: 13px solid var(--k);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    margin-left: 4px
}

.wk:hover .go {
    transform: scale(1.12)
}

.wk.dk .wk-st {
    background: var(--k)
}

.wk.dk .pc.p2 {
    background: #EFEBDF
}

.wk.dk .pc.p3 {
    background: var(--y)
}

.wk.dk .pc.p3::after {
    background: var(--k)
}

.wk.yl .wk-st {
    background: var(--y)
}

.wk.yl .wk-st .ttl {
    color: #fff
}

.wk.yl .pc.p1 {
    background: var(--k)
}

.wk.yl .pc.p1::after {
    color: var(--y)
}

@media (max-width:980px) {
    .works {
        grid-template-columns: 1fr
    }
}

/* referanslar */
.refs {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px
}

.refs li {
    display: grid;
    place-items: center;
    text-align: center;
    min-height: 92px;
    padding: 14px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--line);
    font-family: var(--bold);
    font-weight: 700;
    font-size: clamp(15px, 1.3vw, 19px);
    text-transform: uppercase;
    line-height: 1.1;
    transition: background .6s, transform .6s var(--spring), color .6s
}

.refs li:nth-child(4n+2) {
    background: var(--paper)
}

.refs li.flash {
    background: var(--y);
    transform: scale(1.04)
}

@media (max-width:1020px) {
    .refs {
        grid-template-columns: repeat(4, 1fr)
    }
}

@media (max-width:620px) {
    .refs {
        grid-template-columns: repeat(2, 1fr)
    }
}

.ref-stat {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 60px;
    margin-top: 40px
}

.ref-stat div {
    font-family: var(--bold);
    font-weight: 700;
    font-size: clamp(46px, 5vw, 72px);
    line-height: 1
}

.ref-stat small {
    display: block;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 14px;
    color: var(--muted);
    margin-top: 6px
}

/* SSS */
.faq {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: clamp(30px, 5vw, 90px);
    align-items: start
}

@media (max-width:900px) {
    .faq {
        grid-template-columns: 1fr
    }
}

.faq details {
    border-bottom: 1px solid var(--line)
}

.faq details:first-child {
    border-top: 1px solid var(--line)
}

.faq summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 22px 0;
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    font-size: 18px
}

.faq summary::-webkit-details-marker {
    display: none
}

.faq summary i {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ys);
    position: relative;
    transition: background .3s, transform .5s var(--ease)
}

.faq summary i::before,
.faq summary i::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 2px;
    margin: -1px -6px;
    background: var(--k)
}

.faq summary i::after {
    transform: rotate(90deg);
    transition: transform .4s var(--ease)
}

.faq details[open] summary i {
    background: var(--y);
    transform: rotate(180deg)
}

.faq details[open] summary i::after {
    transform: rotate(0)
}

.faq details p {
    padding: 0 50px 22px 0;
    color: var(--muted)
}

/* iletişim */
.contact {
    background: var(--y);
    overflow: hidden
}

.contact::before {
    content: "";
    position: absolute;
    left: -8vw;
    top: -30%;
    width: 28vw;
    height: 160%;
    background: rgba(255, 255, 255, .18);
    transform: skewX(-21deg)
}

.contact .w {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(30px, 5vw, 90px);
    align-items: start
}

@media (max-width:960px) {
    .contact .w {
        grid-template-columns: 1fr
    }
}

.contact .lead {
    color: rgba(55, 55, 54, .85)
}

.nap {
    display: grid;
    gap: 14px;
    margin-top: 34px
}

.nap a {
    display: flex;
    align-items: center;
    gap: 14px;
    font-weight: 600
}

.nap a b {
    font-family: var(--bold);
    font-weight: 700;
    font-size: clamp(26px, 2.6vw, 38px);
    line-height: 1
}

.nap .ic {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--k);
    display: grid;
    place-items: center
}

.nap .ic svg {
    width: 20px;
    height: 20px;
    stroke: var(--y);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round
}

.form {
    position: relative;
    background: #fff;
    border-radius: 28px;
    padding: clamp(24px, 3vw, 38px);
    box-shadow: 0 40px 80px -40px rgba(55, 55, 54, .5);
    overflow: hidden
}

.form h3 {
    font-family: var(--bold);
    font-weight: 700;
    font-size: 30px;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 6px
}

.form>p {
    color: var(--muted);
    font-size: 15px;
    margin-bottom: 20px
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px
}

.chips label {
    cursor: pointer
}

.chips input {
    position: absolute;
    opacity: 0;
    pointer-events: none
}

.chips span {
    display: block;
    padding: 10px 16px;
    border-radius: 99px;
    border: 1.5px solid var(--line);
    font-weight: 600;
    font-size: 14px;
    transition: background .25s, border-color .25s, transform .4s var(--spring)
}

.chips input:checked+span {
    background: var(--k);
    color: #fff;
    border-color: var(--k);
    transform: scale(1.04)
}

.chips input:focus-visible+span {
    outline: 3px solid var(--k);
    outline-offset: 2px
}

.f2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

@media (max-width:560px) {
    .f2 {
        grid-template-columns: 1fr
    }
}

.fl {
    display: grid;
    gap: 6px;
    margin-bottom: 12px
}

.fl span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase
}

.fl input,
.fl textarea {
    width: 100%;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1.5px solid var(--line);
    background: var(--paper);
    font-size: 16px;
    resize: vertical;
    transition: border-color .25s, box-shadow .25s
}

.fl input:focus,
.fl textarea:focus {
    outline: 0;
    border-color: var(--k);
    box-shadow: 0 0 0 4px rgba(237, 196, 26, .35)
}

.kvkk {
    display: flex;
    gap: 10px;
    font-size: 13.5px;
    color: var(--muted);
    margin: 4px 0 18px
}

.kvkk input {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    accent-color: var(--k);
    flex: none
}

.ferr {
    min-height: 1.4em;
    margin-top: 10px;
    font-weight: 600;
    color: #9B2C1F
}

.fok {
    position: absolute;
    inset: 0;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 14px;
    padding: clamp(24px, 3vw, 38px)
}

.fok svg {
    width: 84px;
    height: 84px
}

.fok circle {
    fill: var(--y)
}

.fok path {
    fill: none;
    stroke: var(--k);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: draw .8s .2s var(--ease) forwards
}

.fok h3 {
    margin: 0
}

/* footer */
.ft {
    background: var(--k);
    color: #fff;
    padding: clamp(60px, 9vh, 100px) 0 calc(30px + env(safe-area-inset-bottom))
}

.ft-top {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: 30px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, .12)
}

.ft .logo {
    height: 56px;
    margin-bottom: 18px
}

.ft h4 {
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--y);
    margin-bottom: 14px
}

.ft li {
    margin-bottom: 7px
}

.ft a:hover {
    color: var(--y)
}

.ft p,
.ft address {
    color: rgba(255, 255, 255, .75);
    line-height: 1.8
}

.ft-b {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding-top: 22px;
    font-size: 13px;
    color: rgba(255, 255, 255, .55)
}

@media (max-width:900px) {
    .ft-top {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width:560px) {
    .ft-top {
        grid-template-columns: 1fr
    }
}

/* mobil çubuk */
.mbar {
    display: none
}

@media (max-width:760px) {
    .mbar {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom));
        z-index: 80;
        display: flex;
        gap: 8px;
        transform: translateY(160%);
        transition: transform .5s var(--ease)
    }

    .mbar.on {
        transform: none
    }

    .mbar a {
        flex: 1;
        height: 52px;
        border-radius: 99px;
        display: grid;
        place-items: center;
        font-weight: 700;
        background: var(--k);
        color: #fff;
        box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .5)
    }

    .mbar a+a {
        flex: 2;
        background: var(--y);
        color: var(--k)
    }

    .ft {
        padding-bottom: 100px
    }
}

@media (prefers-reduced-motion:reduce) {

    html:not(.force-motion) *,
    html:not(.force-motion) *::before,
    html:not(.force-motion) *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
    }

    html.js:not(.force-motion) .rv {
        opacity: 1;
        transform: none
    }

    html:not(.force-motion) .band-in {
        animation: none
    }
}

/* =====================================================================
   ÇALIŞMALAR (calismalar.html) — cw- önekli, ana sayfa sınıflarına dokunmaz
   ===================================================================== */
.cw-page .hd:not(.solid) .nav a:hover {
    background: rgba(55, 55, 54, .08)
}

/* --- öne çıkanlar sahnesi --- */
.cw-stage {
    position: relative;
    height: 100vh;
    height: 100dvh;
    min-height: 580px;
    background: #EFEADC;
    overflow: hidden;
    outline: none;
    --u: 10px;
    --c1: #EDC41A;
    --c2: #373736;
    --c3: #FAF8F2;
    --ct: #373736
}

.cw-bars {
    position: absolute;
    z-index: 6;
    left: var(--gut);
    right: var(--gut);
    top: 92px;
    display: flex;
    gap: 6px
}

.cw-bars button {
    flex: 1;
    height: 14px;
    padding: 5px 0;
    display: block
}

.cw-bars i {
    display: block;
    height: 4px;
    border-radius: 4px;
    background: rgba(55, 55, 54, .16);
    overflow: hidden
}

.cw-bars i::after {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    background: var(--k);
    transform-origin: left;
    transform: scaleX(var(--p, 0))
}

.cw-st-top {
    position: absolute;
    z-index: 6;
    left: var(--gut);
    right: var(--gut);
    top: 112px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px
}

.cw-st-top .kick {
    margin: 0
}

.cw-count {
    font-family: var(--bold);
    font-weight: 700;
    font-size: 26px;
    line-height: 1
}

.cw-count span {
    color: var(--muted);
    font-weight: 500
}

.cw-title {
    position: absolute;
    z-index: 1;
    left: var(--gut);
    right: var(--gut);
    top: 50%;
    font-family: var(--bold);
    font-weight: 700;
    line-height: .8;
    color: var(--y);
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    will-change: transform, opacity
}

.cw-3d {
    position: absolute;
    inset: 0;
    z-index: 2;
    perspective: 1500px;
    display: grid;
    place-items: center;
    pointer-events: none
}

.cw-scene {
    position: relative;
    width: 0;
    height: 0;
    transform-style: preserve-3d;
    will-change: transform
}

.cw-pz {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(var(--w)*var(--u));
    height: calc(var(--h)*var(--u));
    margin: calc(var(--h)*var(--u)/-2) 0 0 calc(var(--w)*var(--u)/-2);
    border-radius: calc(var(--u)*1.1);
    overflow: hidden;
    box-shadow: 0 calc(var(--u)*1.8) calc(var(--u)*4) rgba(55, 55, 54, .3);
    font-size: var(--u);
    will-change: transform, opacity;
    opacity: 0
}

.cw-poster {
    --w: 20;
    --h: 28;
    background: var(--c1);
    color: var(--ct)
}

.cw-poster b {
    position: absolute;
    left: .4em;
    top: -.2em;
    font-family: var(--bold);
    font-weight: 700;
    font-size: 19em;
    line-height: 1;
    color: var(--c2)
}

.cw-poster i {
    position: absolute;
    left: 1.6em;
    right: 1.2em;
    bottom: 1.4em;
    font-style: normal;
    font-family: var(--bold);
    font-weight: 700;
    font-size: 2.3em;
    line-height: 1;
    text-transform: uppercase
}

.cw-browser {
    --w: 40;
    --h: 25;
    background: var(--c3)
}

.cw-browser .cw-b-bar {
    height: 2.6em;
    background: var(--k);
    display: flex;
    align-items: center;
    gap: .6em;
    padding: 0 1em
}

.cw-browser .cw-b-bar u {
    width: .9em;
    height: .9em;
    border-radius: 50%;
    background: var(--y)
}

.cw-browser .cw-b-bar u:nth-child(2) {
    background: #fff
}

.cw-browser .cw-b-bar u:nth-child(3) {
    background: #9a9a96
}

.cw-browser .cw-b-body {
    position: relative;
    height: calc(100% - 2.6em);
    padding: 2.2em 2.4em
}

.cw-browser h4 {
    font-family: var(--bold);
    font-weight: 700;
    font-size: 4.6em;
    line-height: .9;
    color: var(--k);
    text-transform: uppercase;
    max-width: 60%
}

.cw-browser p {
    margin-top: .8em;
    font-size: 1.4em;
    font-weight: 600;
    max-width: 13em;
    color: var(--k)
}

.cw-browser .cw-b-dot {
    position: absolute;
    right: 2.4em;
    top: 2em;
    width: 11em;
    height: 11em;
    border-radius: 50%;
    background: var(--y)
}

.cw-browser .cw-b-row {
    position: absolute;
    left: 2.4em;
    right: 2.4em;
    bottom: 2em;
    display: flex;
    gap: 1.2em
}

.cw-browser .cw-b-row s {
    flex: 1;
    height: 4.4em;
    border-radius: .8em;
    background: var(--y)
}

.cw-browser .cw-b-row s:nth-child(2) {
    background: var(--k)
}

.cw-browser .cw-b-play {
    position: absolute;
    right: 5.4em;
    top: 4.8em;
    width: 5em;
    height: 5em;
    border-radius: 50%;
    background: var(--k);
    display: none;
    place-items: center
}

.cw-browser .cw-b-play::after {
    content: "";
    border-left: 1.5em solid #fff;
    border-top: .9em solid transparent;
    border-bottom: .9em solid transparent;
    margin-left: .3em
}

.cw-video .cw-browser .cw-b-play {
    display: grid
}

.cw-post {
    --w: 14;
    --h: 14
}

.cw-p1 {
    background: var(--c2);
    color: var(--c3)
}

.cw-p1 .cw-disc {
    position: absolute;
    right: -3em;
    top: -3em;
    width: 10em;
    height: 10em;
    border-radius: 50%;
    background: var(--y)
}

.cw-p1 b {
    position: absolute;
    left: 1em;
    bottom: 2.4em;
    font-family: var(--bold);
    font-weight: 700;
    font-size: 4.2em;
    line-height: .9;
    text-transform: uppercase
}

.cw-p1 i {
    position: absolute;
    left: 1.3em;
    bottom: 1.1em;
    font-style: normal;
    font-weight: 700;
    font-size: 1.25em
}

.cw-p2 {
    background: var(--k);
    color: var(--y)
}

.cw-p2 b {
    position: absolute;
    left: .5em;
    top: -.2em;
    font-family: var(--bold);
    font-weight: 700;
    font-size: 13em;
    line-height: 1
}

.cw-p2 i {
    position: absolute;
    left: 1.3em;
    right: 1em;
    bottom: 1.1em;
    font-style: normal;
    font-weight: 700;
    font-size: 1.25em;
    color: #fff
}

.cw-banner {
    --w: 32;
    --h: 9;
    background: var(--c1);
    color: var(--ct);
    display: flex;
    align-items: center;
    gap: 1.4em;
    padding: 0 2em
}

.cw-banner b {
    font-family: var(--bold);
    font-weight: 700;
    font-size: 3em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap
}

.cw-banner span {
    font-size: 1.35em;
    font-weight: 700;
    flex: 1;
    opacity: .85;
    line-height: 1.2
}

.cw-banner em {
    flex: none;
    font-style: normal;
    display: grid;
    place-items: center;
    width: 4.6em;
    height: 4.6em;
    border-radius: 50%;
    background: var(--k);
    color: var(--y);
    font-size: 1.2em;
    font-weight: 900
}

.cw-phone {
    --w: 11;
    --h: 22;
    background: var(--k);
    padding: .7em;
    border-radius: calc(var(--u)*1.8)
}

.cw-phone .cw-scr {
    height: 100%;
    border-radius: calc(var(--u)*1.2);
    background: var(--c3);
    padding: .9em;
    display: flex;
    flex-direction: column;
    gap: .7em;
    overflow: hidden
}

.cw-phone .cw-ph {
    background: var(--c1);
    border-radius: .6em;
    padding: .9em .8em 1.8em;
    color: var(--ct)
}

.cw-phone .cw-ph b {
    font-family: var(--bold);
    font-weight: 700;
    font-size: 1.4em;
    text-transform: uppercase;
    line-height: 1
}

.cw-phone .cw-cd {
    flex: 1;
    border-radius: .7em;
    background: var(--y)
}

.cw-phone .cw-cd.s {
    flex: .55;
    background: var(--k);
    opacity: .9
}

.cw-st-bot {
    position: absolute;
    z-index: 6;
    left: var(--gut);
    right: var(--gut);
    bottom: 28px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: 20px
}

.cw-info b {
    display: block;
    font-family: var(--bold);
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
    line-height: 1.1
}

.cw-info span {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted)
}

.cw-info a {
    display: inline-flex;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 700;
    border-bottom: 1.5px solid
}

.cw-ctrl {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 10px 30px -16px rgba(0, 0, 0, .35)
}

.cw-ctrl button {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    transition: background .25s
}

.cw-ctrl button:hover {
    background: rgba(55, 55, 54, .08)
}

.cw-ctrl svg {
    width: 16px;
    height: 16px
}

.cw-ctrl .cw-pp,
.cw-ctrl .cw-pp:hover {
    background: var(--k);
    color: #fff
}

.cw-pp .i-play {
    display: none
}

.cw-pp[aria-pressed=true] .i-play {
    display: block
}

.cw-pp[aria-pressed=true] .i-pause {
    display: none
}

.cw-state {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 0 10px 0 4px;
    white-space: nowrap;
    min-width: 92px
}

.cw-circle {
    justify-self: end;
    display: grid;
    place-content: center;
    text-align: center;
    gap: 6px;
    width: clamp(104px, 9vw, 136px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--k);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.2;
    transition: transform .5s var(--spring), background .3s, color .3s
}

.cw-circle i {
    font-style: normal;
    font-size: 20px;
    color: var(--y)
}

.cw-circle:hover {
    transform: scale(1.06) rotate(-4deg);
    background: var(--y);
    color: var(--k)
}

.cw-circle:hover i {
    color: var(--k)
}

@media (max-width:760px) {
    .cw-st-top {
        top: 112px
    }

    .cw-st-top .kick {
        font-size: 11px;
        letter-spacing: .08em;
        white-space: nowrap
    }

    .cw-st-top .kick::before {
        height: 24px;
        width: 16px
    }

    .cw-st-bot {
        grid-template-columns: 1fr auto;
        bottom: 18px
    }

    .cw-info {
        grid-column: 1/-1
    }

    .cw-circle {
        width: 92px;
        font-size: 10.5px
    }

    .cw-state {
        display: none
    }
}

/* --- katalog: 100+ çalışma --- */
.cw-cat {
    padding: clamp(80px, 12vh, 130px) 0
}

.cw-cat-hd {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 30px;
    align-items: end;
    margin-bottom: 34px
}

@media (max-width:860px) {
    .cw-cat-hd {
        grid-template-columns: 1fr
    }
}

.cw-tools {
    position: sticky;
    top: 70px;
    z-index: 20;
    display: grid;
    grid-template-columns: minmax(220px, 1.1fr) auto;
    gap: 12px 16px;
    align-items: center;
    padding: 14px;
    margin: 0 calc(var(--gut)*-.25) 18px;
    border-radius: 22px;
    background: rgba(250, 248, 242, .94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--line)
}

.cw-search {
    position: relative
}

.cw-search input {
    width: 100%;
    height: 50px;
    padding: 0 44px 0 46px;
    border-radius: 99px;
    border: 1.5px solid var(--line);
    background: #fff;
    font: 500 16px var(--sans);
    color: var(--k);
    transition: border-color .25s, box-shadow .25s
}

.cw-search input:focus {
    outline: 0;
    border-color: var(--k);
    box-shadow: 0 0 0 4px rgba(237, 196, 26, .35)
}

.cw-search svg {
    position: absolute;
    left: 17px;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    stroke: var(--muted);
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round
}

.cw-search button {
    position: absolute;
    right: 8px;
    top: 50%;
    width: 34px;
    height: 34px;
    margin-top: -17px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--paper);
    font-weight: 700
}

.cw-opts {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap
}

.cw-seg {
    display: flex;
    padding: 4px;
    border-radius: 99px;
    background: #fff;
    border: 1.5px solid var(--line)
}

.cw-seg button {
    height: 40px;
    padding: 0 16px;
    border-radius: 99px;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    transition: background .25s, color .25s
}

.cw-seg button[aria-pressed=true] {
    background: var(--k);
    color: #fff
}

.cw-chips {
    grid-column: 1/-1;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 2px
}

.cw-chips::-webkit-scrollbar {
    display: none
}

.cw-chips button {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 16px;
    border-radius: 99px;
    border: 1.5px solid var(--line);
    background: #fff;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    transition: background .25s, border-color .25s, transform .4s var(--spring)
}

.cw-chips button small {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted)
}

.cw-chips button:hover {
    border-color: var(--k)
}

.cw-chips button[aria-pressed=true] {
    background: var(--y);
    border-color: var(--y);
    transform: scale(1.03)
}

.cw-chips button[aria-pressed=true] small {
    color: var(--k)
}

@media (max-width:860px) {
    .cw-tools {
        grid-template-columns: 1fr;
        top: 62px
    }

    .cw-opts {
        justify-content: flex-start
    }
}

.cw-sum {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin: 4px 2px 18px;
    font-weight: 600;
    color: var(--muted)
}

.cw-sum b {
    color: var(--k)
}

.cw-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px
}

@media (max-width:1100px) {
    .cw-grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media (max-width:760px) {
    .cw-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px
    }
}

@media (max-width:420px) {
    .cw-grid {
        grid-template-columns: 1fr
    }
}

.cw-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    background: #fff;
    border: 1px solid var(--line);
    transition: transform .5s var(--spring), box-shadow .4s
}

.cw-card.multi {
    box-shadow: 7px -7px 0 -1px #fff, 7px -7px 0 0 var(--line)
}

.cw-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 50px -30px rgba(55, 55, 54, .45)
}

.cw-card.multi:hover {
    box-shadow: 7px -7px 0 -1px #fff, 7px -7px 0 0 var(--line), 0 30px 50px -30px rgba(55, 55, 54, .45)
}

.cw-mono {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16/10;
    border-radius: 21px 21px 0 0;
    overflow: hidden;
    background: var(--mb, #EDC41A);
    color: var(--mf, #373736);
    font-family: var(--bold);
    font-weight: 700;
    font-size: clamp(40px, 4.4vw, 60px);
    letter-spacing: .02em
}

.cw-mono::after {
    content: "";
    position: absolute;
    right: 14%;
    top: -10%;
    width: 3px;
    height: 120%;
    background: var(--ms, #fff);
    opacity: .7;
    transform: rotate(21deg)
}

.cw-mono.v1 {
    --mb: #373736;
    --mf: #EDC41A;
    --ms: #EDC41A
}

.cw-mono.v2 {
    --mb: #F4EFE2;
    --mf: #373736;
    --ms: #EDC41A
}

.cw-mono.v3 {
    --mb: #FFFFFF;
    --mf: #373736;
    --ms: #EDC41A;
    box-shadow: inset 0 -1px 0 var(--line)
}

.cw-mono em {
    position: absolute;
    left: 12px;
    top: 12px;
    font-family: var(--sans);
    font-style: normal;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 5px 9px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .85);
    color: #373736
}

.cw-cb {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px 18px;
    flex: 1
}

.cw-cb b {
    font-family: var(--bold);
    font-weight: 700;
    font-size: 21px;
    text-transform: uppercase;
    line-height: 1.05
}

.cw-cb small {
    font-size: 14px;
    font-weight: 600;
    color: var(--muted)
}

.cw-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 6px
}

.cw-tags i {
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 99px;
    background: var(--ys)
}

.cw-list {
    display: grid;
    border-top: 1px solid var(--line)
}

.cw-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto 28px;
    gap: 18px;
    align-items: center;
    padding: 16px 8px;
    border-bottom: 1px solid var(--line);
    transition: background .25s, padding .4s var(--ease)
}

.cw-row:hover {
    background: #fff;
    padding-left: 16px
}

.cw-row b {
    font-family: var(--bold);
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
    line-height: 1.1
}

.cw-row span {
    font-weight: 600
}

.cw-row em {
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: 99px;
    background: var(--ys);
    white-space: nowrap
}

.cw-row i {
    font-style: normal;
    font-weight: 800;
    transition: transform .4s var(--ease)
}

.cw-row:hover i {
    transform: translateX(4px)
}

@media (max-width:760px) {
    .cw-row {
        grid-template-columns: 1fr auto;
        gap: 4px 12px
    }

    .cw-row b {
        grid-column: 1/-1;
        font-size: 15px
    }

    .cw-row i {
        display: none
    }
}

.cw-card mark,
.cw-row mark {
    background: var(--y);
    color: inherit;
    border-radius: 3px;
    padding: 0 1px
}

.cw-in {
    animation: cwIn .6s var(--ease) both;
    animation-delay: calc(var(--k, 0)*35ms)
}

@keyframes cwIn {
    from {
        opacity: 0;
        transform: translateY(18px)
    }
}

.cw-more {
    display: flex;
    justify-content: center;
    margin-top: 34px
}

.cw-empty {
    padding: 60px 20px;
    text-align: center;
    border: 1.5px dashed var(--line);
    border-radius: 22px
}

.cw-empty b {
    display: block;
    font-family: var(--bold);
    font-weight: 700;
    font-size: 26px;
    text-transform: uppercase;
    margin-bottom: 8px
}

.cw-cta {
    background: var(--y);
    padding: clamp(70px, 10vh, 110px) 0
}

.cw-cta .w {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: space-between;
    align-items: center
}

/* =====================================================================
   MÜŞTERİ SAYFASI (musteri.html) — cm- önekli
   ===================================================================== */
.cm-hero {
    padding: clamp(120px, 16vh, 160px) 0 clamp(40px, 6vh, 60px)
}

.cm-bc {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 26px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.cm-bc a:hover {
    color: var(--k);
    text-decoration: underline
}

.cm-top {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(20px, 3vw, 40px);
    align-items: center
}

.cm-top .cw-mono {
    width: clamp(110px, 12vw, 170px);
    aspect-ratio: 1;
    border-radius: 26px;
    font-size: clamp(40px, 4.6vw, 64px)
}

.cm-h1 {
    font-family: var(--bold);
    font-weight: 700;
    text-transform: uppercase;
    font-size: clamp(40px, 6vw, 92px);
    line-height: .95
}

.cm-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: clamp(24px, 5vw, 80px);
    margin-top: 34px;
    align-items: start
}

.cm-row .lead {
    max-width: 42em
}

.cm-facts {
    display: grid;
    gap: 14px;
    padding: 24px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid var(--line)
}

.cm-facts dt {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted)
}

.cm-facts dd {
    font-weight: 700;
    font-size: 18px
}

.cm-facts .cw-tags {
    padding: 0
}

.cm-facts .cw-tags a {
    font-size: 13px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 99px;
    background: var(--ys);
    transition: background .25s
}

.cm-facts .cw-tags a:hover {
    background: var(--y)
}

.cm-facts .btn {
    margin-top: 4px;
    height: 48px;
    justify-content: center
}

@media (max-width:900px) {
    .cm-row {
        grid-template-columns: 1fr
    }
}

@media (max-width:560px) {
    .cm-top {
        grid-template-columns: 1fr
    }
}

.cm-body {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: clamp(24px, 4vw, 60px);
    align-items: start;
    padding-bottom: clamp(60px, 10vh, 110px)
}

.cm-body.solo {
    grid-template-columns: minmax(0, 1fr)
}

.cm-toc {
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 120px);
    overflow: auto;
    padding: 18px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--line);
    scrollbar-width: thin
}

.cm-toc p {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px
}

.cm-toc a {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 6px;
    padding: 8px 8px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    transition: background .2s
}

.cm-toc a span {
    color: var(--muted);
    font-weight: 700
}

.cm-toc a:hover {
    background: var(--paper)
}

.cm-toc a.on {
    background: var(--ys)
}

@media (max-width:900px) {
    .cm-body {
        grid-template-columns: 1fr
    }

    .cm-toc {
        display: none
    }
}

.cm-works {
    display: grid;
    gap: clamp(34px, 6vh, 64px)
}

.cm-work {
    scroll-margin-top: 96px
}

.cm-meta {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px;
    align-items: baseline;
    margin-top: 16px
}

.cm-meta .n {
    font-family: var(--bold);
    font-weight: 700;
    font-size: 30px;
    line-height: 1;
    color: var(--yd)
}

.cm-meta h2 {
    font-family: var(--bold);
    font-weight: 700;
    font-size: clamp(22px, 2.4vw, 32px);
    line-height: 1.1;
    text-transform: uppercase
}

.cm-meta a {
    font-size: 13px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 99px;
    background: var(--ys);
    white-space: nowrap
}

.cm-meta a:hover {
    background: var(--y)
}

@media (max-width:620px) {
    .cm-meta {
        grid-template-columns: auto 1fr
    }

    .cm-meta a {
        grid-column: 2;
        justify-self: start
    }
}

/* temsili iş görseli: kategoriye göre düzen */
.cm-vis {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: 22px;
    overflow: hidden;
    background: var(--vb, #EFEADC);
    box-shadow: 0 30px 60px -40px rgba(55, 55, 54, .5)
}

.cm-vis.v1 {
    --vb: #373736
}

.cm-vis.v2 {
    --vb: #EDC41A
}

.cm-vis.v3 {
    --vb: #FAF8F2
}

.cm-vis i {
    position: absolute;
    display: block;
    border-radius: 10px;
    box-shadow: 0 18px 30px -16px rgba(0, 0, 0, .4)
}

.cm-vis b {
    position: absolute;
    left: 5%;
    bottom: 6%;
    font-family: var(--bold);
    font-weight: 700;
    font-size: clamp(22px, 3.4vw, 46px);
    text-transform: uppercase;
    line-height: 1;
    color: var(--vt, #373736);
    max-width: 70%
}

.cm-vis.v1 b {
    --vt: #EDC41A
}

.cm-vis small {
    position: absolute;
    right: 14px;
    top: 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .85);
    color: #373736
}

.cm-vis .a {
    background: #fff
}

.cm-vis .b {
    background: #EDC41A
}

.cm-vis .c {
    background: #373736
}

.cm-vis.v2 .b {
    background: #fff
}

.cm-vis.v1 .c {
    background: #FAF8F2
}

/* web */
.cm-vis[data-t=web] .a {
    left: 18%;
    right: 18%;
    top: 10%;
    bottom: 22%;
    border-top: 22px solid #373736
}

.cm-vis[data-t=web] .b {
    left: 24%;
    top: 30%;
    width: 26%;
    height: 22%
}

.cm-vis[data-t=web] .c {
    right: 10%;
    bottom: 12%;
    width: 12%;
    height: 52%;
    border-radius: 16px;
    border: 6px solid #373736;
    background: #fff
}

/* sosyal */
.cm-vis[data-t=sosyal] i {
    top: 18%;
    width: 22%;
    aspect-ratio: 1
}

.cm-vis[data-t=sosyal] .a {
    left: 18%;
    transform: rotate(-6deg)
}

.cm-vis[data-t=sosyal] .b {
    left: 39%;
    top: 14%
}

.cm-vis[data-t=sosyal] .c {
    left: 60%;
    transform: rotate(6deg)
}

/* kimlik */
.cm-vis[data-t=kimlik] .a {
    left: 14%;
    top: 14%;
    width: 24%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    border: 8px solid #373736
}

.cm-vis.v1[data-t=kimlik] .a {
    border-color: #EDC41A
}

.cm-vis[data-t=kimlik] .b {
    left: 46%;
    top: 18%;
    width: 30%;
    height: 26%;
    transform: rotate(-5deg)
}

.cm-vis[data-t=kimlik] .c {
    left: 52%;
    top: 50%;
    width: 34%;
    height: 24%;
    transform: rotate(4deg)
}

/* basılı: katalog, broşür, ilan, bülten */
.cm-vis[data-t=basili] .a {
    left: 22%;
    top: 12%;
    width: 26%;
    height: 66%;
    border-radius: 8px 0 0 8px
}

.cm-vis[data-t=basili] .b {
    left: 48%;
    top: 12%;
    width: 26%;
    height: 66%;
    border-radius: 0 8px 8px 0;
    background: #fff
}

.cm-vis[data-t=basili] .b::before {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    top: 12%;
    height: 34%;
    border-radius: 6px;
    background: #EDC41A
}

.cm-vis[data-t=basili] .c {
    right: 8%;
    top: 26%;
    width: 13%;
    height: 44%;
    transform: rotate(8deg)
}

/* afiş, billboard, tabela */
.cm-vis[data-t=afis] .a {
    left: 12%;
    top: 10%;
    width: 22%;
    height: 72%;
    background: #EDC41A
}

.cm-vis.v2[data-t=afis] .a {
    background: #373736
}

.cm-vis[data-t=afis] .b {
    left: 40%;
    top: 18%;
    width: 48%;
    height: 34%;
    background: #fff;
    border-bottom: 10px solid #373736
}

.cm-vis[data-t=afis] .c {
    left: 62%;
    top: 52%;
    width: 4%;
    height: 30%;
    border-radius: 2px;
    box-shadow: none
}

/* fuar, ambalaj */
.cm-vis[data-t=fuar] .a {
    left: 18%;
    top: 10%;
    width: 46%;
    height: 56%;
    background: #fff;
    border-left: 14px solid #EDC41A
}

.cm-vis[data-t=fuar] .b {
    left: 26%;
    top: 56%;
    width: 30%;
    height: 22%
}

.cm-vis[data-t=fuar] .c {
    left: 70%;
    top: 18%;
    width: 12%;
    height: 60%
}

/* video */
.cm-vis[data-t=video] {
    --vb: #2B2B2A
}

.cm-vis[data-t=video] b {
    --vt: #EDC41A
}

.cm-vis[data-t=video] .a {
    left: 12%;
    right: 12%;
    top: 12%;
    bottom: 24%;
    background: linear-gradient(#F3DA73, #EDC41A)
}

.cm-vis[data-t=video] .b {
    left: 50%;
    top: 44%;
    width: 9%;
    aspect-ratio: 1;
    margin: -4.5% 0 0 -4.5%;
    border-radius: 50%;
    background: #fff
}

.cm-vis[data-t=video] .b::after {
    content: "";
    position: absolute;
    left: 40%;
    top: 30%;
    border-left: 14px solid #373736;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent
}

.cm-vis[data-t=video] .c {
    left: 12%;
    right: 12%;
    bottom: 16%;
    height: 5px;
    border-radius: 3px;
    background: #EDC41A;
    box-shadow: none
}

/* ajans: karma */
.cm-vis[data-t=ajans] .a {
    left: 10%;
    top: 12%;
    width: 40%;
    height: 52%;
    border-top: 18px solid #373736
}

.cm-vis[data-t=ajans] .b {
    left: 54%;
    top: 10%;
    width: 18%;
    height: 56%;
    transform: rotate(-4deg)
}

.cm-vis[data-t=ajans] .c {
    left: 74%;
    top: 30%;
    width: 16%;
    aspect-ratio: 1;
    transform: rotate(6deg)
}

.cm-vis i {
    transition: transform .8s var(--ease)
}

.cm-work:hover .cm-vis .a {
    transform: translateY(-6px)
}

.cm-work:hover .cm-vis .c {
    transform: translateY(6px) rotate(3deg)
}

.cm-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding-bottom: clamp(60px, 10vh, 110px)
}

.cm-nav a {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 24px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid var(--line);
    transition: transform .5s var(--spring), box-shadow .4s
}

.cm-nav a:last-child {
    text-align: right
}

.cm-nav a:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 40px -26px rgba(55, 55, 54, .45)
}

.cm-nav small {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted)
}

.cm-nav b {
    font-family: var(--bold);
    font-weight: 700;
    font-size: clamp(20px, 2.2vw, 30px);
    text-transform: uppercase;
    line-height: 1.05
}

.cm-404 {
    padding: clamp(140px, 20vh, 200px) 0 120px;
    text-align: center
}

.cm-404 .btn {
    margin-top: 26px
}

/* sonradan oluşturulan içerik için belirme (ana sayfa .rv gözlemcisinden bağımsız) */
.js .cm-rv {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .8s var(--ease), transform 1s var(--ease)
}

.js .cm-rv.in {
    opacity: 1;
    transform: none
}

@media (prefers-reduced-motion:reduce) {
    html.js:not(.force-motion) .cm-rv {
        opacity: 1;
        transform: none
    }

    html:not(.force-motion) .cw-in {
        animation: none
    }
}

/* ---------------------------------------------------------------------
   Müşteri sayfası — her çalışma bağımsız bir kart
   (üstte kategori şeridi, numara, görsel, eşit boşluklu açıklama alanı)
   --------------------------------------------------------------------- */
.cm-cases {
    display: grid;
    gap: clamp(28px, 4vw, 48px)
}

.cm-case {
    --acc: #373736;
    position: relative;
    padding: clamp(18px, 2.4vw, 32px);
    padding-top: clamp(22px, 2.6vw, 36px);
    border-radius: 28px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 30px 60px -48px rgba(55, 55, 54, .45);
    scroll-margin-top: 96px;
    overflow: hidden
}

.cm-case::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 6px;
    background: var(--acc)
}

.cm-case[data-g=grafik] {
    --acc: #EDC41A
}

.cm-case[data-g=sosyal] {
    --acc: repeating-linear-gradient(90deg, #EDC41A 0 22px, #373736 22px 44px)
}

.cm-case[data-g=video] {
    --acc: #2B2B2A
}

.cm-case[data-g=ajans] {
    --acc: linear-gradient(90deg, #EDC41A, #373736)
}

.cm-case-hd {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: clamp(16px, 2vw, 22px)
}

.cm-no {
    font-family: var(--bold);
    font-weight: 700;
    font-size: 28px;
    line-height: 1
}

.cm-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 99px;
    background: var(--paper);
    border: 1px solid var(--line);
    font-size: 13px;
    font-weight: 700;
    transition: background .25s
}

.cm-chip i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--acc)
}

.cm-chip:hover {
    background: var(--ys)
}

.cm-frame .cm-vis,
.cm-slide .cm-vis {
    box-shadow: none
}

.cm-desc {
    margin-top: clamp(18px, 2.4vw, 28px);
    padding-top: clamp(16px, 2vw, 24px);
    border-top: 1px solid var(--line)
}

.cm-text {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(14px, 3vw, 48px);
    align-items: start
}

.cm-year {
    display: inline-block;
    margin-bottom: 10px;
    padding: 4px 10px;
    border-radius: 99px;
    background: var(--k);
    color: var(--y);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em
}

.cm-text h2 {
    font-family: var(--bold);
    font-weight: 700;
    font-size: clamp(22px, 2.3vw, 32px);
    line-height: 1.08;
    text-transform: uppercase
}

.cm-text p {
    color: color-mix(in srgb, var(--k) 80%, transparent);
    font-size: clamp(15.5px, 1.15vw, 17.5px);
    line-height: 1.65
}

@media (max-width:760px) {
    .cm-text {
        grid-template-columns: 1fr
    }
}

.cm-toc a span+span {
    color: var(--k);
    font-weight: 600
}

.cm-toc em {
    font-style: normal;
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 20px;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 99px;
    background: var(--k);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    vertical-align: 1px
}

/* Kayan kart: aynı kategorideki birden fazla iş. Kaydırılabilir olduğu tasarımdan okunur:
   yığın ikonu + adet, sayaç ve oklar, sağda görünen sonraki iş, ilerleme çubukları. */
.cm-stack {
    position: relative;
    width: 42px;
    height: 32px;
    margin-left: 2px
}

.cm-stack i {
    position: absolute;
    left: 8px;
    top: 8px;
    width: 24px;
    height: 17px;
    border-radius: 4px;
    border: 2px solid var(--k);
    background: #fff
}

.cm-stack i:nth-child(1) {
    transform: translate(-6px, 5px)
}

.cm-stack i:nth-child(3) {
    transform: translate(6px, -5px);
    background: var(--y)
}

.cm-stack b {
    position: absolute;
    right: -8px;
    top: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 99px;
    background: var(--k);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: grid;
    place-items: center
}

.cm-ctl {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px
}

.cm-cnt {
    font-family: var(--bold);
    font-weight: 700;
    font-size: 18px;
    color: var(--muted);
    margin-right: 4px;
    white-space: nowrap
}

.cm-cnt b {
    font-size: 24px;
    color: var(--k)
}

.cm-arr {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    display: grid;
    place-items: center;
    background: #fff;
    transition: background .25s, color .25s, border-color .25s, transform .4s var(--spring)
}

.cm-arr svg {
    width: 16px;
    height: 16px
}

.cm-arr:hover {
    background: var(--k);
    color: #fff;
    border-color: var(--k);
    transform: scale(1.06)
}

.cm-deck {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none
}

/* her çalışma kartın tam genişliğini kaplar; yandaki çalışmadan hiçbir parça görünmez */
.cm-track {
    display: flex;
    column-gap: 24px;
    transition: transform .95s var(--ease);
    will-change: transform
}

.cm-slide {
    flex: 0 0 100%;
    min-width: 0;
    transition: opacity .8s var(--ease), transform .95s var(--ease)
}

.cm-slide:not(.on) {
    opacity: .35;
    transform: scale(.94)
}

.cm-prog {
    display: flex;
    gap: 6px;
    margin-top: 16px
}

.cm-prog i {
    flex: 1;
    height: 4px;
    border-radius: 4px;
    background: rgba(55, 55, 54, .14);
    overflow: hidden
}

.cm-prog b {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--k);
    transform-origin: left;
    transform: scaleX(var(--p, 0));
    transition: background .3s
}

.cm-group.is-paused .cm-prog b {
    background: var(--yd)
}

.cm-texts {
    display: grid
}

.cm-tx {
    grid-area: 1/1;
    visibility: hidden;
    opacity: 0;
    transition: opacity .4s, visibility 0s .4s
}

.cm-tx.on {
    visibility: visible;
    opacity: 1;
    transition: opacity .6s .12s
}

.cm-tx .cm-tt,
.cm-tx p {
    transform: translateY(14px);
    transition: transform .8s var(--ease)
}

.cm-tx.on .cm-tt {
    transform: none;
    transition-delay: .12s
}

.cm-tx.on p {
    transform: none;
    transition-delay: .24s
}

@media (max-width:620px) {
    .cm-ctl {
        flex: 1 0 100%;
        justify-content: space-between;
        margin-left: 0
    }

    .cm-cnt {
        margin-right: auto
    }

    .cm-arr {
        width: 40px;
        height: 40px
    }
}

@media (prefers-reduced-motion:reduce) {

    html:not(.force-motion) .cm-track,
    html:not(.force-motion) .cm-slide,
    html:not(.force-motion) .cm-tx,
    html:not(.force-motion) .cm-tx .cm-tt,
    html:not(.force-motion) .cm-tx p {
        transition: none
    }
}

/* =====================================================================
   REVİZYON 2 — patron notları (marka adı, 322, tam hizmet ajanslığı,
   yeni hizmet animasyonları, referans logoları, gerçek müşteri görselleri)
   ===================================================================== */

/* "Üç Yirmiiki" her yerde: Üç sarı, Yirmiiki koyu (koyu zeminde beyaz) */
.uy {
    color: var(--k);
    white-space: nowrap
}

.uy i {
    font-style: normal;
    color: var(--y)
}

.dark .uy,
.ft .uy,
.board .uy {
    color: #fff
}

.board-top .uy {
    letter-spacing: .12em
}

/* footer telif satırı: © 2016 – 2026 belirgin olsun */
.ft-b {
    font-size: 14.5px;
    color: rgba(255, 255, 255, .85)
}

.ft-b>span:first-child {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    font-weight: 600
}

.ft-b .cpy {
    color: var(--y);
    font-size: 1.35em;
    line-height: 1;
    font-weight: 700
}

/* telefon: 0322 457 8 322 — son 322 renkli */
.t3 {
    color: var(--yd)
}

.ft .t3 {
    color: var(--y)
}

.nap .t3,
.mnav .t3 {
    display: inline-block;
    padding: 0 .16em;
    border-radius: .2em;
    background: var(--k);
    color: var(--y)
}

/* hizmetler başlığı: tam hizmet ajanslığı rozeti */
.tha-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 7px 7px 7px 18px;
    border-radius: 99px;
    background: var(--k);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    transition: transform .45s var(--spring), box-shadow .3s
}

.tha-pill b {
    font-family: var(--bold);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--y)
}

.tha-pill svg {
    width: 32px;
    height: 32px;
    padding: 8px;
    border-radius: 50%;
    background: var(--y);
    color: var(--k);
    transition: transform .45s var(--spring)
}

.tha-pill:hover {
    box-shadow: 0 18px 30px -18px rgba(55, 55, 54, .7)
}

.tha-pill:hover svg {
    transform: translateX(3px)
}

/* 03 — tam hizmet ajanslığı */
.tha {
    display: inline-block;
    margin: 26px 0 18px;
    padding: .2em .45em .12em;
    border-radius: 10px;
    background: var(--y);
    color: var(--k);
    font-family: var(--bold);
    font-weight: 700;
    font-size: clamp(24px, 2.8vw, 38px);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .01em
}

.sk {
    color: var(--y);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap
}

.tha-list {
    display: grid;
    gap: 0;
    margin-top: 26px
}

.tha-list li {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 16px;
    align-items: baseline;
    padding: 13px 0;
    border-top: 1px solid rgba(255, 255, 255, .14)
}

.tha-list b {
    font-family: var(--bold);
    font-weight: 700;
    font-size: 21px;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--y)
}

.tha-list span {
    color: rgba(255, 255, 255, .78);
    font-size: 16px
}

@media (max-width:520px) {
    .tha-list li {
        grid-template-columns: 1fr;
        gap: 4px
    }
}

/* 01 grafik tasarım: kimlik setinin parçaları açılıp toplanır */
.a-kit .k {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    border-radius: 8px;
    box-shadow: 0 14px 26px -12px rgba(0, 0, 0, .38);
    animation: kit 6s var(--ease) infinite;
    --x: 0%;
    --y: 0%;
    --r: 0deg
}

.a-kit .k-lh {
    width: 26%;
    height: 70%;
    background: #fff;
    --x: 16%;
    --y: -8%;
    --r: 4deg
}

.a-kit .k-lh::before {
    content: "";
    position: absolute;
    left: 12%;
    top: 9%;
    width: 30%;
    height: 9%;
    border-radius: 3px;
    background: var(--y)
}

.a-kit .k-lh::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    top: 30%;
    height: 46%;
    background: repeating-linear-gradient(to bottom, rgba(55, 55, 54, .22) 0 3px, transparent 3px 11px)
}

.a-kit .k-post {
    width: 24%;
    height: 64%;
    background: #fff;
    overflow: hidden;
    --x: -118%;
    --y: -6%;
    --r: -7deg;
    animation-delay: .06s
}

.a-kit .k-post b {
    position: absolute;
    left: 10%;
    top: -6%;
    font-family: var(--bold);
    font-weight: 700;
    font-size: clamp(46px, 5.4vw, 84px);
    line-height: 1;
    color: var(--k)
}

.a-kit .k-post::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 10%;
    height: 8%;
    border-radius: 3px;
    background: var(--k)
}

.a-kit .k-card {
    width: 28%;
    height: 30%;
    background: var(--k);
    --x: 98%;
    --y: 68%;
    --r: -9deg;
    animation-delay: .12s
}

.a-kit .k-card::after {
    content: "";
    position: absolute;
    right: 16%;
    top: -10%;
    width: 3px;
    height: 120%;
    background: var(--y);
    transform: rotate(21deg)
}

.a-kit .k-card::before {
    content: "";
    position: absolute;
    left: 12%;
    bottom: 18%;
    width: 42%;
    height: 12%;
    border-radius: 2px;
    background: rgba(255, 255, 255, .75)
}

.a-kit .k-sw {
    width: 30%;
    height: 14%;
    display: flex;
    overflow: hidden;
    background: #fff;
    --x: -62%;
    --y: 205%;
    --r: 3deg;
    animation-delay: .18s
}

.a-kit .k-sw s {
    flex: 1
}

.a-kit .k-sw s:nth-child(1) {
    background: var(--y)
}

.a-kit .k-sw s:nth-child(2) {
    background: var(--k)
}

.a-kit .k-sw s:nth-child(3) {
    background: #fff
}

.a-kit .k-logo {
    width: 15%;
    aspect-ratio: 1;
    height: auto;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 4px var(--k), 0 14px 26px -12px rgba(0, 0, 0, .38);
    --x: 215%;
    --y: -118%;
    --r: 200deg;
    animation-delay: .24s
}

.a-kit .k-logo::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 16%;
    width: 4px;
    height: 68%;
    margin-left: -2px;
    background: var(--yd);
    transform: rotate(21deg)
}

@keyframes kit {

    0%,
    10% {
        transform: translate(0, 0) rotate(0) scale(.86)
    }

    36%,
    74% {
        transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1)
    }

    100% {
        transform: translate(0, 0) rotate(0) scale(.86)
    }
}

/* 05 sponsorlu reklam: kitle hedefe akar, sonuç çubukları yükselir */
.a-ads .tg {
    position: absolute;
    left: 31%;
    top: 50%;
    width: 44%;
    aspect-ratio: 1;
    translate: -50% -50%
}

.a-ads .tg i {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(55, 55, 54, .85)
}

.a-ads .tg i:nth-child(2) {
    inset: 17%
}

.a-ads .tg i:nth-child(3) {
    inset: 34%;
    background: #fff
}

.a-ads .tg b {
    position: absolute;
    inset: 44%;
    border-radius: 50%;
    background: var(--k);
    animation: adPulse 3s ease-in-out infinite
}

.a-ads [class^=pp] {
    position: absolute;
    left: 31%;
    top: 50%;
    width: 3.4%;
    aspect-ratio: 1;
    margin: -1.7% 0 0 -1.7%;
    border-radius: 50%;
    background: var(--k);
    opacity: 0;
    animation: adIn 3s var(--ease) infinite
}

.a-ads .pp1 {
    --dx: -760%;
    --dy: -560%
}

.a-ads .pp2 {
    --dx: 860%;
    --dy: -640%;
    animation-delay: .6s
}

.a-ads .pp3 {
    --dx: -720%;
    --dy: 520%;
    animation-delay: 1.2s
}

.a-ads .pp4 {
    --dx: 640%;
    --dy: 620%;
    animation-delay: 1.8s
}

.a-ads .pp5 {
    --dx: -860%;
    --dy: 40%;
    animation-delay: 2.4s
}

.a-ads .ch {
    position: absolute;
    right: 7%;
    bottom: 20%;
    width: 26%;
    height: 58%;
    display: flex;
    align-items: flex-end;
    gap: 10%;
    border-bottom: 3px solid var(--k)
}

.a-ads .ch s {
    flex: 1;
    height: 12%;
    border-radius: 4px 4px 0 0;
    background: var(--k);
    animation: adBar 4.5s var(--ease) infinite
}

.a-ads .ch s:nth-child(1) {
    --h: 42%
}

.a-ads .ch s:nth-child(2) {
    --h: 66%;
    animation-delay: .15s
}

.a-ads .ch s:nth-child(3) {
    --h: 96%;
    background: #fff;
    box-shadow: inset 0 0 0 3px var(--k);
    animation-delay: .3s
}

@keyframes adIn {
    0% {
        transform: translate(var(--dx), var(--dy)) scale(1);
        opacity: 0;
        background: var(--k)
    }

    14% {
        opacity: 1
    }

    62% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
        background: var(--k)
    }

    72% {
        transform: translate(0, 0) scale(1.6);
        background: var(--y);
        opacity: 1
    }

    86%,
    100% {
        transform: translate(0, 0) scale(.2);
        opacity: 0
    }
}

@keyframes adPulse {

    0%,
    100% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.5)
    }
}

@keyframes adBar {

    0%,
    8% {
        height: 12%
    }

    40%,
    80% {
        height: var(--h)
    }

    100% {
        height: 12%
    }
}

/* 05 seçili çalışmalar: tümü butonu altta ortada */
.works-all {
    display: flex;
    justify-content: center;
    margin-top: clamp(28px, 4vw, 46px)
}

/* 06 referanslar: arkada tek renk, soluk logo */
.refs li {
    position: relative;
    overflow: hidden
}

.refs li span {
    position: relative;
    z-index: 1
}

/* logolar beyaz zeminli olabilir: gri tona çevrilip "multiply" ile beyazı kaybolur, yalnızca işaret soluk kalır */
.refs .rl {
    position: absolute;
    left: 12%;
    top: 20%;
    width: 76%;
    height: 60%;
    object-fit: contain;
    filter: grayscale(1) contrast(1.6);
    mix-blend-mode: multiply;
    opacity: .11;
    pointer-events: none;
    transition: opacity .6s
}

.refs li.flash .rl {
    opacity: .16
}

/* 08 teklif formu: 5 hizmet tek satırda (dar ekranda yana kayar) */
.chips-1 {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 4px;
    margin: -4px -4px 12px
}

.chips-1::-webkit-scrollbar {
    display: none
}

.chips-1 label {
    flex: 1 0 auto
}

.chips-1 span {
    padding: 10px 13px;
    text-align: center;
    white-space: nowrap
}

@media (max-width:520px) {
    .chips-1 {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 5px;
        overflow: visible
    }

    .chips-1 span {
        height: 100%;
        display: grid;
        place-items: center;
        padding: 9px 2px;
        font-size: 12.5px;
        line-height: 1.15;
        white-space: normal;
        border-radius: 14px
    }
}

/* hero animasyon adımları: uzun etiketler */
.hv-steps {
    grid-template-columns: 1.25fr .7fr .9fr .9fr 1.6fr
}

.hv-steps li {
    line-height: 1.25
}

@media (max-width:560px) {
    .hv-steps li {
        font-size: 0;
        line-height: 0
    }

    .hv-steps li.on {
        font-size: 10.5px;
        line-height: 1.2;
        white-space: nowrap
    }

    .hv-steps {
        grid-template-columns: repeat(5, 1fr)
    }

    .hv-steps li:last-child.on {
        text-align: right;
        direction: rtl
    }
}

/* katalog ve müşteri başlığı: logosu olan markada harf yerine logo */
.cw-mono.cw-logo {
    background: #fff;
    box-shadow: inset 0 -1px 0 var(--line)
}

.cw-mono.cw-logo::after {
    display: none
}

.cw-mono.cw-logo img {
    width: 70%;
    height: 62%;
    object-fit: contain
}

.cm-top .cw-mono.cw-logo {
    box-shadow: 0 0 0 1px var(--line), 0 24px 40px -30px rgba(55, 55, 54, .6)
}

/* patlama sahnesi: gerçek görsel katmanı + tek markalı sahne */
.cw-img {
    position: absolute;
    inset: 0;
    z-index: 3;
    background-repeat: no-repeat;
    opacity: 0;
    pointer-events: none
}

.cw-real .cw-img {
    opacity: 1
}

.cw-real .cw-pz {
    background: #fff
}

.cw-real .cw-phone {
    padding: 0;
    border-radius: calc(var(--u)*1.1)
}

.cw-real .cw-pz>:not(.cw-img) {
    visibility: hidden
}

.cw-solo .cw-bars,
.cw-solo .cw-count,
.cw-solo [data-cw-prev],
.cw-solo [data-cw-next] {
    display: none
}

.cw-solo .cw-ctrl {
    justify-self: start
}

.cm-hero-2 {
    padding-top: clamp(56px, 9vh, 96px)
}

/* müşteri sayfası: gerçek görseller */
.cm-shot {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: 22px;
    overflow: hidden;
    background: #EFEADC
}

.cm-zoom {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    overflow: hidden
}

.cm-zoom img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--ease)
}

.cm-zoom:hover img {
    transform: scale(1.03)
}

.cm-zoom::after {
    content: "";
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #EDC41A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23373736' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E") center/20px no-repeat;
    box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .5);
    opacity: 0;
    transform: scale(.8);
    transition: opacity .3s, transform .4s var(--spring)
}

.cm-zoom:hover::after,
.cm-zoom:focus-visible::after {
    opacity: 1;
    transform: none
}

@media (hover:none) {
    .cm-zoom::after {
        opacity: 1;
        transform: none
    }
}

.cm-slide:not(.on) .cm-zoom {
    cursor: pointer
}

.cm-slide:not(.on) .cm-zoom::after {
    display: none
}

.cm-mosaic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 6px;
    background: #fff
}

.cm-mosaic .cm-zoom::after {
    width: 34px;
    height: 34px;
    right: 10px;
    bottom: 10px;
    background-size: 16px
}

/* büyütme penceresi */
.cm-lb {
    margin: auto;
    padding: 0;
    border: 0;
    background: transparent;
    max-width: min(94vw, 1600px);
    max-height: 94vh;
    overflow: visible
}

.cm-lb::backdrop {
    background: rgba(32, 32, 31, .88)
}

.cm-lb figure {
    margin: 0
}

.cm-lb img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(94vw, 1600px);
    max-height: 84vh;
    border-radius: 14px;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7)
}

.cm-lb figcaption {
    margin-top: 12px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-align: center
}

.cm-lb-x {
    position: absolute;
    right: -10px;
    top: -10px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--y);
    color: var(--k);
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6)
}

.cm-lb[open] {
    animation: lbIn .35s var(--ease)
}

@keyframes lbIn {
    from {
        opacity: 0;
        transform: scale(.96)
    }
}

@media (prefers-reduced-motion:reduce) {
    html:not(.force-motion) .cm-lb[open] {
        animation: none
    }

    html:not(.force-motion) .cm-zoom img {
        transition: none
    }
}

/* =====================================================================
   REVİZYON 3 — konsept bütünlüğü (eşit kartlar), 3//22, ikonlar,
   referanslar + seçili çalışmalar tek bölüm, Groseri kolajı
   ===================================================================== */

/* hero metnindeki marka adı: "Biz kimiz" başlığındaki gibi büyük harf ve kalın */
.uy-b {
    font-family: var(--bold);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.16em;
    letter-spacing: .01em;
    line-height: 1
}

/* 0322 panosu: 3//22 kartı (rakam kutularının yerine geçer) */
.flaps {
    position: relative
}

.flap {
    transition: opacity .45s ease, transform .6s var(--ease)
}

.b322 {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    height: calc(var(--fh) * 1.18);
    width: calc(var(--fh) * 1.18 * .7895);
    transform: translate(-50%, -50%) rotate(-7deg) scale(.86);
    opacity: 0;
    transition: opacity .5s ease, transform .8s var(--spring);
    filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .45));
    pointer-events: none
}

.b322 text {
    font-family: var(--thin);
    font-weight: 200
}

.b322 .b322-3 {
    fill: #EDC41A
}

.b322 .b322-22 {
    fill: #373736;
    font-weight: 300
}

.board.is-322 .flap {
    opacity: 0;
    transform: scale(.88)
}

.board.is-322 .b322 {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-5deg) scale(1)
}

/* eşit uzunluk: yan yana kartlar aynı boyda, alt bağlantılar aynı hizada */
.values li {
    display: flex;
    flex-direction: column
}

.values p+p {
    margin-top: 10px
}

.svc-grid>.svc,
.svc-wide>.svc {
    height: 100%
}

.offers {
    align-items: stretch
}

.offer {
    height: 100%
}

.works .wk {
    display: flex;
    flex-direction: column
}

.works .wk-bd {
    flex: 1
}

/* referanslar + seçili çalışmalar */
.ref-works {
    margin-top: clamp(56px, 8vh, 90px);
    padding-top: clamp(40px, 6vh, 64px);
    border-top: 1px solid var(--line)
}

.ref-works-hd {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px 40px;
    flex-wrap: wrap;
    margin-bottom: 26px
}

.ref-works-hd h3 {
    font-family: var(--bold);
    font-weight: 700;
    font-size: clamp(28px, 2.6vw, 38px);
    line-height: 1;
    text-transform: uppercase
}

.ref-works-hd p {
    color: var(--muted);
    font-size: 16px;
    max-width: 36em
}

/* footer: yuvarlak sosyal medya ikonları (satır içi SVG, ek dosya yok) */
.soc {
    display: flex;
    gap: 10px;
    margin-top: 16px
}

.soc a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1.5px solid rgba(255, 255, 255, .28);
    color: #fff;
    transition: background .25s, color .25s, border-color .25s, transform .4s var(--spring)
}

.soc svg {
    width: 19px;
    height: 19px
}

.soc a:hover,
.soc a:focus-visible {
    background: var(--y);
    border-color: var(--y);
    color: var(--k);
    transform: translateY(-3px)
}

/* müşteri sayfası: tüm işler masaya dağılmış baskılar (kolaj) */
.ck {
    position: relative;
    margin: clamp(84px, 11vh, 104px) var(--gut) 0;
    height: calc(100vh - clamp(110px, 14vh, 140px));
    height: calc(100svh - clamp(110px, 14vh, 140px));
    min-height: 520px;
    max-height: 940px;
    border-radius: 28px;
    overflow: hidden;
    background: radial-gradient(120% 90% at 50% 40%, #3a3a38 0%, #2a2a29 55%, #1f1f1e 100%)
}

.ck::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .35;
    pointer-events: none;
    background: repeating-radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px)
}

.ck-desk {
    position: absolute;
    inset: 4% 3% 4% 3%
}

/* baskıların konumu, açısı, derinliği ve patlama hareketi script.js'te (initCollage) her karede hesaplanır */
.ck {
    perspective: 1700px;
    isolation: isolate
}

.ck .ck-desk {
    z-index: 1
}

/* baskılar alttaki başlığın üstünde toplansın */
.ck .ck-desk {
    inset: 4% 3% 15% 3%
}

.ck-all .ck-desk {
    inset: 3% 3% 19% 3%
}

.ck-desk {
    will-change: transform
}

.ck-p {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20%;
    border: 0;
    background: #fff;
    cursor: zoom-in;
    padding: clamp(4px, .45vw, 7px);
    border-radius: 3px;
    box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .35);
    transform: translate(-50%, -50%);
    opacity: 0;
    will-change: transform, opacity;
    transition: box-shadow .4s
}

.ck-p img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 1px
}

.ck-p.is-hot {
    box-shadow: 0 40px 60px -20px rgba(0, 0, 0, .8), 0 4px 10px rgba(0, 0, 0, .4);
    outline: none
}

.ck-p:focus-visible {
    box-shadow: 0 0 0 4px var(--y), 0 34px 50px -18px rgba(0, 0, 0, .75);
    outline: none
}

/* üstüne gelince baskının altında başlığı */
.ck-cap {
    position: absolute;
    left: 50%;
    top: calc(100% + 10px);
    max-width: 150%;
    width: max-content;
    padding: 7px 12px;
    border-radius: 99px;
    background: var(--y);
    color: var(--k);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -6px) scale(.8);
    transition: opacity .25s ease, transform .45s var(--spring)
}

.ck-cap b {
    font-weight: 800;
    text-transform: uppercase;
    margin-right: 6px
}

.ck-p.is-hot .ck-cap {
    opacity: 1;
    transform: translate(-50%, 0) scale(.85)
}

.ck-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: clamp(60px, 9vh, 90px) clamp(20px, 3vw, 40px) clamp(20px, 3vw, 32px);
    background: linear-gradient(to top, rgba(20, 20, 19, .92), rgba(20, 20, 19, .6) 55%, transparent);
    color: #fff;
    pointer-events: none;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px 28px;
    flex-wrap: wrap
}

/* marka adı; önünde sitedeki // işareti, yazıyla aynı hizada */
.ck-name {
    display: flex;
    align-items: center;
    gap: .22em;
    margin: 0;
    font-family: var(--bold);
    font-weight: 700;
    font-size: clamp(40px, 6vw, 84px);
    line-height: .9;
    text-transform: uppercase;
    color: var(--y)
}

.ck-name::before {
    content: "";
    flex: 0 0 auto;
    width: .5em;
    height: .66em;
    margin-top: -.06em;
    background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 34'%3E%3Cpath d='M12.5 3 2.5 33' stroke='%23EDC41A' stroke-width='2.8'/%3E%3Cpath d='M23.5 1 13.5 31' stroke='%23FFFFFF' stroke-width='2.8'/%3E%3C/svg%3E")
}

/* çalışmalar: öne çıkan markalar; üstüne gelince o markanın baskıları öne çıkar */
.ck-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    max-width: min(430px, 100%);
    margin-left: auto;
    pointer-events: auto
}

.ck-legend a,
.ck-legend button {
    padding: 9px 15px;
    border-radius: 99px;
    border: 1.5px solid rgba(255, 255, 255, .3);
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    transition: background .25s, color .25s, border-color .25s, transform .4s var(--spring)
}

/* marka düğmesi: bağlantı gibi görünür, tıklayınca markanın işlerini öne çıkarır */
.ck-legend button {
    font-family: inherit;
    line-height: inherit;
    background: none;
    cursor: pointer
}

.ck-legend a:hover,
.ck-legend a:focus-visible,
.ck-legend button:hover,
.ck-legend button:focus-visible,
.ck-legend button[aria-pressed="true"] {
    background: var(--y);
    border-color: var(--y);
    color: var(--k);
    transform: translateY(-2px)
}

@media (max-width:620px) {
    .ck {
        border-radius: 22px;
        min-height: 480px
    }

    .ck .ck-desk {
        inset: 3% 4% 20% 4%
    }

    .ck-all .ck-desk {
        inset: 3% 4% 34% 4%
    }

    .ck-legend {
        justify-content: flex-start;
        margin-left: 0
    }

    .ck-legend a,
    .ck-legend button {
        padding: 7px 12px;
        font-size: 13px
    }
}

@media (prefers-reduced-motion:reduce) {
    html:not(.force-motion) .ck-cap {
        transition: none
    }
}

/* eşit uzunluk: "Neler sunuyoruz" ve değer kartlarında bütün satırlar aynı yükseklikte */
.offers,
.values {
    grid-auto-rows: 1fr
}

/* 3//22 kartı: rakam alanı sabit yükseklikte; kart bu alana sığar, alttaki yazıyla çakışmaz */
.flaps {
    --fh: clamp(150px, 15.5vw, 210px);
    height: var(--fh);
    align-items: center
}

/* =====================================================================
   REVİZYON 4
   ===================================================================== */
/* yörünge: 5 uzman beşgen dizilimde (5 hizmet ↔ 5 uzmanlık) */
.orbit.o5 .node {
    translate: -50% -50%
}

.orbit.o5 .n1 {
    left: 50%;
    top: 0
}

.orbit.o5 .n2 {
    left: 97.55%;
    top: 34.55%
}

.orbit.o5 .n3 {
    left: 79.39%;
    top: 90.45%
}

.orbit.o5 .n4 {
    left: 20.61%;
    top: 90.45%
}

.orbit.o5 .n5 {
    left: 2.45%;
    top: 34.55%
}

/* hizmet kartları bağlantı değil; üzerine gelince kalkma efekti ve görünüm aynı kalır */
div.svc {
    cursor: default
}

/* müşteri sayfası içindekiler: sayı yok; her satırın başında sitedeki "/" işareti */
.cm-toc a {
    grid-template-columns: 10px 1fr;
    gap: 10px
}

.cm-toc a::before {
    content: "";
    width: 8px;
    height: 14px;
    margin-top: 2px;
    background: linear-gradient(to top left, transparent calc(50% - 1.2px), var(--yd) calc(50% - 1.2px), var(--yd) calc(50% + 1.2px), transparent calc(50% + 1.2px))
}

.cm-toc a span {
    color: var(--k);
    font-weight: 600
}

/* =====================================================================
   REVİZYON 5 — ana sayfa: 03 alıntı + beş uzmanlık, referans duvarı
   ===================================================================== */
/* 03: yörünge biraz yukarıda, altında alıntı */
.model-side {
    display: grid;
    justify-items: center;
    gap: clamp(30px, 4vw, 52px)
}

.model-side .orbit {
    margin-top: clamp(-30px, -2vw, 0px)
}

/* "5 // UZMANLIK": büyük ince rakam, logodaki çift çizgi, kalın yazı */
.tha5 {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.2vw, 18px);
    margin: 26px 0 22px
}

.tha5-n {
    font-family: var(--thin);
    font-weight: 200;
    font-size: clamp(92px, 9.4vw, 136px);
    line-height: .74;
    color: var(--y);
    display: inline-block;
    transform: translateY(.25em) scale(.7);
    opacity: 0;
    transition: transform 1s var(--spring), opacity .5s ease;
    transition-delay: .15s
}

.tha5-s {
    position: relative;
    flex: 0 0 auto;
    width: clamp(30px, 2.8vw, 40px);
    height: clamp(70px, 7vw, 100px);
    margin-right: clamp(2px, .4vw, 6px)
}

.tha5-s i {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 2px;
    transform: skewX(-18deg) scaleY(0);
    transform-origin: 50% 100%;
    transition: transform .7s var(--ease)
}

.tha5-s i:first-child {
    left: 22%;
    background: var(--y);
    transition-delay: .35s
}

.tha5-s i:last-child {
    left: 56%;
    top: -10%;
    bottom: 16%;
    background: #fff;
    transition-delay: .48s
}

.tha5-t {
    display: grid;
    gap: 9px
}

.tha5-t b {
    font-family: var(--bold);
    font-weight: 700;
    font-size: clamp(40px, 4.4vw, 64px);
    line-height: .86;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: .01em;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1s var(--ease) .5s
}

.tha5-t small {
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--y);
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity .6s ease .9s, transform .8s var(--ease) .9s
}

.tha5.in .tha5-n {
    transform: none;
    opacity: 1
}

.tha5.in .tha5-s i {
    transform: skewX(-18deg) scaleY(1)
}

.tha5.in .tha5-t b {
    clip-path: inset(0 -2% 0 0)
}

.tha5.in .tha5-t small {
    opacity: 1;
    transform: none
}

/* alıntı kartı */
.quote {
    position: relative;
    width: min(100%, 470px);
    margin: 0;
    padding: 28px 30px 24px 34px;
    border-radius: 24px;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(150deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .015));
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .7)
}

.quote::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--y);
    transform: scaleY(0);
    transition: transform 1s var(--ease) .2s
}

.quote::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 70%;
    aspect-ratio: 1;
    right: -28%;
    top: -45%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(237, 196, 26, .2), transparent 68%);
    animation: qGlow 9s ease-in-out infinite alternate;
    animation-play-state: paused
}

.quote.is-in::after {
    animation-play-state: running
}

@keyframes qGlow {
    to {
        transform: translate(-60%, 70%) scale(1.25)
    }
}

.quote-m {
    display: block;
    width: 46px;
    height: 35px;
    margin-bottom: 14px;
    fill: var(--y);
    transform: scale(.3) rotate(-14deg);
    transform-origin: 0 100%;
    opacity: 0;
    transition: transform .9s var(--spring) .15s, opacity .4s ease .15s
}

.quote blockquote {
    margin: 0
}

.quote blockquote p {
    font-family: var(--thin);
    font-weight: 300;
    font-size: clamp(25px, 2.35vw, 33px);
    line-height: 1.16;
    color: #fff;
    letter-spacing: .005em
}

.quote blockquote b {
    font-family: var(--bold);
    font-weight: 700;
    color: var(--y);
    text-transform: uppercase;
    letter-spacing: .01em
}

.quote blockquote span {
    display: inline-block;
    opacity: 0;
    transform: translateY(.55em);
    filter: blur(5px);
    transition: opacity .6s ease, transform .9s var(--spring), filter .6s ease;
    transition-delay: calc(.35s + var(--i) * 75ms)
}

.quote figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-top: 18px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
    opacity: 0;
    transition: opacity .8s ease 1.1s
}

.quote figcaption>i {
    width: 30px;
    height: 1.5px;
    background: var(--y);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .8s var(--ease) 1.15s
}

.quote figcaption .uy {
    letter-spacing: .06em
}

.quote figcaption>span {
    white-space: nowrap
}

.quote.in::before {
    transform: none
}

.quote.in .quote-m {
    transform: none;
    opacity: 1
}

.quote.in blockquote span {
    opacity: 1;
    transform: none;
    filter: none
}

.quote.in figcaption {
    opacity: 1
}

.quote.in figcaption>i {
    transform: none
}

@media (prefers-reduced-motion:reduce) {

    html:not(.force-motion) .tha5 *,
    html:not(.force-motion) .quote,
    html:not(.force-motion) .quote *,
    html:not(.force-motion) .quote::before {
        transition: none !important
    }

    html:not(.force-motion) .quote::after {
        animation: none
    }
}

/* 05: referanslar + öne çıkan çalışmalar tek blok; her yerde aynı aralık */
.ref-wall {
    --rg: 10px;
    display: grid;
    gap: var(--rg)
}

.ref-wall .refs {
    gap: var(--rg)
}

.ref-wall .works {
    gap: var(--rg)
}

.ref-wall .works-all {
    margin-top: clamp(28px, 4vw, 46px)
}

/* firma adı altta ortada; logo üstte soluk */
.refs li {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    min-height: 132px;
    padding: 12px 12px 14px
}

.refs li span {
    font-size: clamp(13px, 1.02vw, 15.5px);
    letter-spacing: .01em
}

.refs .rl {
    left: 16%;
    top: 11%;
    width: 68%;
    height: 52%;
    opacity: .32;
    filter: grayscale(1) contrast(1.1);
    mix-blend-mode: multiply
}

.refs li.flash .rl {
    opacity: .6
}

@media (max-width:620px) {
    .refs li {
        min-height: 118px
    }
}

/* =====================================================================
   REVİZYON 5 — çalışmalar / müşteri sayfaları
   ===================================================================== */
/* baş harfli renkli zemin kalır, logo üstünde beyaz plaka içinde */
.cw-mono.has-logo .cw-ini {
    position: absolute;
    right: -.04em;
    bottom: -.3em;
    font-size: 2.7em;
    line-height: 1;
    letter-spacing: -.01em;
    opacity: .95
}

.cw-mono.has-logo::after {
    z-index: 1
}

.cw-plate {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 58%;
    height: 54%;
    padding: 5% 6%;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 30px -16px rgba(0, 0, 0, .45), 0 0 0 1px rgba(55, 55, 54, .06);
    transition: transform .6s var(--spring)
}

.cw-plate img {
    position: absolute;
    left: 9%;
    top: 11%;
    width: 82%;
    height: 78%;
    object-fit: contain
}

.cw-card:hover .cw-plate {
    transform: translateY(-3px) scale(1.04)
}

.cm-top .cw-mono.has-logo {
    box-shadow: 0 24px 40px -30px rgba(55, 55, 54, .6)
}

.cm-top .cw-plate {
    width: 70%;
    height: 56%;
    border-radius: 16px
}

/* müşteri sayfası "Hizmetler": bağlantı değil; görünüm ve üzerine gelme efekti aynı */
.cm-facts .cw-tags span {
    font-size: 13px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 99px;
    background: var(--ys);
    cursor: default;
    transition: background .25s
}

.cm-facts .cw-tags span:hover {
    background: var(--y)
}

/* kayan kartlar: geçiş daha çevik */
.cm-track {
    transition-duration: .6s
}

/* büyütme penceresi: markanın sayfasına bağlantı */
.cm-lb figcaption a {
    margin-left: 14px;
    color: var(--y);
    font-weight: 700;
    white-space: nowrap
}

.cm-lb figcaption a:hover {
    text-decoration: underline
}

/* mobil menü: kapalıyken tamamen gizli (açılırken script önce görünür yapar) */
.mnav[hidden] {
    display: none
}

/* açık menüde iletişim satırı normal boyutta (büyük yazı yalnızca menü bağlantılarında) */
.mnav p a {
    font-family: var(--sans);
    font-size: 17px;
    font-weight: 700;
    text-transform: none;
    line-height: 1.5
}

/* açık menüde logo sarı zemin üstünde: sarı parçalar koyu olsun */
.hd.menu-open .logo {
    --ly: var(--k)
}

.hd.menu-open {
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none
}

/* büyütülmüş görsele tıklayınca kapanır */
.cm-lb img {
    cursor: zoom-out
}
/* =====================================================================
   AKILLI GÖRSEL YÜKLEME
   Görsel inene kadar yerinde kendisinin 32 px'lik bulanık hali (--lqip) durur;
   görsel inince üstüne yumuşakça belirir. Boyutu tarayıcı srcset'ten seçer.
   ===================================================================== */
.lz-w {
    isolation: isolate;
    background-color: #EFEADC
}

.lz-w::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--lqip, none) center / cover no-repeat;
    filter: blur(12px);
    transform: scale(1.08)
}

.lz-w.lz-ok::before {
    display: none
}

.ck-im {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 1px
}

.js img.lz {
    opacity: 0;
    transition: opacity .55s var(--ease), transform 1s var(--ease)
}

.js img.lz.is-in {
    opacity: 1
}

@media (prefers-reduced-motion: reduce) {
    html.js:not(.force-motion) img.lz {
        transition: none
    }
}


/* =====================================================================
   PATRON REVİZYONU (Ekim 2026)
   ===================================================================== */

/* kart zemini: tek çizgi yerine logodaki çift eğik çizgi "//" — logo.svg koordinatları ve kalınlığıyla birebir
   (sarı çizgi M120.2 15 → 76.9 129, ikinci çizgi M143.3 0 → 103 110.5, kalınlık 2.6) */
.cw-mono {
    --slash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='74 -2 72 134'%3E%3Cpath d='M120.2 15 76.9 129' stroke='%23FFFFFF' stroke-width='2.6'/%3E%3Cpath d='M143.3 0 103 110.5' stroke='%23373736' stroke-width='2.6'/%3E%3C/svg%3E")
}

.cw-mono.v1 {
    --slash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='74 -2 72 134'%3E%3Cpath d='M120.2 15 76.9 129' stroke='%23EDC41A' stroke-width='2.6'/%3E%3Cpath d='M143.3 0 103 110.5' stroke='%23FFFFFF' stroke-width='2.6'/%3E%3C/svg%3E")
}

.cw-mono.v2,
.cw-mono.v3 {
    --slash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='74 -2 72 134'%3E%3Cpath d='M120.2 15 76.9 129' stroke='%23EDC41A' stroke-width='2.6'/%3E%3Cpath d='M143.3 0 103 110.5' stroke='%23373736' stroke-width='2.6'/%3E%3C/svg%3E")
}

.cw-mono::after {
    top: -9%;
    right: 7%;
    width: auto;
    height: 118%;
    aspect-ratio: 72 / 134;
    background: var(--slash) no-repeat center / contain;
    opacity: .95;
    transform: none
}

/* "Tüm işler" görünümü: her iş, marka kartı gibi bir kart; üstte işin görseli */
.cw-wimg {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: 21px 21px 0 0;
    overflow: hidden
}

.cw-wimg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .55s var(--ease), transform .8s var(--ease)
}

.cw-wcard:hover .cw-wimg img {
    transform: scale(1.04)
}

.cw-wcard .cw-cb small {
    color: var(--k)
}

/* ana sayfa seçili çalışmalar: markanın işleri kartta video gibi akar (kontrol yok, tıklanınca marka sayfası) */
.wk-reel {
    background-color: #2b2b2a
}

.wk-reel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 1s var(--ease)
}

.wk-reel img.on {
    opacity: 1;
    animation: wkKen var(--reel, 2.6s) linear both
}

.js .wk-reel img.lz:not(.is-in) {
    opacity: 0
}

@keyframes wkKen {
    from {
        transform: scale(1.03) translate3d(0, 0, 0)
    }

    to {
        transform: scale(1.13) translate3d(var(--kx, -2%), var(--ky, -1.5%), 0)
    }
}

.wk-reel::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 38%;
    background: linear-gradient(to top, rgba(0, 0, 0, .28), transparent);
    pointer-events: none
}

@media (prefers-reduced-motion: reduce) {
    html:not(.force-motion) .wk-reel img.on {
        animation: none
    }
}

/* ilk kare akıllı yüklemeyle gelir; sırası geçince diğer kareler gibi kaybolur */
.js .wk-reel img.lz.is-in:not(.on) {
    opacity: 0
}

/* vitrin lejantı: kalan markalar için katalog bağlantısı */
.ck-legend .ck-more {
    border-style: dashed;
    color: var(--y)
}

/* sektör filtresi: masaüstünde tüm sektörler görünsün (satır sarar); telefonda yana kaydırılır */
@media (min-width: 900px) {
    .cw-chips {
        flex-wrap: wrap;
        overflow: visible
    }
}

/* referans duvarı 15 firma (portfolio.reference_limit): masaüstü 5×3, tablet 3×5;
   telefonda 2 sütun ve 14 firma (2×7): 15. kutu gizlenir, boşluk kalmaz.
   Firma sayısı tek ve 15'ten azsa son kutu tam satır olur */
.ref-wall .refs {
    grid-template-columns: repeat(5, 1fr)
}

@media (max-width:1020px) {
    .ref-wall .refs {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media (max-width:620px) {
    .ref-wall .refs {
        grid-template-columns: repeat(2, 1fr)
    }

    .ref-wall .refs li:last-child:nth-child(odd) {
        grid-column: 1 / -1
    }

    .ref-wall .refs li:nth-child(n+15) {
        display: none
    }
}

/* =====================================================================
   ÖYKÜMÜZ (/oykumuz) — ana sayfa bileşenleri + zaman çizgisi, sayaçlar
   ===================================================================== */
.st-hero .lead {
    margin-bottom: 16px
}

.st-hero .hero-cta {
    margin-top: 30px
}

/* zaman çizgisi: ekrana girince sarı çizgi soldan dolar */
.st-line {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: clamp(40px, 6vh, 64px);
    list-style: none
}

.st-line li {
    position: relative;
    padding-top: 30px;
    border-top: 2px solid var(--line)
}

.st-line li::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -2px;
    height: 2px;
    background: var(--y);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.1s var(--ease) calc(.25s + var(--d, 0) * .15s)
}

.st-line li::after {
    content: "";
    position: absolute;
    left: 0;
    top: -8px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--y);
    box-shadow: 0 0 0 4px var(--paper)
}

.st-line li.in::before {
    transform: none
}

.st-yr {
    font-family: var(--thin);
    font-weight: 200;
    font-size: clamp(46px, 4.6vw, 72px);
    line-height: .9;
    text-transform: uppercase
}

.st-yr b {
    font-family: var(--bold);
    font-weight: 700;
    color: var(--yd)
}

.st-line h3 {
    font-family: var(--bold);
    font-weight: 700;
    font-size: 21px;
    line-height: 1.1;
    text-transform: uppercase;
    margin: 16px 0 8px
}

.st-line h3 .uy {
    text-transform: none
}

.st-line li>p:last-child {
    color: var(--muted);
    font-size: 16px
}

@media (max-width:960px) {
    .st-line {
        gap: 40px 18px
    }
}

@media (max-width:560px) {
    .st-line {
        grid-template-columns: 1fr;
        gap: 34px
    }
}

/* ekibimiz: metin + sayaçlar | alıntı */
.st-team {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(30px, 5vw, 90px);
    align-items: center
}

.st-team .quote {
    justify-self: end
}

/* sabit 3 sütun: sayaç sayarken genişlik değişse de hiçbir şey kaymaz (CLS yok), hepsi tek sırada */
.st-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 2vw, 32px);
    max-width: 600px;
    margin-top: 36px
}

.st-stats b {
    display: block;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-family: var(--thin);
    font-weight: 200;
    font-size: clamp(56px, 6vw, 92px);
    line-height: .9;
    color: var(--y)
}

.st-stats small {
    display: block;
    margin-top: 8px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62)
}

@media (max-width:900px) {
    .st-team {
        grid-template-columns: 1fr
    }

    .st-team .quote {
        justify-self: start
    }
}

/* sıradaki öykü: ortalı çağrı */
.st-cta {
    text-align: center
}

.st-cta .lead {
    margin: 22px auto 30px
}

.st-cta .hero-cta {
    justify-content: center
}

/* ---------- Öykümüz: başlık solda sabit, metin kaydırdıkça koyulaşır ---------- */
.st-story-in {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: clamp(30px, 6vw, 110px);
    align-items: start
}

.st-story-hd {
    position: sticky;
    top: 120px
}

.st-story-hd .t-xl b {
    color: var(--k)
}

/* dönen mühür: logodaki // ortada */
.st-seal {
    position: relative;
    width: 132px;
    aspect-ratio: 1;
    margin-top: clamp(28px, 5vh, 46px)
}

.st-seal-t {
    width: 100%;
    height: 100%;
    overflow: visible;
    animation: stSpin 24s linear infinite
}

.st-seal-t text {
    fill: var(--k);
    font: 700 10.5px var(--sans);
    letter-spacing: .18em
}

.st-seal-m {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30px;
    height: 38px;
    transform: translate(-50%, -50%)
}

@keyframes stSpin {
    to {
        transform: rotate(360deg)
    }
}

.st-big {
    font-size: clamp(21px, 2.05vw, 30px);
    line-height: 1.45;
    font-weight: 500;
    letter-spacing: -.005em;
    color: var(--k)
}

/* kelime kelime koyulaşma (JS kelimeleri sarar; JS yoksa metin tam koyu) */
.st-big.wd-on .wd {
    color: rgba(55, 55, 54, .2);
    transition: color .35s ease
}

.st-big.wd-on .wd.on {
    color: var(--k)
}

/* vurgu: altını sarı çizgi doldurur */
.st-big mark {
    color: inherit;
    background: linear-gradient(var(--y), var(--y)) no-repeat 0 90% / 100% .34em;
    padding: 0 .05em;
    transition: background-size 1s var(--ease)
}

.st-big.wd-on mark {
    background-size: 0 .34em
}

.st-big.wd-on mark.on {
    background-size: 100% .34em
}

/* ikinci cümle: üç fiil satırı */
.st-verbs {
    margin-top: clamp(40px, 6vh, 64px)
}

.st-verbs>p {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 14px
}

.st-verbs ol {
    list-style: none;
    border-bottom: 1px solid var(--line)
}

.st-verbs li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 0;
    border-top: 1px solid var(--line);
    font-family: var(--bold);
    font-weight: 700;
    font-size: clamp(21px, 2.2vw, 32px);
    line-height: 1.08;
    text-transform: uppercase
}

.st-verbs li::before {
    content: "";
    flex: none;
    width: 20px;
    height: 26px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 34'%3E%3Cpath d='M12.5 3 2.5 33' stroke='%23EDC41A' stroke-width='2.8'/%3E%3Cpath d='M23.5 1 13.5 31' stroke='%23373736' stroke-width='2.8'/%3E%3C/svg%3E") center/contain no-repeat;
    transition: transform .6s var(--spring)
}

.st-verbs li span {
    transition: transform .6s var(--spring)
}

.st-verbs li:hover::before {
    transform: rotate(-12deg) scale(1.15)
}

.st-verbs li:hover span {
    transform: translateX(6px)
}

@media (max-width:900px) {
    .st-story-in {
        grid-template-columns: 1fr
    }

    .st-story-hd {
        position: relative;
        top: auto
    }

    .st-seal {
        position: absolute;
        right: 0;
        top: 0;
        width: 96px;
        margin: 0
    }
}

/* ---------- Yaratıcı · Sosyal · Dinamik: üst üste dizilen kartlar ---------- */
.st-stack {
    display: grid;
    gap: 24px
}

/* son kart üstte bir süre dursun: yapışkan kartların alanı içerik kutusudur, bu yüzden dolgu değil boş öğe */
.st-stack::after {
    content: "";
    height: 14vh
}

.st-card {
    position: sticky;
    top: calc(104px + var(--i, 0) * 22px);
    display: grid;
    grid-template-columns: 5fr 7fr;
    align-items: center;
    gap: clamp(24px, 4vw, 70px);
    min-height: 440px;
    padding: clamp(28px, 4vw, 56px);
    border-radius: 28px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 40px 80px -50px rgba(55, 55, 54, .45);
    transform-origin: 50% 0;
    transform: scale(calc(1 - var(--sk, 0) * .05));
    filter: brightness(calc(1 - var(--sk, 0) * .08))
}

.st-card.c-y {
    background: var(--y);
    border-color: transparent
}

.st-card.c-k {
    background: var(--k);
    border-color: transparent;
    color: #fff
}

.st-card-hd {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(26px, 4vh, 44px)
}

.st-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px
}

.st-no {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em
}

.st-card .ic {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: var(--y);
    display: grid;
    place-items: center
}

.st-card .ic svg {
    width: 28px;
    height: 28px;
    stroke: var(--k);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round
}

.st-card.c-y .ic {
    background: var(--k)
}

.st-card.c-y .ic svg {
    stroke: var(--y)
}

.st-word {
    font-family: var(--thin);
    font-weight: 200;
    font-size: clamp(56px, 7.4vw, 118px);
    line-height: .88;
    text-transform: uppercase;
    letter-spacing: .005em
}

.st-card.c-k .st-word {
    color: var(--y)
}

.st-card-bd {
    align-self: center
}

/* alttaki kart üstüne gelirken üstteki kartın içeriği söner: üstte yalnızca temiz renk şeridi kalır */
.st-card>* {
    opacity: calc(1 - var(--sk, 0) * 1.4)
}

.st-first {
    font-size: clamp(19px, 1.6vw, 24px);
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 18px
}

.st-card-bd p+p {
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--muted)
}

.st-card.c-y .st-card-bd p+p {
    color: rgba(55, 55, 54, .84)
}

.st-card.c-k .st-card-bd p+p {
    color: rgba(255, 255, 255, .72)
}

/* telefonda ve alçak ekranda kartlar alt alta (sabitleme yok) */
@media (max-width:900px),
(max-height:720px) {
    .st-stack::after {
        display: none
    }

    .st-card {
        position: relative;
        top: auto;
        transform: none;
        filter: none
    }
}

@media (max-width:900px) {
    .st-card {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 26px 24px 30px;
        border-radius: 24px
    }

    .st-card-hd {
        gap: 22px
    }

    .st-word {
        font-size: clamp(52px, 15vw, 80px)
    }
}

/* ---------- telefon düzeltmeleri ---------- */
@media (max-width:960px) {

    /* giriş: sarı şerit yalnızca panonun arkasında, metnin altına girmez */
    .st-hero::before,
    .cmd-hero::before,
    .cnt-hero::before,
    .blg-hero::before {
        top: auto;
        bottom: -4%;
        height: 50%;
        right: -46vw
    }
}

@media (max-width:560px) {

    /* zaman çizgisi dikey */
    .st-line {
        gap: 0
    }

    .st-line li {
        border-top: 0;
        border-left: 2px solid var(--line);
        padding: 0 0 34px 26px
    }

    .st-line li:last-child {
        padding-bottom: 0
    }

    .st-line li::before {
        left: -2px;
        right: auto;
        top: 0;
        bottom: 0;
        width: 2px;
        height: auto;
        transform: scaleY(0);
        transform-origin: top
    }

    .st-line li::after {
        left: -8px;
        top: 6px
    }

    .st-line h3 {
        margin-top: 10px
    }

    /* sayaçlar: telefonda daha küçük */
    .st-stats b {
        font-size: 46px
    }

    .st-stats small {
        font-size: 10.5px;
        letter-spacing: .08em
    }
}

@media (prefers-reduced-motion: reduce) {
    html:not(.force-motion) .st-seal-t {
        animation: none
    }
}

/* =====================================================================
   ÇALIŞMA MODELİMİZ (/tam-hizmet-reklam-ajansi)
   Ana sayfa bileşenleri (yörünge, 5 uzmanlık, alıntı, hizmet çizimleri) + bu sayfaya özel
   sabit hizmet sahnesi ve kaydırdıkça dolan süreç çizgisi (script.js → data-svc, data-flow)
   ===================================================================== */
.cmd-hero .lead {
    margin-bottom: 30px
}

/* giriş: yörünge koyu panelde (Öykümüz'deki 0322 panosuyla aynı dil) */
.cmd-orb {
    background: var(--k);
    color: #fff;
    border-radius: 28px;
    padding: clamp(22px, 3vw, 36px) clamp(22px, 3vw, 36px) clamp(34px, 4vw, 56px);
    box-shadow: 0 40px 80px -40px rgba(55, 55, 54, .7)
}

.cmd-orb-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
    margin-bottom: clamp(30px, 4vw, 48px)
}

.cmd-orb-top b {
    color: var(--y)
}

.cmd-orb .orbit {
    width: calc(100% - 120px);
    max-width: 380px
}

/* 01 model */
.cmd-model {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(30px, 5vw, 90px);
    align-items: center
}

.cmd-model .quote {
    justify-self: end
}

/* 02 hizmetler: solda sabit sahne, sağda kayan hizmetler */
.cmd-svc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(30px, 5vw, 90px);
    align-items: start
}

.cmd-stage {
    position: sticky;
    top: 110px
}

.cmd-stage-in {
    position: relative;
    aspect-ratio: 16/10;
    border-radius: 28px;
    overflow: hidden;
    background: var(--y);
    box-shadow: 0 40px 80px -50px rgba(55, 55, 54, .5)
}

.cmd-art {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.08);
    transition: opacity .6s ease, transform 1s var(--ease)
}

.cmd-art.on {
    opacity: 1;
    transform: none
}

.cmd-art .svc-art {
    position: absolute;
    inset: 0;
    aspect-ratio: auto
}

.cmd-count {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 22px
}

.cmd-count b {
    font-family: var(--thin);
    font-weight: 200;
    font-size: clamp(54px, 5vw, 76px);
    line-height: .9;
    font-variant-numeric: tabular-nums
}

.cmd-count span {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--muted)
}

.cmd-dots {
    display: flex;
    gap: 8px;
    margin-top: 16px
}

.cmd-dots i {
    width: 8px;
    height: 8px;
    border-radius: 99px;
    background: var(--line);
    transition: width .5s var(--ease), background .4s
}

.cmd-dots i.on {
    width: 30px;
    background: var(--y)
}

.cmd-list {
    list-style: none;
    padding-bottom: 14vh
}

.cmd-item {
    padding: clamp(44px, 10vh, 96px) 0;
    border-top: 1px solid var(--line);
    transition: opacity .5s ease
}

.cmd-item:first-child {
    padding-top: 0;
    border-top: 0
}

.cmd-no {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--muted)
}

.cmd-item h3 {
    font-family: var(--bold);
    font-weight: 700;
    font-size: clamp(34px, 3.6vw, 54px);
    line-height: .95;
    text-transform: uppercase;
    margin: 8px 0 22px
}

.cmd-item ul {
    display: grid;
    gap: 9px;
    font-size: 16.5px
}

.cmd-item ul li {
    display: flex;
    gap: 10px;
    align-items: flex-start
}

.cmd-item ul li::before {
    content: "";
    flex: none;
    width: 8px;
    height: 14px;
    margin-top: 5px;
    background: linear-gradient(to top left, transparent calc(50% - 1.2px), var(--yd) calc(50% - 1.2px), var(--yd) calc(50% + 1.2px), transparent calc(50% + 1.2px))
}

.cmd-item p:not(.cmd-no) {
    font-size: 17px;
    color: color-mix(in srgb, var(--k) 82%, transparent)
}

.cmd-item p+p:not(.cmd-no) {
    margin-top: 12px
}

.cmd-art-m {
    display: none
}

@media (min-width:901px) {

    /* ekranın ortasındaki hizmet tam, diğerleri soluk (yalnızca JS varken) */
    .js .cmd-item {
        opacity: .3
    }

    .js .cmd-item.on {
        opacity: 1
    }
}

/* 03 süreç: kaydırdıkça dolan çizgi; geçilen adımlar sarı çerçeve, son adım sarı */
.cmd-flow {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    list-style: none;
    padding-top: 34px
}

.cmd-flow::before,
.cmd-flow::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: rgba(255, 255, 255, .14)
}

.cmd-flow::after {
    background: var(--y);
    transform: scaleX(var(--p, 0));
    transform-origin: left
}

.cmd-flow li {
    position: relative;
    padding: 26px 24px 28px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .03);
    transition: background .5s ease, border-color .5s ease, transform .6s var(--spring), color .4s ease
}

.cmd-flow li::before {
    content: "";
    position: absolute;
    left: 24px;
    top: -41px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--k);
    border: 2px solid rgba(255, 255, 255, .3);
    transition: background .4s, border-color .4s, box-shadow .4s
}

.cmd-flow-n {
    display: block;
    font-family: var(--thin);
    font-weight: 200;
    font-size: clamp(54px, 5vw, 76px);
    line-height: .9;
    color: rgba(255, 255, 255, .3);
    transition: color .4s
}

.cmd-flow h3 {
    font-family: var(--bold);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.05;
    text-transform: uppercase;
    margin: 18px 0 8px
}

.cmd-flow p {
    font-size: 16px;
    color: rgba(255, 255, 255, .72);
    transition: color .4s
}

.cmd-flow li.on {
    border-color: rgba(237, 196, 26, .55)
}

.cmd-flow li.on::before {
    background: var(--y);
    border-color: var(--y);
    box-shadow: 0 0 0 6px rgba(237, 196, 26, .18)
}

.cmd-flow li.on .cmd-flow-n {
    color: var(--y)
}

.cmd-flow li.cur {
    background: var(--y);
    border-color: var(--y);
    color: var(--k);
    transform: translateY(-6px)
}

.cmd-flow li.cur .cmd-flow-n {
    color: var(--k)
}

.cmd-flow li.cur p {
    color: rgba(55, 55, 54, .85)
}

/* tablet ve telefon */
@media (max-width:1020px) {
    .cmd-flow {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 0 0 0 32px
    }

    .cmd-flow::before,
    .cmd-flow::after {
        left: 6px;
        right: auto;
        top: 0;
        bottom: 0;
        width: 2px;
        height: auto
    }

    .cmd-flow::after {
        transform: scaleY(var(--p, 0));
        transform-origin: top
    }

    .cmd-flow li::before {
        left: -33px;
        top: 30px
    }

    .cmd-flow li.cur {
        transform: none
    }
}

@media (max-width:900px) {

    .cmd-model,
    .cmd-svc {
        grid-template-columns: 1fr
    }

    .cmd-model .quote {
        justify-self: start
    }

    .cmd-stage {
        display: none
    }

    .cmd-list {
        padding-bottom: 0
    }

    .cmd-item {
        padding: 36px 0
    }

    .cmd-art-m {
        display: block;
        position: relative;
        border-radius: 22px;
        overflow: hidden;
        margin-bottom: 22px
    }
}

@media (max-width:560px) {
    .cmd-orb .orbit {
        width: min(260px, calc(100% - 80px))
    }

    .cmd-orb .m-hide {
        display: none
    }

    .cmd-orb .orbit .node {
        font-size: 12px;
        padding: 7px 11px;
        gap: 6px
    }

    .cmd-orb .orbit .core {
        inset: 32.5%
    }

    .cmd-orb .orbit .core b {
        font-size: 10.5px
    }

    .cmd-item h3 {
        font-size: 34px
    }
}

/* koyu yörünge panelinde "Yirmiiki" beyaz (panodaki gibi) */
.cmd-orb .uy {
    color: #fff;
    letter-spacing: .12em
}

/* Çalışma modelimiz 01: eski "Hizmetler" metni (Öykümüz'deki sabit başlık + kelime koyulaşması düzeni) */
.cmd-about .st-big {
    font-size: clamp(19px, 1.65vw, 25px)
}

.cmd-fee {
    margin: clamp(30px, 5vh, 46px) 0;
    padding: clamp(22px, 2.6vw, 30px) clamp(22px, 2.6vw, 32px);
    border-radius: 22px;
    background: var(--y);
    color: var(--k)
}

.cmd-fee-h {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    margin-bottom: 10px
}

.cmd-fee-h b {
    font-family: var(--bold);
    font-weight: 700;
    font-size: clamp(24px, 2.2vw, 32px);
    line-height: 1;
    text-transform: uppercase
}

.cmd-fee-h span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(55, 55, 54, .7)
}

.cmd-fee p:last-child {
    font-size: 17px;
    line-height: 1.6
}

.cmd-about .lead {
    max-width: none
}

/* hizmet maddesi: giriş metni → liste → "tek seferlik de çalışırız" notu */
.cmd-item p.cmd-lead {
    font-size: clamp(18px, 1.45vw, 21px);
    line-height: 1.5;
    font-weight: 500;
    color: var(--k);
    margin-bottom: 14px
}

.cmd-item p.cmd-txt {
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--muted);
    margin: 0 0 14px
}

.cmd-item p.cmd-txt+ul,
.cmd-item p.cmd-lead+ul {
    margin-top: 24px
}

.cmd-item p.cmd-note {
    margin-top: 24px;
    padding: 16px 18px;
    border-left: 3px solid var(--y);
    border-radius: 0 14px 14px 0;
    background: #fff;
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted)
}

/* =====================================================================
   İLETİŞİM (/iletisim) — ana sayfa bileşenleri (hero, sarı form bölümü, SSS)
   + koyu kanal kartı, soyut harita (tıklanınca Google Haritalar yüklenir), açık adres
   ===================================================================== */
.cnt-hero .lead {
    max-width: 27em;
    margin-bottom: 0
}

/* giriş: koyu kanal kartı */
.cnt-card {
    background: var(--k);
    color: #fff;
    border-radius: 28px;
    padding: clamp(22px, 3vw, 36px);
    box-shadow: 0 40px 80px -40px rgba(55, 55, 54, .7)
}

.cnt-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
    margin-bottom: clamp(18px, 2.4vw, 28px)
}

.cnt-card-top b {
    color: var(--y)
}

.cnt-card .uy {
    color: #fff;
    letter-spacing: .12em
}

.cnt-row {
    display: grid;
    grid-template-columns: 52px 1fr 28px;
    align-items: center;
    gap: 16px;
    padding: 18px 16px;
    margin: 0 -16px;
    border-radius: 18px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    transition: background .4s ease;
    /* sırayla gelir */
    animation: cntIn .9s var(--ease) both;
    animation-delay: calc(.35s + var(--d, 0) * .12s)
}

.cnt-row:first-of-type {
    border-top: 0
}

.cnt-row:hover {
    background: rgba(255, 255, 255, .06)
}

.cnt-row .ic {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--y);
    display: grid;
    place-items: center;
    transition: transform .6s var(--spring)
}

.cnt-row .ic svg {
    width: 22px;
    height: 22px;
    stroke: var(--k);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round
}

/* telefon simgesinin çevresinde hafif nabız */
.cnt-row:first-of-type .ic {
    box-shadow: 0 0 0 0 rgba(237, 196, 26, .5);
    animation: cntPulse 2.6s ease-out infinite 1.4s
}

.cnt-row:hover .ic {
    transform: rotate(-10deg) scale(1.06)
}

.cnt-row-t small {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    margin-bottom: 4px
}

.cnt-row-t b {
    display: block;
    font-family: var(--bold);
    font-weight: 700;
    font-size: clamp(22px, 2.1vw, 30px);
    line-height: 1.05;
    letter-spacing: .01em;
    overflow-wrap: anywhere
}

.cnt-row-t em {
    display: block;
    font-style: normal;
    font-size: 14.5px;
    color: rgba(255, 255, 255, .7);
    margin-top: 4px
}

.cnt-row .t3 {
    display: inline-block;
    padding: 0 .14em;
    border-radius: .18em;
    background: var(--y);
    color: var(--k)
}

.cnt-row-a svg {
    width: 22px;
    height: 22px;
    color: var(--y);
    transition: transform .5s var(--ease)
}

.cnt-row:hover .cnt-row-a svg {
    transform: translateX(5px)
}

@keyframes cntIn {
    from {
        opacity: 0;
        transform: translateY(18px)
    }
}

@keyframes cntPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(237, 196, 26, .5)
    }

    70%,
    100% {
        box-shadow: 0 0 0 16px rgba(237, 196, 26, 0)
    }
}

/* 01 teklif: koyu bölüm; solda başlık + üç adım, sağda beyaz form kartı */
.cnt-quote .w {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(30px, 5vw, 90px);
    align-items: start
}

@media (max-width:960px) {
    .cnt-quote .w {
        grid-template-columns: 1fr
    }
}

.cnt-steps {
    list-style: none;
    display: grid;
    gap: 0;
    margin-top: 34px;
    border-top: 1px solid rgba(255, 255, 255, .14)
}

.cnt-steps li {
    display: grid;
    grid-template-columns: 54px 1fr;
    align-items: baseline;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .14)
}

.cnt-steps b {
    font-family: var(--thin);
    font-weight: 200;
    font-size: 40px;
    line-height: .9;
    color: var(--y)
}

.cnt-steps strong {
    display: block;
    font-family: var(--bold);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.05;
    text-transform: uppercase
}

.cnt-steps span {
    color: rgba(255, 255, 255, .72)
}

.cnt-steps strong {
    color: #fff
}

/* 02 ofis: harita + adres */
.cnt-office {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: clamp(18px, 2.4vw, 30px);
    align-items: stretch
}

.cnt-map {
    position: relative;
    aspect-ratio: 16/11;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--paper)
}

.cnt-map-art,
.cnt-map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0
}

/* ofis işareti: haritada ofisin olduğu nokta. Çizimde ofis tam merkezde; "slice" ölçeklemede merkez
   her en/boy oranında kutunun ortasına düştüğü için işaret %50/%50'de durur (telefonda da kaymaz) */
.cnt-pin {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 0;
    height: 0
}

/* nokta + nabız halkası */
.cnt-pin>i {
    position: absolute;
    left: -9px;
    top: -9px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--y);
    box-shadow: 0 0 0 4px var(--k), 0 6px 14px rgba(0, 0, 0, .35)
}

.cnt-pin>i+i {
    background: transparent;
    box-shadow: none;
    border: 2px solid var(--k);
    animation: cntRing 2.4s ease-out infinite
}

/* "3 // 22" işareti: svg'deki (30,120) noktası (sarı çizginin ucu) tam ofisin üstüne denk gelir */
.cnt-pin3 {
    position: absolute;
    left: -30px;
    top: -120px;
    width: 160px;
    max-width: none;
    height: 130px;
    overflow: visible;
    filter: drop-shadow(0 14px 16px rgba(55, 55, 54, .32))
}

.cnt-pin3-card {
    fill: var(--k)
}

.cnt-pin3 text {
    font-family: var(--bold);
    font-weight: 700;
    font-size: 40px;
    text-anchor: middle;
    dominant-baseline: central;
    fill: var(--y)
}

.cnt-pin3 text.w {
    fill: #fff
}

.cnt-pin3 .cs {
    fill: none;
    stroke-width: 4
}

.cnt-pin3 .cs-y {
    stroke: var(--y)
}

.cnt-pin3 .cs-d {
    stroke: var(--k)
}

.cnt-pin3 .cs-w {
    stroke: #fff
}

/* noktanın altında ad: "Üç Yirmiiki · Buradayız" */
.cnt-pin-tag {
    position: absolute;
    left: 0;
    top: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 7px 6px 13px;
    border-radius: 99px;
    background: #fff;
    box-shadow: 0 14px 26px -14px rgba(55, 55, 54, .55), 0 0 0 1px rgba(55, 55, 54, .07);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translateX(-50%)
}

.cnt-pin-tag b {
    padding: 3px 9px;
    border-radius: 99px;
    background: var(--y);
    color: var(--k)
}

/* harita ekrana gelince: kart yukarıdan iner, // kalem gibi aşağı çizilip noktaya saplanır, sonra ad belirir */
.cnt-map.in .cnt-pin3 {
    animation: cntPinIn .8s var(--spring) .4s both
}

.cnt-map.in .cnt-pin3 .cs {
    stroke-dasharray: 1;
    animation: cntDraw .7s var(--ease) 1s both
}

.cnt-map.in .cnt-pin-tag {
    animation: cntTag .5s ease 1.55s both
}

@keyframes cntPinIn {
    from {
        opacity: 0;
        transform: translateY(-26px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes cntDraw {
    from {
        stroke-dashoffset: 1
    }

    to {
        stroke-dashoffset: 0
    }
}

@keyframes cntTag {
    from {
        opacity: 0;
        transform: translate(-50%, 6px)
    }

    to {
        opacity: 1;
        transform: translateX(-50%)
    }
}

@keyframes cntRing {
    from {
        transform: scale(1);
        opacity: .9
    }

    to {
        transform: scale(3.2);
        opacity: 0
    }
}

.cnt-map-btn {
    position: absolute;
    left: 20px;
    bottom: 20px;
    height: 48px;
    padding: 0 20px;
    font-size: 15px
}

.cnt-map-btn svg {
    stroke: var(--y);
    fill: none;
    stroke-width: 2
}

/* harita yüklenince yer tutucu ve düğme gizlenir (ölçü aynı kalır: kayma yok) */
.cnt-map.on .cnt-map-art,
.cnt-map.on .cnt-pin,
.cnt-map.on .cnt-map-btn {
    display: none
}

.cnt-addr {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 26px;
    padding: clamp(24px, 3vw, 38px);
    border-radius: 28px;
    background: #fff;
    border: 1px solid var(--line);
    font-style: normal
}

.cnt-addr dl {
    display: grid;
    gap: 0
}

.cnt-addr dl>div {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid var(--line)
}

.cnt-addr dl>div:first-child {
    border-top: 0;
    padding-top: 0
}

.cnt-addr dt {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    padding-top: 3px
}

.cnt-addr dd {
    font-weight: 600;
    line-height: 1.5
}

.cnt-addr dd a:hover {
    color: var(--yd)
}

.cnt-addr .t3 {
    display: inline-block;
    padding: 0 .16em;
    border-radius: .2em;
    background: var(--k);
    color: var(--y)
}

.cnt-addr-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

@media (max-width:960px) {
    .cnt-office {
        grid-template-columns: 1fr
    }
}

@media (max-width:560px) {
    .cnt-row {
        grid-template-columns: 44px 1fr 22px;
        gap: 12px
    }

    .cnt-row .ic {
        width: 44px;
        height: 44px
    }

    .cnt-map {
        aspect-ratio: 4/5
    }

    .cnt-addr dl>div {
        grid-template-columns: 1fr;
        gap: 4px
    }

    .cnt-addr-cta .btn {
        flex: 1 1 100%;
        justify-content: center
    }
}

@media (prefers-reduced-motion: reduce) {

    html:not(.force-motion) .cnt-row,
    html:not(.force-motion) .cnt-row:first-of-type .ic,
    html:not(.force-motion) .cnt-pin>i+i,
    html:not(.force-motion) .cnt-map.in .cnt-pin3,
    html:not(.force-motion) .cnt-map.in .cnt-pin3 .cs,
    html:not(.force-motion) .cnt-map.in .cnt-pin-tag {
        animation: none
    }
}

/* iletişim girişi: başlık iki satır ve metin uzun; sarı şerit biraz sağda başlar ki metin ve düğmeler kâğıt zeminde kalsın */
@media (min-width:961px) {
    .cnt-hero::before {
        right: -32vw
    }
}

@media (min-width:961px) and (max-width:1199px) {
    .cnt-hero::before {
        right: -40vw
    }
}

/* koyu teklif bölümünde beyaz form kartının yazıları antrasit kalır */
.cnt-quote .form {
    color: var(--k)
}

/* =====================================================================
   BLOG (/blog, /blog/{slug}) — aynı site, kendi editoryal dili:
   kapaklar "arşiv baskısı" (beyaz çerçeve, hafif eğik; portfolyodaki baskılarla aynı aile),
   seri bölümleri büyük ince Roma rakamları, okuma listesinde imleci izleyen kapak,
   yazıda okuma çubuğu, yapışkan içindekiler, "Kısaca" özeti.
   ===================================================================== */
.blg-hero .lead {
    max-width: 27em;
    margin-bottom: 26px
}

.blg-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted)
}

.blg-stats b {
    font-family: var(--thin);
    font-weight: 200;
    font-size: 44px;
    letter-spacing: 0;
    color: var(--k);
    margin-right: 6px;
    vertical-align: -6px
}

@media (min-width:961px) {
    .blg-hero::before {
        right: -30vw
    }
}

/* giriş: öne çıkan kart yok; bölüm kısa, sağda sarı şeridin üstünde iki büyük sayaç */
.blg-hero {
    padding: clamp(104px, 13vh, 132px) 0 clamp(34px, 5vh, 56px)
}

.blg-hero .lead {
    margin-bottom: 0
}

.blg-hero .blg-stats {
    justify-self: end;
    display: grid;
    gap: clamp(12px, 2.4vh, 24px);
    color: var(--k)
}

.blg-hero .blg-stats span {
    display: flex;
    align-items: baseline;
    gap: 14px
}

.blg-hero .blg-stats b {
    min-width: 2ch;
    margin: 0;
    font-size: clamp(64px, 7vw, 112px);
    line-height: .8;
    text-align: right;
    vertical-align: 0
}

@media (max-width:960px) {
    .blg-hero .blg-stats {
        justify-self: start;
        display: flex;
        gap: 10px 28px
    }

    .blg-hero .blg-stats b {
        min-width: 0;
        font-size: 44px
    }
}

/* seri kartı: okuma süresi yok, "Oku →" sağda */
.blg-ch .blg-ch-f {
    justify-content: flex-end
}

/* arşiv baskısı: beyaz çerçeve + gölge, hafif eğik; üstüne gelince düzleşir */
.blg-print {
    display: block;
    padding: 10px 10px 26px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 30px 50px -28px rgba(0, 0, 0, .55);
    transform: rotate(-2.4deg);
    transition: transform .8s var(--spring)
}

.blg-print img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    border-radius: 2px;
    background: var(--paper)
}

/* öne çıkan yazı: koyu kart */
.blg-feat {
    position: relative;
    display: grid;
    gap: 16px;
    padding: clamp(22px, 3vw, 34px);
    border-radius: 28px;
    background: var(--k);
    color: #fff;
    box-shadow: 0 40px 80px -40px rgba(55, 55, 54, .7);
    transition: transform .6s var(--spring)
}

.blg-feat:hover {
    transform: translateY(-6px)
}

.blg-feat:hover .blg-print {
    transform: rotate(0) scale(1.02)
}

.blg-feat-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6)
}

.blg-feat-top b {
    color: var(--y)
}

.blg-feat .blg-print {
    margin: 6px 4px 8px
}

.blg-feat-t {
    font-family: var(--bold);
    font-weight: 700;
    font-size: clamp(34px, 3.4vw, 50px);
    line-height: .95;
    text-transform: uppercase
}

.blg-feat-s {
    color: rgba(255, 255, 255, .72);
    font-size: 16px
}

.blg-feat-f,
.blg-ch-f,
.blg-row-f {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase
}

.blg-feat-f>span:first-child,
.blg-ch-f>span:first-child {
    color: rgba(255, 255, 255, .55)
}

.blg-go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--y)
}

.blg-go svg {
    width: 22px;
    height: 22px;
    transition: transform .5s var(--ease)
}

a:hover .blg-go svg {
    transform: translateX(6px)
}

/* seri: koyu bölüm, bölüm kartları */
.blg-motto {
    font-family: var(--thin);
    font-weight: 300;
    font-size: clamp(24px, 2.2vw, 32px);
    line-height: 1.15;
    color: var(--y);
    margin-bottom: 14px
}

.blg-chapters {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px
}

.blg-ch {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    min-height: 360px;
    padding: 28px 26px 26px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .03);
    overflow: hidden;
    isolation: isolate;
    transition: border-color .5s, background .5s, transform .6s var(--spring)
}

.blg-ch:hover {
    transform: translateY(-6px);
    border-color: rgba(237, 196, 26, .6);
    background: rgba(255, 255, 255, .06)
}

/* büyük ince Roma rakamı */
.blg-ch-no {
    font-family: var(--thin);
    font-weight: 200;
    font-size: clamp(90px, 8vw, 130px);
    line-height: .8;
    color: var(--y);
    letter-spacing: -.02em
}

.blg-ch-k {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55)
}

.blg-ch-t {
    font-family: var(--bold);
    font-weight: 700;
    font-size: clamp(26px, 2.2vw, 34px);
    line-height: 1;
    text-transform: uppercase;
    color: #fff
}

.blg-ch-s {
    color: rgba(255, 255, 255, .68);
    font-size: 15.5px;
    line-height: 1.55
}

.blg-ch-f {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .12)
}

/* kapak kartın köşesinden baskı gibi çıkar */
.blg-ch-img {
    position: absolute;
    z-index: -1;
    right: -18px;
    top: 22px;
    width: 46%;
    padding: 6px 6px 16px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .7);
    transform: rotate(8deg) translate(40%, -10%);
    opacity: 0;
    transition: transform .8s var(--spring), opacity .4s ease
}

.blg-ch-img img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover
}

.blg-ch:hover .blg-ch-img {
    opacity: 1;
    transform: rotate(5deg) translate(0, 0)
}

@media (max-width:960px) {
    .blg-chapters {
        grid-template-columns: 1fr
    }

    .blg-ch {
        min-height: 0
    }

    .blg-ch-img {
        display: none
    }
}

/* okuma listesi */
.blg-list {
    list-style: none;
    border-top: 1px solid var(--line)
}

.blg-row {
    position: relative;
    display: grid;
    grid-template-columns: 70px 1fr auto;
    gap: clamp(14px, 2.4vw, 36px);
    align-items: center;
    padding: clamp(24px, 3vw, 34px) 0;
    border-bottom: 1px solid var(--line);
    transition: padding .5s var(--ease)
}

.blg-row::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: -1px;
    z-index: -1;
    background: #fff;
    border-radius: 18px;
    opacity: 0;
    transition: opacity .4s ease
}

.blg-row:hover {
    padding-left: 18px;
    padding-right: 18px
}

.blg-row:hover::before {
    opacity: 1
}

.blg-row-no {
    font-family: var(--thin);
    font-weight: 200;
    font-size: 46px;
    line-height: .9;
    color: var(--muted);
    transition: color .4s
}

.blg-row:hover .blg-row-no {
    color: var(--yd)
}

.blg-row-m {
    display: grid;
    gap: 6px
}

.blg-row-k {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--yd)
}

.blg-row-t {
    font-family: var(--bold);
    font-weight: 700;
    font-size: clamp(26px, 2.8vw, 42px);
    line-height: 1;
    text-transform: uppercase
}

.blg-row-s {
    color: var(--muted);
    font-size: 15.5px;
    max-width: 52em
}

.blg-row-f {
    color: var(--muted)
}

.blg-row-f .blg-go {
    color: var(--k)
}

.blg-row-img {
    display: none
}

/* imleci izleyen kapak (yalnızca fareyle, masaüstünde) */
.blg-peek {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 30;
    width: 260px;
    padding: 8px 8px 20px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 30px 60px -24px rgba(55, 55, 54, .55);
    pointer-events: none;
    opacity: 0;
    transform: translate3d(var(--x, 0), var(--y, 0), 0) rotate(var(--r, -4deg)) scale(.8);
    transition: opacity .3s ease, transform .5s var(--spring)
}

.blg-peek.on {
    opacity: 1;
    transform: translate3d(var(--x, 0), var(--y, 0), 0) rotate(var(--r, -4deg)) scale(1)
}

.blg-peek img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    background: var(--paper)
}

@media (hover: none),
(max-width:900px) {
    .blg-peek {
        display: none
    }
}

@media (max-width:700px) {
    .blg-row {
        grid-template-columns: 1fr 96px;
        gap: 14px 16px
    }

    .blg-row-no {
        display: none
    }

    .blg-row-f {
        grid-column: 1;
        justify-content: flex-start;
        gap: 18px
    }

    .blg-row-img {
        display: block;
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: start;
        padding: 4px 4px 12px;
        background: #fff;
        border-radius: 4px;
        box-shadow: 0 14px 24px -14px rgba(55, 55, 54, .5);
        transform: rotate(3deg)
    }

    .blg-row-img img {
        width: 100%;
        aspect-ratio: 1;
        object-fit: cover
    }

    .blg-row:hover {
        padding-left: 0;
        padding-right: 0
    }
}

/* ---------- yazı sayfası ---------- */
.blg-read {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 120;
    height: 3px;
    pointer-events: none
}

.blg-read i {
    display: block;
    height: 100%;
    background: var(--y);
    transform: scaleX(var(--rp, 0));
    transform-origin: left
}

.blg-head {
    padding: clamp(120px, 16vh, 160px) 0 clamp(30px, 5vh, 50px);
    background:
        linear-gradient(115deg, transparent 0 62%, var(--y) 62% 100%) right top / 100% 100% no-repeat;
}

.blg-head .w {
    max-width: 1040px
}

.blg-crumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 26px
}

.blg-crumb a:hover {
    color: var(--k)
}

.blg-title {
    font-family: var(--bold);
    font-weight: 700;
    font-size: clamp(46px, 6.4vw, 100px);
    line-height: .92;
    text-transform: uppercase;
    max-width: 12em;
    animation: up 1s var(--ease) both
}

.blg-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin-top: 26px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted)
}

.blg-meta>*:not(:last-child)::after {
    content: "/";
    margin-left: 22px;
    color: var(--yd)
}

.blg-wrap {
    display: grid;
    grid-template-columns: 200px minmax(0, 720px);
    justify-content: center;
    gap: clamp(30px, 5vw, 80px);
    padding-bottom: clamp(50px, 8vh, 90px)
}

.blg-side {
    position: sticky;
    top: 110px;
    align-self: start;
    display: grid;
    gap: 30px;
    padding-top: 6px
}

.blg-side p {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 12px
}

.blg-toc ol {
    list-style: none;
    display: grid;
    gap: 10px;
    border-left: 2px solid var(--line);
    padding-left: 14px
}

.blg-toc li.l3 {
    padding-left: 12px
}

.blg-toc a {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--muted)
}

.blg-toc a:hover,
.blg-toc a.on {
    color: var(--k)
}

.blg-share div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.blg-share a,
.blg-share button {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid var(--line);
    cursor: pointer;
    transition: background .3s, transform .5s var(--spring)
}

.blg-share a:hover,
.blg-share button:hover {
    background: var(--y);
    transform: translateY(-3px)
}

.blg-share svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--k);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round
}

.blg-share button span {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    translate: -50% 0;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--k);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .3s
}

.blg-share button.ok span {
    opacity: 1
}

.blg-tldr {
    display: grid;
    gap: 6px;
    padding: 20px 24px;
    margin-bottom: 34px;
    border-radius: 0 18px 18px 0;
    border-left: 4px solid var(--y);
    background: #fff
}

.blg-tldr b {
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--yd)
}

.blg-tldr p {
    font-size: 17.5px;
    line-height: 1.55;
    font-weight: 500
}

.blg-cover {
    margin: 0 0 46px
}

.blg-cover .blg-print {
    transform: rotate(-1.2deg)
}

.blg-cover.in .blg-print {
    transform: rotate(0)
}

.blg-cover .blg-print img {
    aspect-ratio: auto;
    max-height: 520px
}

.blg-cover figcaption {
    margin-top: 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted)
}

/* yazı tipografisi: rahat satır uzunluğu, ilk harf büyük */
.blg-body {
    font-size: clamp(17.5px, 1.25vw, 19.5px);
    line-height: 1.8;
    color: color-mix(in srgb, var(--k) 92%, transparent)
}

.blg-body>*+* {
    margin-top: 1.15em
}

.blg-body p:first-child em:only-child {
    display: inline-block;
    font-family: var(--thin);
    font-weight: 300;
    font-size: 1.5em;
    line-height: 1.2;
    font-style: normal;
    color: var(--yd)
}

.blg-body>p:first-of-type:not(:has(em:only-child))::first-letter,
.blg-body>p:first-child:has(em:only-child)+p::first-letter {
    float: left;
    font-family: var(--bold);
    font-weight: 700;
    font-size: 4.2em;
    line-height: .82;
    padding: .06em .12em 0 0;
    color: var(--k);
    text-transform: uppercase
}

.blg-body h2,
.blg-body h3 {
    font-family: var(--bold);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.05;
    margin-top: 1.8em;
    scroll-margin-top: 110px
}

.blg-body h2 {
    font-size: clamp(28px, 2.4vw, 36px)
}

.blg-body h3 {
    font-size: clamp(22px, 1.8vw, 27px)
}

.blg-body h2::before {
    content: "";
    display: block;
    width: 18px;
    height: 24px;
    margin-bottom: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 34'%3E%3Cpath d='M12.5 3 2.5 33' stroke='%23EDC41A' stroke-width='2.8'/%3E%3Cpath d='M23.5 1 13.5 31' stroke='%23373736' stroke-width='2.8'/%3E%3C/svg%3E") center/contain no-repeat
}

.blg-body a {
    text-decoration: underline;
    text-decoration-color: var(--y);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px
}

.blg-body ul,
.blg-body ol {
    padding-left: 1.2em
}

.blg-body li+li {
    margin-top: .4em
}

.blg-body li::marker {
    color: var(--yd)
}

.blg-body blockquote {
    padding: 4px 0 4px 22px;
    border-left: 4px solid var(--y);
    font-family: var(--thin);
    font-size: 1.4em;
    line-height: 1.3
}

.blg-body>p:last-child em:only-child {
    display: block;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-size: 15px;
    color: var(--muted)
}

.blg-sign {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 20px;
    margin-top: 50px;
    padding: 24px 26px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid var(--line)
}

.blg-sign-m {
    width: 22px;
    height: 30px;
    flex: none
}

.blg-sign p {
    flex: 1 1 260px;
    font-size: 15.5px;
    color: var(--muted)
}

.blg-sign p b {
    color: var(--k)
}

/* önceki / sonraki */
.blg-pn {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    padding-bottom: clamp(50px, 8vh, 90px)
}

.blg-pn-a {
    display: grid;
    gap: 6px;
    padding: 24px 26px;
    border-radius: 22px;
    border: 1px solid var(--line);
    background: #fff;
    transition: transform .5s var(--spring), border-color .4s
}

.blg-pn-a.next {
    text-align: right
}

.blg-pn-a:hover {
    transform: translateY(-4px);
    border-color: var(--y)
}

.blg-pn-a small {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--yd)
}

.blg-pn-a b {
    font-family: var(--bold);
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1;
    text-transform: uppercase
}

.blg-pn-a span {
    font-size: 14px;
    color: var(--muted)
}

.blg-all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--y)
}

.blg-all svg {
    width: 22px;
    height: 22px;
    transition: transform .5s var(--ease)
}

.blg-all:hover svg {
    transform: translateX(6px)
}

@media (max-width:960px) {
    .blg-head {
        background: linear-gradient(160deg, transparent 0 78%, var(--y) 78% 100%)
    }

    .blg-wrap {
        grid-template-columns: minmax(0, 1fr)
    }

    .blg-side {
        position: static;
        order: 2
    }

    .blg-toc {
        display: none
    }

    .blg-pn {
        grid-template-columns: 1fr
    }

    .blg-pn-a.next {
        text-align: left
    }
}

@media (prefers-reduced-motion: reduce) {

    html:not(.force-motion) .blg-print,
    html:not(.force-motion) .blg-peek,
    html:not(.force-motion) .blg-ch-img,
    html:not(.force-motion) .blg-title {
        transition: none;
        animation: none
    }
}

/* blog kapakları: width/height öznitelikleri yalnızca oran içindir; yükseklik orana göre */
.blg-print img,
.blg-ch-img img,
.blg-row-img img,
.blg-peek img {
    height: auto
}

/* =====================================================================
   ÇALIŞMALAR — "100+ // MARKA" sayacı (ana sayfadaki "5 // uzmanlık" ailesi, açık zemin)
   Sayı sabit genişlikte sayar: sayaç değişirken başlık satırı kaymaz.
   ===================================================================== */
.cw-count {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.2vw, 18px)
}

.cw-count-n {
    display: inline-flex;
    align-items: flex-start;
    font-family: var(--thin);
    font-weight: 200;
    font-size: clamp(76px, 7.4vw, 116px);
    line-height: .78;
    color: var(--k)
}

.cw-count-n b {
    display: inline-block;
    min-width: 3ch;
    font-weight: 200;
    text-align: right;
    font-variant-numeric: tabular-nums
}

.cw-count-n i {
    font-style: normal;
    font-size: .5em;
    line-height: 1;
    color: var(--yd);
    margin-left: 2px;
    transform: scale(0);
    transition: transform .6s var(--spring) .9s
}

.cw-count-s {
    position: relative;
    flex: none;
    width: clamp(28px, 2.6vw, 38px);
    height: clamp(64px, 6.4vw, 92px)
}

.cw-count-s i {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 2px;
    transform: skewX(-18deg) scaleY(0);
    transform-origin: 50% 100%;
    transition: transform .7s var(--ease)
}

.cw-count-s i:first-child {
    left: 22%;
    background: var(--y);
    transition-delay: .35s
}

.cw-count-s i:last-child {
    left: 56%;
    top: -10%;
    bottom: 16%;
    background: var(--k);
    transition-delay: .48s
}

.cw-count-t {
    display: grid;
    gap: 8px
}

.cw-count-t b {
    font-family: var(--bold);
    font-weight: 700;
    font-size: clamp(36px, 3.6vw, 54px);
    line-height: .86;
    text-transform: uppercase;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1s var(--ease) .55s
}

.cw-count-t small {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity .6s ease .95s, transform .8s var(--ease) .95s
}

.cw-count.in .cw-count-n i,
.cw-count.in .cw-count-t small {
    transform: none;
    opacity: 1
}

.cw-count.in .cw-count-s i {
    transform: skewX(-18deg) scaleY(1)
}

.cw-count.in .cw-count-t b {
    clip-path: inset(0 0 0 0)
}

/* JS yoksa ya da hareket azaltılmışsa her şey görünür */
html:not(.js) .cw-count-n i,
html:not(.js) .cw-count-t small {
    transform: none;
    opacity: 1
}

html:not(.js) .cw-count-s i {
    transform: skewX(-18deg) scaleY(1)
}

html:not(.js) .cw-count-t b {
    clip-path: none
}

@media (prefers-reduced-motion: reduce) {

    html:not(.force-motion) .cw-count-n i,
    html:not(.force-motion) .cw-count-s i,
    html:not(.force-motion) .cw-count-t b,
    html:not(.force-motion) .cw-count-t small {
        transition: none
    }
}

/* filtre düğmeleri ortada (sığmazsa telefonda yana kaydırılır, ilk düğme kesilmez) */
.cw-chips>:first-child {
    margin-left: auto
}

.cw-chips>:last-child {
    margin-right: auto
}

@media (min-width: 900px) {
    .cw-chips {
        justify-content: center
    }

    .cw-chips>:first-child,
    .cw-chips>:last-child {
        margin-left: 0;
        margin-right: 0
    }
}

/* =====================================================================
   ÇALIŞMALAR VİTRİNİ — düzenli masa: 8 tam hizmet markasının tüm işleri kartın tamamına
   aralıklı yayılır (yerleşim: script.js → initCollage { even }), başlık ve markalar
   üstte koyu geçişin üzerinde; markalar 4 sütun × 2 satır.
   ===================================================================== */
.ck-all .ck-desk {
    inset: 2.5% 2% 2.5% 2%
}

.ck-all .ck-info {
    background: linear-gradient(to top, rgba(20, 20, 19, .94), rgba(20, 20, 19, .72) 50%, transparent)
}

.ck-all .ck-legend {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    width: min(800px, 100%);
    max-width: none
}

.ck-all .ck-legend a,
.ck-all .ck-legend button {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: rgba(20, 20, 19, .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px)
}

@media (max-width:1100px) {
    .ck-all .ck-legend {
        width: 100%
    }
}

@media (max-width:620px) {
    .ck-all .ck-desk {
        inset: 3% 3% 40% 3%
    }

    .ck-all .ck-legend {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

/* telefonda marka adları kesilmesin: iki satıra inebilir */
@media (max-width:620px) {
    .ck-all .ck-legend a,
    .ck-all .ck-legend button {
        white-space: normal;
        line-height: 1.15;
        padding: 8px 10px;
        font-size: 12.5px
    }
}

/* vitrin markaları: üstüne gelince yazı ve çerçeve Üç Yirmiiki sarısı (zemin koyu kalır) */
.ck-all .ck-legend a:hover,
.ck-all .ck-legend a:focus-visible,
.ck-all .ck-legend button:hover,
.ck-all .ck-legend button:focus-visible,
.ck-all .ck-legend button[aria-pressed="true"] {
    background: rgba(20, 20, 19, .75);
    border-color: var(--y);
    color: var(--y)
}

/* =====================================================================
   TEKLİF FORMU — başarı mesajı formun üstünde (site.partials.quote-form)
   Sarı bölümde (ana sayfa) antrasit kart + beyaz yazı; koyu bölümde (İletişim) beyaz kart + antrasit yazı.
   Onay işareti her ikisinde de sarı daire içinde antrasit tik: renkler birbirine karışmaz.
   ===================================================================== */
.qf {
    display: grid;
    gap: 16px;
    align-content: start
}

.qf-ok {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 16px;
    align-items: center;
    padding: 20px 22px;
    border-radius: 22px;
    background: var(--k);
    color: #fff;
    box-shadow: 0 30px 60px -34px rgba(55, 55, 54, .7);
    outline: none
}

.qf-ok[hidden] {
    display: none
}

.dark .qf-ok {
    background: #fff;
    color: var(--k)
}

.qf-ok svg {
    width: 56px;
    height: 56px
}

.qf-ok circle {
    fill: var(--y)
}

.qf-ok path {
    fill: none;
    stroke: var(--k);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: draw .8s .25s var(--ease) forwards
}

.qf-ok b {
    display: block;
    font-family: var(--bold);
    font-weight: 700;
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1.05;
    text-transform: uppercase;
    margin-bottom: 4px
}

.qf-ok p {
    font-size: 15.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .78)
}

.dark .qf-ok p {
    color: var(--muted)
}

.qf-ok.in {
    animation: qfIn .7s var(--spring) both
}

@keyframes qfIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.97)
    }
}

/* bal küpü: ekranda ve ekran okuyucuda yok, botlar doldurur */
.qf-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden
}

.form button[type=submit]:disabled {
    opacity: .6;
    cursor: progress;
    transform: none
}

@media (prefers-reduced-motion: reduce) {

    html:not(.force-motion) .qf-ok.in,
    html:not(.force-motion) .qf-ok path {
        animation: none;
        stroke-dashoffset: 0
    }
}

/* =====================================================================
   TÜRKÇE BÜYÜK HARF SATIR ARALIĞI
   Bu yazı tiplerinde "İ/Ö/Ü" noktası satırın 0,92'sine kadar çıkıyor, "Ş/Ç" çengeli 0,23 iniyor (toplam ≈1,15).
   Çok satırlı büyük harf başlıklarda alt satırın noktası üst satırın çengeline değmesin diye en az 1,18.
   ===================================================================== */
.t-xl,
.t-l,
.blg-title,
.blg-feat-t,
.blg-row-t,
.blg-ch-t,
.blg-pn-a b,
.cmd-item h3,
.st-verbs li,
.svc h3,
.values h3,
.st-card .st-word,
.st-line h3,
.cnt-steps strong,
.cw-cb b,
.ck-name,
.cm-h1 {
    line-height: 1.18
}

/* =====================================================================
   0322 panosu, imza karesi: kutular "3 | // | 2 | 2" olur.
   Çift çizgi (ilki sarı, ikincisi kâğıt rengi) ikinci kutunun içine oturur; düzen kaymaz.
   ===================================================================== */
.flaps {
    --fw: clamp(56px, 7.4vw, 96px)
}

.flap {
    width: var(--fw)
}

.fslash {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    width: calc(var(--fw) * .62);
    height: calc(clamp(80px, 10.4vw, 136px) * .66);
    transform: translate(calc(-50% - var(--fw) / 2 - 5px), -50%) rotateX(90deg);
    opacity: 0;
    transition: opacity .3s ease, transform .5s var(--ease);
    pointer-events: none
}

.fslash svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible
}

.board.is-slash .fslash {
    opacity: 1;
    transform: translate(calc(-50% - var(--fw) / 2 - 5px), -50%) rotateX(0);
    transition-delay: .2s
}

/* =====================================================================
   DAR EKRAN — telefonda hiçbir yazı ekrandan taşmaz, kesilmez
   Büyük başlıklar (.t-xl, .t-l, firma adı, blog başlığı) sığmazsa script.js yazı boyutunu kutuya göre küçültür;
   JS yoksa uzun kelime satır sonunda bölünür. Aşağıdakiler kırılamayan parçaların sütunu ekrandan dışarı itmesini önler.
   ===================================================================== */
html:not(.js) .t-xl,
html:not(.js) .t-l,
html:not(.js) .ck-name,
html:not(.js) .cm-h1,
html:not(.js) .blg-title {
    overflow-wrap: anywhere
}

/* ızgara sütunları içeriğe göre genişlemez */
.cw-cat-hd>*,
.blg-row>* {
    min-width: 0
}

@media (max-width: 420px) {

    /* "Web tasarım ve yazılım uzmanı" gibi uzun uzmanlık adları alt satıra geçebilir */
    .sk {
        white-space: normal
    }

    /* "5 // UZMANLIK" ve "100+ // MARKA" sayaçları ekran genişliğiyle küçülür */
    .tha5-n {
        font-size: clamp(72px, 24vw, 92px)
    }

    .tha5-t b {
        font-size: clamp(30px, 11vw, 40px)
    }

    .cw-count-n {
        font-size: clamp(52px, 18vw, 76px)
    }

    .cw-count-t b {
        font-size: clamp(26px, 9vw, 36px)
    }

    /* iletişim satırındaki telefon ve e-posta ekrana sığar */
    .nap a b {
        min-width: 0;
        font-size: clamp(19px, 6.4vw, 26px);
        overflow-wrap: anywhere
    }

    /* 0322 panosu: dört kutu ekran genişliğiyle küçülür (320 px'te sütuna sığar) */
    .flaps {
        --fw: clamp(44px, 14.5vw, 56px)
    }

    .flap {
        font-size: clamp(44px, 14vw, 54px)
    }

    .board-top {
        flex-wrap: wrap;
        gap: 4px 12px
    }
}

/* Çalışma Modelimiz: her hizmetin altında kendi sayfasına bağlantı */
.cmd-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding-bottom: 3px;
    border-bottom: 2px solid var(--y);
    font-weight: 700
}

.cmd-more svg {
    width: 18px;
    height: 18px;
    transition: transform .3s var(--ease)
}

.cmd-more:hover svg {
    transform: translateX(4px)
}

/* kartlar tek sütuna inince (telefon) eşit yükseklik gereksiz: her kart içeriği kadar */
@media (max-width:620px) {

    .offers,
    .values {
        grid-auto-rows: auto
    }
}