/* Ölçek — kentsel tasarım teması: gece mavisi pafta zemini, sinyal turuncusu, Space Grotesk başlıklar, IBM Plex Mono ölçek etiketleri, keskin köşeler, milimetrik ızgara */
:root {
    --ink: #0f1d33; --text: #3c4658; --muted: #7a8496;
    --bg: #ffffff; --bg-alt: #f1f3f7; --line: #dde2ea; --card: #fff;
    --r: 4px; --r-sm: 3px; --r-lg: 6px; --btn-r: 3px;
    --shadow: 0 1px 0 rgba(15, 29, 51, .06); --shadow-lg: 0 20px 44px rgba(15, 29, 51, .14);
    --head: 'Space Grotesk', system-ui, sans-serif; --body: 'IBM Plex Sans', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace;
    --head-w: 600; --header: 76px;
    --navy: #0f1d33; --navy-2: #16294a;
}
h1 { font-weight: 600; font-size: clamp(2.5rem, 5.4vw, 4.6rem); line-height: 1; letter-spacing: -.035em; }
h2, .h2 { font-weight: 600; font-size: clamp(1.9rem, 3.6vw, 2.9rem); letter-spacing: -.03em; line-height: 1.05; }
h3, .h3 { font-weight: 600; letter-spacing: -.01em; }
a { color: #d9480f; }
a:hover { color: var(--ink); }
.kicker { font-family: var(--mono); font-weight: 500; font-size: .76rem; letter-spacing: .1em; color: var(--accent); }
.kicker::before { content: '■ '; }

.btn { font-family: var(--head); font-weight: 600; letter-spacing: .01em; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: #e24a12; color: #fff; }
.btn-primary { background: var(--navy); }
.btn-primary:hover { background: var(--accent); }
.btn-soft, .btn-outline { background: transparent; border: 1.5px solid var(--navy); color: var(--navy); }
.btn-soft:hover, .btn-outline:hover { background: var(--navy); color: #fff; }

/* Menü */
.site-header { background: var(--navy); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.site-header.scrolled { box-shadow: 0 6px 20px rgba(0, 0, 0, .2); }
.brand-mark { background: var(--accent); color: #fff; border-radius: 3px; }
.brand-text strong { color: #fff; font-weight: 700; font-size: 1.5rem; letter-spacing: -.03em; }
.brand-text small { color: #9aa7bd; font-family: var(--mono); font-weight: 400; letter-spacing: .04em; }
.nav-list > li > a { color: #d5dcea; font-weight: 500; }
.nav-list > li > a:hover { color: #fff; }
.nav-list > li > a.on { color: #fff; box-shadow: inset 0 -2px 0 var(--accent); }
.phone-chip { color: #fff; }
.phone-chip .ic { color: var(--accent); }
.nav-toggle { background: rgba(255, 255, 255, .08); color: #fff; }
.nav-toggle span, .nav-toggle i { background: #fff; }

/* Hero: pafta ızgarası + ölçek mozaiği */
.hero { position: relative; padding: 70px 0 84px; background-color: var(--navy); color: #c9d2e3; overflow: hidden;
    background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; }
.hero-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 60px; align-items: center; }
.hero-eyebrow { display: inline-block; font-family: var(--mono); font-size: .76rem; letter-spacing: .06em; color: var(--accent); margin-bottom: 22px; padding-left: 14px; border-left: 2px solid var(--accent); }
.hero h1 { color: #fff; }
.hero .lead { color: #b7c2d6; max-width: 520px; margin-top: 14px; }
.scale-bar { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); width: 260px; margin-top: 44px; padding-bottom: 22px; }
.scale-bar span { height: 8px; border: 1px solid #c9d2e3; }
.scale-bar span:nth-child(odd) { background: #c9d2e3; }
.scale-bar em { position: absolute; bottom: 0; font-style: normal; font-family: var(--mono); font-size: .68rem; color: #8d9ab2; transform: translateX(-50%); white-space: nowrap; }
.scale-bar em:nth-of-type(1) { left: 0; } .scale-bar em:nth-of-type(2) { left: 25%; } .scale-bar em:nth-of-type(3) { left: 50%; } .scale-bar em:nth-of-type(4) { left: 100%; }
.mosaic { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: 230px 190px; gap: 12px; }
.mo { position: relative; margin: 0; overflow: hidden; border-radius: 3px; background: var(--navy-2); }
.mo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.mo:hover img { transform: scale(1.04); }
.mo.m1 { grid-row: span 2; }
.mo.m4 { grid-column: 1 / -1; height: 150px; }
.mo figcaption { position: absolute; left: 10px; bottom: 10px; padding: 4px 8px; background: var(--navy); color: #fff; font-family: var(--mono); font-size: .72rem; border-left: 2px solid var(--accent); }

/* Ölçek merdiveni */
.ladder { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 2px solid var(--navy); }
.ladder li { position: relative; padding: 26px 20px 8px 0; border-right: 1px solid var(--line); margin-top: calc(var(--i) * 18px); }
.ladder li + li { padding-left: 20px; }
.ladder li:last-child { border-right: 0; }
.ladder li::before { content: ''; position: absolute; left: 0; top: -9px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); }
.ladder li + li::before { left: -8px; }
.ld-scale { display: block; font-family: var(--mono); font-size: 1.35rem; font-weight: 500; color: var(--accent); letter-spacing: -.02em; margin-bottom: 8px; }
.ladder h3 { font-size: 1.2rem; margin-bottom: 6px; color: var(--ink); }
.ladder p { margin: 0; font-size: .92rem; color: var(--muted); }

/* Hizmet listesi */
.svc-list { border-top: 2px solid var(--navy); background: #fff; }
.sl-row { display: grid; grid-template-columns: 56px 48px 1fr 170px 40px; gap: 18px; align-items: center; padding: 22px 18px; border-bottom: 1px solid var(--line); color: var(--ink); transition: background .25s; }
.sl-row:hover { background: var(--navy); color: #fff; }
.sl-no { font-family: var(--mono); font-size: .82rem; color: var(--muted); }
.sl-ic { width: 44px; height: 44px; display: grid; place-items: center; border: 1.5px solid currentColor; border-radius: 3px; color: var(--accent); }
.sl-t strong { display: block; font-family: var(--head); font-size: 1.28rem; font-weight: 600; letter-spacing: -.01em; }
.sl-t small { display: block; color: var(--muted); font-size: .9rem; margin-top: 2px; }
.sl-row:hover .sl-t small, .sl-row:hover .sl-no, .sl-row:hover .sl-d { color: #9aa7bd; }
.sl-d { font-family: var(--mono); font-size: .8rem; color: var(--muted); }
.sl-go { color: var(--accent); transition: transform .25s; }
.sl-row:hover .sl-go { transform: translateX(4px); }

/* Kartlar */
.card { border: 1px solid var(--line); box-shadow: none; }
.card:hover { transform: none; box-shadow: var(--shadow-lg); border-color: transparent; }
.c-body h3 { font-size: 1.22rem; }
.c-cat { font-family: var(--mono); font-weight: 500; color: var(--accent); letter-spacing: .04em; }
.c-badge { background: var(--accent); border-radius: 2px; font-family: var(--mono); }
.c-attrs { border-top: 1px dashed var(--line); }
.c-attrs small { font-family: var(--mono); }
.c-more { color: var(--navy); font-family: var(--head); font-weight: 600; }
.c-ic { background: var(--bg-alt); color: var(--accent); border-radius: 3px; }
.c-meta { background: var(--bg-alt); border-radius: 2px; font-family: var(--mono); font-weight: 400; }
.proj-grid .item-card .c-media { aspect-ratio: 16 / 11; }
.proj-grid .item-card .c-media::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .12) 1px, transparent 1px); background-size: 40px 40px; opacity: 0; transition: opacity .4s; pointer-events: none; }
.proj-grid .item-card:hover .c-media::after { opacity: 1; }
.team-grid { grid-template-columns: repeat(3, 1fr); }
.team-card .c-media { aspect-ratio: 4 / 3; }
.team-card .c-media img { filter: grayscale(.4); }
.c-role { font-family: var(--mono); font-size: .8rem; color: var(--accent); }
.c-tags li { background: var(--bg-alt); border-radius: 2px; }

/* Rakamlar */
.grid-stats { background: var(--accent); padding: 40px 0; }
.grid-stats .stats-grid { text-align: left; }
.grid-stats .stat-item + .stat-item { border-left: 1px solid rgba(255, 255, 255, .35); padding-left: 22px; }
.grid-stats .stat-item strong { font-weight: 600; letter-spacing: -.03em; }
.grid-stats .stat-item span { font-family: var(--mono); font-weight: 400; opacity: .9; }

/* Ofis */
.ab-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; }
.ab-media { position: relative; }
.ab-media img { width: 100%; aspect-ratio: 10 / 11; object-fit: cover; border-radius: 3px; }
.ab-tag { position: absolute; right: 0; top: 24px; padding: 8px 12px; background: var(--navy); color: #fff; font-family: var(--mono); font-size: .74rem; border-left: 3px solid var(--accent); }
.tick-list li > span { background: var(--accent); border-radius: 2px; }
.awards { margin-top: 28px; padding: 22px 24px; background: var(--navy); color: #c9d2e3; border-radius: 3px; }
.awards h3 { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 1.05rem; margin-bottom: 12px; }
.awards h3 .ic { color: var(--accent); }
.awards ul { list-style: none; margin: 0; padding: 0; }
.awards li { display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .92rem; }
.awards li span { font-family: var(--mono); color: #8d9ab2; }
.awards li b { font-weight: 500; color: #fff; }
.awards li em { font-style: normal; font-family: var(--mono); font-size: .78rem; color: var(--accent); white-space: nowrap; }

/* Süreç */
.steps-grid .steps { gap: 0; border: 1px solid var(--line); background: #fff; }
.steps-grid .steps li { border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; padding: 30px 24px; }
.steps-grid .steps li:last-child { border-right: 0; }
.st-no { font-family: var(--mono); color: var(--accent); }
.st-ic, .f-ic { background: var(--bg-alt); color: var(--navy); border-radius: 3px; }

/* SSS + form */
.faq { border-radius: 3px; background: #fff; }
.faq summary { font-family: var(--head); font-weight: 600; }
.faq summary i { border-radius: 2px; background: var(--bg-alt); color: var(--navy); }
.faq[open] summary i { background: var(--accent); color: #fff; }
.form-card { border-radius: 4px; border-top: 4px solid var(--accent); box-shadow: var(--shadow-lg); }
.field input, .field select, .field textarea { border-radius: 3px; }
.field label { font-family: var(--mono); font-weight: 500; font-size: .76rem; }
.check input { accent-color: var(--accent); }

/* İç sayfalar */
.page-hero { background-color: var(--navy); color: #b7c2d6; padding: 64px 0 54px;
    background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 60px 60px; }
.page-hero h1 { color: #fff; font-size: clamp(2.2rem, 4.8vw, 3.8rem); }
.page-hero .lead, .page-hero p { color: #b7c2d6; }
.page-hero .crumbs, .page-hero .crumbs a { color: #8d9ab2; font-family: var(--mono); font-size: .76rem; }
.page-hero .crumbs [aria-current] { color: var(--accent); }
.ph-deco { color: rgba(255, 255, 255, .05); }
.fact, .topic-box, .spec-box, .c-card, .side-list, .note, .toc { border-radius: 3px; background: #fff; border: 1px solid var(--line); }
.fact > span, .c-card > span, .side-list a span { background: var(--bg-alt); color: var(--accent); border-radius: 3px; }
.spec-list dt { font-family: var(--mono); }
.filter-pills a { border-radius: 2px; font-family: var(--mono); font-size: .82rem; }
.filter-pills a.on, .filter-pills a:hover { background: var(--navy); border-color: var(--navy); }
.pill-links a, .pill-links span { border-radius: 2px; }
.pill-links a:hover { background: var(--navy); }
.side-call { background: var(--navy); border-left: 4px solid var(--accent); }
.profile-card { border-radius: 4px; }
.cta-band { background: var(--navy); }
.cta-band.has-img::before { background: linear-gradient(90deg, rgba(15, 29, 51, .95), rgba(15, 29, 51, .6)); }
.site-footer { background: #0a1424; }
.ft-title { font-family: var(--mono); font-weight: 500; letter-spacing: .06em; }
.social a { border-radius: 3px; }
.float-bar, .float-bar a { border-radius: 4px; }
.float-bar .fb-main { background: var(--accent); }

@media (max-width: 1100px) {
    .ladder { grid-template-columns: repeat(3, 1fr); row-gap: 26px; }
    .ladder li { margin-top: 0; }
    .ladder li:nth-child(3) { border-right: 0; }
    .ladder li:nth-child(4) { padding-left: 0; }
    .ladder li:nth-child(4)::before { left: 0; }
}
@media (max-width: 960px) {
    .hero-grid, .ab-grid { grid-template-columns: 1fr; gap: 40px; }
    .sl-row { grid-template-columns: 40px 44px 1fr 30px; }
    .sl-d { display: none; }
    .steps-grid .steps li:nth-child(2) { border-right: 0; }
    .steps-grid .steps li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    .grid-stats .stats-grid { grid-template-columns: 1fr 1fr; row-gap: 20px; }
    .grid-stats .stat-item:nth-child(3) { border-left: 0; padding-left: 0; }
    .main-nav { background: var(--navy); }
}
@media (max-width: 640px) {
    .hero { padding: 40px 0 50px; }
    .mosaic { grid-template-rows: 170px 140px; gap: 8px; }
    .mo.m4 { height: 110px; }
    .ladder { grid-template-columns: 1fr; border-top: 0; border-left: 2px solid var(--navy); }
    .ladder li, .ladder li + li, .ladder li:nth-child(4) { padding: 0 0 18px 24px; border-right: 0; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
    .ladder li::before, .ladder li + li::before, .ladder li:nth-child(4)::before { left: -9px; top: 4px; }
    .sl-row { grid-template-columns: 44px 1fr 24px; padding: 18px 6px; gap: 12px; }
    .sl-no { display: none; }
    .sl-t strong { font-size: 1.1rem; }
    .sl-t small { font-size: .84rem; }
    .team-grid { grid-template-columns: 1fr; }
    .steps-grid .steps li { border-right: 0; border-bottom: 1px solid var(--line); }
    .grid-stats .stat-item + .stat-item { border-left: 0; padding-left: 0; }
    .awards li { grid-template-columns: 44px 1fr; }
    .awards li em { grid-column: 2; }
}