/* Yazı tipleri sitenin kendi sunucusundan yüklenir (Google Fonts kopyası: latin + Türkçe karakterler) */
/* Yazı tipi gelene kadar kullanılan yedek font, gerçek fontla aynı genişliğe ayarlı: başlıklar satır değiştirmez, sayfa kaymaz */
@font-face { font-family: "Barlow Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Helvetica Neue Bold"), local("Roboto Bold"), local("Arial"); font-weight: 600 800; size-adjust: 69.6%; }
@font-face { font-family: "Figtree Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"), local("Helvetica Neue"), local("Roboto"); size-adjust: 98.8%; }
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/barlow-condensed-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/barlow-condensed-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/barlow-condensed-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/barlow-condensed-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/barlow-condensed-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/barlow-condensed-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/figtree-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/figtree-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/figtree-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/figtree-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/figtree-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/figtree-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Prokar Reklam: açık, ferah zemin; renkler logodan (siyah yazı + turkuaz çerçeve).
   Düzen: geniş kenar boşluklu akış, yer yer asimetrik 12'lik grid. */
:root {
  --bg: #f6f8f8;           /* sayfa zemini, turkuaza hafif eğilimli */
  --surface: #ffffff;      /* kartlar, form */
  --surface-2: #e9f1ef;    /* bant ve footer, turkuazın çok açığı */
  --line: #dbe4e2;         /* ince çizgiler */
  --text: #141517;         /* logo siyahı */
  --muted: #56615f;
  --accent: #17a58d;       /* logo turkuazı */
  --accent-text: #0b7a67;  /* açık zeminde okunur turkuaz */
  --accent-soft: rgba(23, 165, 141, .14);
  --on-dark: #ffffff;
  --shade: rgba(20, 21, 23, .08);
  --photo-veil: rgba(10, 12, 14, .78);
  --bg-rgb: 246, 248, 248;   /* hero perdesi ve mobil menü için zemin rengi */
  --glass-rgb: 255, 255, 255; /* buzlu cam menü ve buton */
  --btn-bg: #141517; --btn-fg: #ffffff; --btn-hover-bg: #0b7a67; --btn-hover-fg: #ffffff;
  --line-strong: #c4d0cd;
  --faint: #a4afac;          /* sönük başlık, yanmamış kelime, referans şeridi */
  --hero-text: #2b3331; --hero-muted: #3d4745;
  --glow-base: #d3e0dd;

  --f-display: "Barlow Condensed", "Barlow Fallback", "Arial Narrow", "Roboto Condensed", sans-serif;
  --f-body: "Figtree", "Figtree Fallback", "Segoe UI", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1240px;
  --radius: 12px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  color-scheme: only light; /* tarayıcının siteyi kendiliğinden koyulaştırmasını engeller */
}

/* ---------- Koyu tema: menüdeki düğmeyle açılır, seçim tarayıcıda hatırlanır ---------- */
html.theme-dark {
  --bg: #0f1413; --surface: #161e1d; --surface-2: #121a19; --line: #26312f;
  --text: #e9f0ee; --muted: #9babaa; --accent: #2cc4a8; --accent-text: #52dbc2; --accent-soft: rgba(44, 196, 168, .16);
  --shade: rgba(0, 0, 0, .38);
  --bg-rgb: 15, 20, 19; --glass-rgb: 22, 30, 29;
  --btn-bg: #e9f0ee; --btn-fg: #0f1413; --btn-hover-bg: #2cc4a8; --btn-hover-fg: #0b1110;
  --line-strong: #34413e; --faint: #4f5d5a; --hero-text: #d3dedb; --hero-muted: #b3c1be; --glow-base: #22302d;
  color-scheme: dark;
}
html.theme-anim body, html.theme-anim body *, html.theme-anim body *::before, html.theme-anim body *::after {
  transition: background-color .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease), box-shadow .6s var(--ease) !important;
}
.logo-d { display: none !important; }
.theme-dark .logo-l { display: none !important; }
.theme-dark .logo-d { display: block !important; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.65 var(--f-body);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--on-dark); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--f-display); font-weight: 800; line-height: .95; letter-spacing: .005em; margin: 0; text-wrap: balance; text-transform: uppercase; }
h1 { font-size: clamp(2.8rem, 6.6vw, 5.8rem); }
h2 { font-size: clamp(2.3rem, 5.2vw, 4.3rem); }
h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; }
p { margin: 0; max-width: 62ch; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(72px, 10vw, 140px); }
.eyebrow {
  font: 500 .78rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text);
  display: inline-flex; align-items: center; gap: .7em;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--accent); border-radius: 2px; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.22rem); color: var(--muted); }
.spec { font: 400 .75rem/1.4 var(--f-mono); letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
.hl { color: var(--accent); }

/* ---------- Scroll ilerleme çizgisi ---------- */
.progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; pointer-events: none;
  background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--p, 0));
}

/* ---------- Üst menü ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  transition: background .5s var(--ease), box-shadow .5s var(--ease);
}
/* Buzlu cam ayrı katmanda: nav'ın kendisinde backdrop-filter olursa telefondaki tam ekran menü başlık yüksekliğine sıkışıyordu */
.nav::before { content: ""; position: absolute; inset: 0; z-index: -2; background: rgba(var(--glass-rgb), .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line), 0 8px 30px var(--shade); opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; }
.nav.solid::before { opacity: 1; }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 88px; transition: height .5s var(--ease); }
.nav.solid .wrap { height: 68px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.brand img { height: 52px; width: auto; transition: height .5s var(--ease); }
.nav.solid .brand img { height: 42px; }
.menu { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px); }
.menu a { text-decoration: none; font-size: .96rem; font-weight: 500; color: var(--muted); position: relative; padding-block: 6px; transition: color .3s; }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.menu a:hover, .menu a[aria-current="page"] { color: var(--text); }
.menu a:hover::after, .menu a[aria-current="page"]::after { transform: scaleX(1); }
.menu .btn { padding: 11px 20px; color: var(--btn-fg); }
.menu .btn::after { display: none; }
.burger { display: none; background: none; border: 0; color: var(--text); width: 44px; height: 44px; cursor: pointer; padding: 10px; }
.burger span { display: block; height: 2px; background: currentColor; margin: 6px 0; border-radius: 2px; transition: transform .35s var(--ease), opacity .35s; }
.nav.open .burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav.open .burger span:nth-child(2) { opacity: 0; }
.nav.open .burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 860px) {
  .burger { display: block; }
  .brand img, .nav.solid .brand img { height: 40px; }
  .menu {
    position: fixed; inset: 0; z-index: -1; flex-direction: column; justify-content: center; gap: 22px;
    background: var(--bg); opacity: 0; pointer-events: none; transition: opacity .4s var(--ease);
  }
  .menu a { font-family: var(--f-display); font-size: 2.4rem; font-weight: 700; text-transform: uppercase; color: var(--text); }
  .menu .btn { font-family: var(--f-body); font-size: 1rem; text-transform: none; color: var(--btn-fg); }
  .nav.open .menu { opacity: 1; pointer-events: auto; }
}

/* ---------- Butonlar: logo siyahı, üzerine gelince turkuaz ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; cursor: pointer;
  background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bg);
  font: 600 .95rem/1 var(--f-body); padding: 16px 26px; border-radius: 99px;
  transition: box-shadow .45s var(--ease), transform .45s var(--ease), background .35s, border-color .35s;
}
.btn:hover { background: var(--btn-hover-bg); border-color: var(--btn-hover-bg); color: var(--btn-hover-fg); box-shadow: 0 12px 28px var(--accent-soft); transform: translateY(-2px); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn.ghost:hover { border-color: var(--accent); background: var(--surface); color: var(--accent-text); box-shadow: none; }
.btn svg { width: 18px; height: 18px; transition: transform .4s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

/* ---------- Hero: arkada beyaz perdeli, yavaşça kayan fotoğraf şeridi ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: min(90svh, 860px); padding-top: 88px; }
.hero-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-bg-track { display: flex; gap: 6px; height: 100%; width: max-content; animation: bg-slide 105s linear infinite; will-change: transform; }
.hero-bg img { height: 100%; width: auto; max-width: none; object-fit: cover; flex: none; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(var(--bg-rgb), .86) 0%, rgba(var(--bg-rgb), .75) 38%, rgba(var(--bg-rgb), .52) 70%, rgba(var(--bg-rgb), .44) 100%),
    linear-gradient(180deg, rgba(var(--bg-rgb), .35) 0%, rgba(var(--bg-rgb), 0) 30%, rgba(var(--bg-rgb), 0) 75%, var(--bg) 100%); }
.hero .wrap { position: relative; }
.hero-txt { display: grid; gap: 26px; padding-block: 64px 80px; max-width: 760px; }
.hero h1 { max-width: 5.02em; } /* = 11ch Barlow ile; em kullanılır ki yedek fontta da aynı yerden kırılsın */
.cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px 26px; }
@keyframes bg-slide { to { transform: translateX(calc(-50% - 3px)); } }
@media (max-width: 860px) {
  .hero { min-height: 0; }
  .hero::before { background: linear-gradient(180deg, rgba(var(--bg-rgb), .74), rgba(var(--bg-rgb), .68) 70%, var(--bg)); }
  .hero-bg-track { animation-duration: 80s; }
  .hero-txt { padding-block: 40px 64px; }
}

/* Başlık: kelimeler yumuşakça yükselerek gelir */
.sign .w { display: inline-block; }
.js .sign .w { opacity: 0; transform: translateY(.35em); filter: blur(6px); animation: rise 1.1s var(--ease) forwards; animation-delay: calc(var(--i) * 110ms + 150ms); }
@keyframes rise { to { opacity: 1; transform: none; filter: blur(0); } }

/* ---------- Referans şeridi ---------- */
.marquee { border-block: 1px solid var(--line); overflow: hidden; padding-block: 22px; background: var(--surface); }
.marquee-track { display: flex; width: max-content; gap: 56px; animation: slide 50s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span { font: 700 1.6rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; color: var(--faint); white-space: nowrap; display: inline-flex; align-items: center; gap: 56px; transition: color .4s; }
.marquee span:hover { color: var(--text); }
.marquee span::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- Bölüm başlıkları ---------- */
.head { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: end; margin-bottom: clamp(40px, 6vw, 72px); }
.head > :first-child { grid-column: 1 / span 7; display: grid; gap: 18px; }
.head > .lead { grid-column: 8 / -1; }
@media (max-width: 860px) { .head > :first-child, .head > .lead { grid-column: 1 / -1; } }

/* ---------- Hizmet kartları ---------- */
.services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 960px) { .services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .services { grid-template-columns: 1fr; } }
.svc {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px 28px 28px; display: grid; gap: 14px; align-content: start; text-decoration: none; overflow: hidden; min-width: 0;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .4s;
}
.svc::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), var(--accent-soft), transparent 65%); }
.svc:hover { transform: translateY(-4px); box-shadow: 0 20px 40px var(--shade); border-color: var(--accent); }
.svc:hover::before { opacity: 1; }
.svc .ico { width: 44px; height: 44px; color: var(--accent); position: relative; }
.svc h3 { font-size: 1.7rem; position: relative; }
.svc p { color: var(--muted); font-size: .98rem; position: relative; }
.svc .more { margin-top: 6px; font-size: .9rem; font-weight: 600; color: var(--accent-text); display: inline-flex; gap: 8px; align-items: center; position: relative; }
.svc .more svg { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.svc:hover .more svg { transform: translateX(4px); }

/* ---------- Öne çıkan işler ---------- */
.works { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.work { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--surface-2); margin: 0; min-width: 0; }
.work img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.work:hover img { transform: scale(1.04); }
.work figcaption { position: absolute; inset: auto 0 0 0; padding: 60px 22px 20px; background: linear-gradient(transparent, var(--photo-veil)); display: grid; gap: 4px; color: var(--on-dark); }
.work figcaption b { font: 700 1.5rem/1 var(--f-display); text-transform: uppercase; }
.work figcaption .spec { color: rgba(255,255,255,.78); }
.w-a { grid-column: span 7; aspect-ratio: 4/3; }
.w-b { grid-column: span 5; }
.w-c, .w-d, .w-e { grid-column: span 4; aspect-ratio: 3/4; }
@media (max-width: 860px) { .w-a, .w-b, .w-c, .w-d, .w-e { grid-column: 1 / -1; aspect-ratio: 4/3; } }

/* ---------- Süreç: kaydırdıkça dolan hat ---------- */
.process { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); }
.process-intro { position: sticky; top: 120px; align-self: start; display: grid; gap: 22px; }
.steps { position: relative; display: grid; gap: clamp(48px, 7vw, 90px); padding-left: 44px; }
.steps::before, .steps .rail { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--line); }
.steps .rail { background: var(--accent); transform-origin: top; transform: scaleY(var(--fill, 0)); transition: transform .3s linear; }
.step { position: relative; display: grid; gap: 10px; }
.step::before { content: ""; position: absolute; left: -44px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line); transition: border-color .6s, background .6s, box-shadow .6s; }
.step.on::before { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 6px var(--accent-soft); }
.step .num { font: 500 .8rem/1 var(--f-mono); color: var(--muted); letter-spacing: .1em; }
.step h3 { transition: color .6s; color: var(--faint); }
.step.on h3 { color: var(--text); }
.step p { color: var(--muted); }
@media (max-width: 860px) { .process { grid-template-columns: 1fr; } .process-intro { position: static; } }

/* ---------- CTA bandı ---------- */
.band { position: relative; overflow: hidden; background: var(--surface-2); }
.band .wrap { padding-block: clamp(64px, 9vw, 120px); display: grid; gap: 26px; justify-items: start; position: relative; z-index: 1; }
.band h2 { max-width: 7.3em; }
.band::after { content: ""; position: absolute; right: -12%; top: -50%; width: 62%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(23,165,141,.22), transparent 65%); pointer-events: none; }

/* ---------- Alt sayfa başlığı ---------- */
.page-hero { padding-block: 190px clamp(48px, 7vw, 90px); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.page-hero .wrap { display: grid; gap: 22px; position: relative; }
.page-hero::before { content: ""; position: absolute; right: -10%; top: -30%; width: 50%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--accent-soft), transparent 65%); pointer-events: none; }
.crumbs { font: 400 .78rem/1 var(--f-mono); color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--accent-text); }

/* ---------- Hakkımızda ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.split .txt { display: grid; gap: 20px; }
.split .txt p { color: var(--muted); }
.stack { position: relative; aspect-ratio: 4/5; }
.stack img { position: absolute; object-fit: cover; border-radius: var(--radius); box-shadow: 0 30px 60px var(--shade); }
.stack img:nth-child(1) { inset: 0 22% 18% 0; width: 78%; height: 82%; }
.stack img:nth-child(2) { inset: 40% 0 0 34%; width: 66%; height: 60%; transform: translateY(var(--py, 0px)); box-shadow: 0 24px 50px rgba(20, 21, 23, .28), 0 4px 12px rgba(20, 21, 23, .18); }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 40px 32px; }
.value { display: grid; gap: 12px; padding-top: 22px; border-top: 2px solid var(--accent); }
.value p { color: var(--muted); font-size: .98rem; }
.inhouse { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; }
.inhouse div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; display: grid; gap: 8px; }
.inhouse b { font: 700 1.35rem/1 var(--f-display); text-transform: uppercase; }
.inhouse span { color: var(--muted); font-size: .92rem; }

/* ---------- Hizmetler detay ---------- */
.svc-list { display: grid; gap: clamp(72px, 10vw, 140px); }
.svc-row { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: center; scroll-margin-top: 100px; }
.svc-row:nth-child(even) .svc-img { order: 2; }
.svc-img { overflow: hidden; border-radius: var(--radius); aspect-ratio: 4/3; box-shadow: 0 24px 50px var(--shade); }
.svc-img img { width: 100%; height: 115%; object-fit: cover; transform: translateY(var(--py, 0px)); }
.svc-body { display: grid; gap: 18px; }
.svc-body > p { color: var(--muted); }
.svc-body ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.svc-body li { display: flex; gap: 12px; align-items: baseline; }
.svc-body li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); transform: translateY(-2px); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags span { font: 400 .72rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--surface); border: 1px solid var(--line); padding: 7px 11px; border-radius: 99px; }
@media (max-width: 860px) { .svc-row { grid-template-columns: 1fr; } .svc-row:nth-child(even) .svc-img { order: 0; } }

/* ---------- İşlerimiz galeri ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.filters button {
  font: 500 .9rem/1 var(--f-body); color: var(--muted); background: var(--surface); border: 1px solid var(--line);
  padding: 12px 18px; border-radius: 99px; cursor: pointer; transition: color .3s, border-color .3s, background .3s, box-shadow .3s;
}
.filters button:hover { color: var(--text); border-color: var(--accent); }
.filters button[aria-pressed="true"] { color: var(--btn-fg); background: var(--btn-bg); border-color: var(--btn-bg); box-shadow: 0 8px 20px var(--shade); }
.filters sup { font: 400 .7rem var(--f-mono); margin-left: 4px; opacity: .7; }
/* Eşit yükseklikli satırlar: her foto kendi oranını korur, satırlar kenardan kenara dolar */
.gallery { display: flex; flex-wrap: wrap; gap: 16px; --row: clamp(170px, 22vw, 290px); }
.gallery::after { content: ""; flex-grow: 1e4; }
.g-item { flex: var(--ar) 1 calc(var(--ar) * var(--row)); aspect-ratio: var(--ar); max-width: 100%; margin: 0; position: relative; overflow: hidden; border-radius: var(--radius); cursor: zoom-in; background: var(--surface-2); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.g-item:hover img { transform: scale(1.04); }
.g-item figcaption { position: absolute; inset: auto 0 0 0; padding: 48px 18px 16px; color: var(--on-dark); background: linear-gradient(transparent, var(--photo-veil)); display: grid; gap: 3px; transform: translateY(8px); opacity: 0; transition: opacity .45s, transform .45s var(--ease); }
.g-item figcaption .spec { color: rgba(255,255,255,.78); }
.g-item:hover figcaption, .g-item:focus-visible figcaption { opacity: 1; transform: none; }
@media (hover: none) { .g-item figcaption { opacity: 1; transform: none; } }
.g-item figcaption b { font: 700 1.3rem/1 var(--f-display); text-transform: uppercase; }
.g-item.out { opacity: 0; transform: scale(.97); }
.g-item.gone { display: none; }

/* Lightbox */
.lb { position: fixed; inset: 0; z-index: 100; background: rgba(12,14,16,.92); color: var(--on-dark); display: grid; grid-template-rows: 1fr auto; padding: max(20px, env(safe-area-inset-top, 0px)) 16px max(20px, env(safe-area-inset-bottom, 0px)); opacity: 0; pointer-events: none; transition: opacity .4s; }
.lb.show { opacity: 1; pointer-events: auto; }
.lb figure { margin: 0; display: grid; place-items: center; min-height: 0; }
.lb img { max-height: 78vh; max-width: min(1200px, 100%); object-fit: contain; border-radius: var(--radius); }
.lb .cap { text-align: center; padding-top: 16px; display: grid; gap: 4px; }
.lb .cap .spec { color: rgba(255,255,255,.7); }
.lb .cap b { font: 700 1.6rem/1 var(--f-display); text-transform: uppercase; }
.lb button { position: absolute; background: rgba(255,255,255,.1); color: var(--on-dark); border: 1px solid rgba(255,255,255,.2); width: 48px; height: 48px; border-radius: 50%; cursor: pointer; font-size: 1.4rem; line-height: 1; display: grid; place-items: center; transition: background .3s; }
.lb button:hover { background: rgba(23,165,141,.5); }
.lb .x { top: max(16px, env(safe-area-inset-top, 0px)); right: 16px; }
.lb .prev { left: 16px; top: 50%; translate: 0 -50%; }
.lb .next { right: 16px; top: 50%; translate: 0 -50%; }

/* ---------- İletişim ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); }
.c-info { display: grid; gap: 28px; align-content: start; }
.c-item { display: grid; gap: 6px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.c-item a, .c-item div { font: 700 1.6rem/1.1 var(--f-display); text-transform: uppercase; text-decoration: none; overflow-wrap: anywhere; }
.c-item a:hover { color: var(--accent-text); }
.todo { color: var(--accent-text); font: 400 .72rem/1.4 var(--f-mono); }
form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 3vw, 36px); box-shadow: 0 20px 50px var(--shade); }
.field { display: grid; gap: 8px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
label { font: 500 .78rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
input, select, textarea {
  width: 100%; font: 400 1rem/1.4 var(--f-body); color: var(--text); background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; transition: border-color .3s, box-shadow .3s;
}
textarea { min-height: 150px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.form-note { grid-column: 1 / -1; font-size: .9rem; color: var(--muted); }
.form-ok { grid-column: 1 / -1; color: var(--accent-text); font-weight: 600; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }
@media (max-width: 560px) { form { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.foot { background: var(--surface-2); padding-block: 72px calc(32px + env(safe-area-inset-bottom, 0px)); }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.foot-grid > div { display: grid; gap: 12px; align-content: start; min-width: 0; }
.foot .brand img { height: 60px; }
.foot h4, .foot .foot-h { margin: 0; font: 500 .78rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.foot a { text-decoration: none; color: var(--text); }
.foot a:hover { color: var(--accent-text); }
.foot .big { font: 800 clamp(3rem, 12vw, 9.5rem)/.85 var(--f-display); text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px #b7c6c2; margin-top: 56px; letter-spacing: .01em; user-select: none; transition: color 1s var(--ease), -webkit-text-stroke-color 1s; }
.foot .big:hover { color: var(--accent); -webkit-text-stroke-color: var(--accent); }
.foot .legal { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .85rem; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr; } }

/* WhatsApp kısayolu */
.wa { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 40; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.18); transition: transform .4s var(--ease); }
.wa:hover { transform: scale(1.08); }
.wa svg { width: 28px; height: 28px; }

/* ---------- Scroll ile beliren öğeler (yumuşak) ---------- */
.js .rv { opacity: 0; transform: translateY(28px); filter: blur(4px); transition: opacity 1.3s var(--ease), transform 1.3s var(--ease), filter 1.3s var(--ease); transition-delay: var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; filter: none; }

/* Fotoğraflar perde açılır gibi aşağıdan yukarı açılır, içindeki görüntü hafifçe yerine oturur */
.js .rv-img img { clip-path: inset(100% 0 0 0); scale: 1.14; transition: clip-path 1.5s cubic-bezier(.65, 0, .25, 1), scale 2.2s var(--ease); }
.js .rv-img.in img { clip-path: inset(0 0 0 0); scale: 1; }
.js .rv-img.done img { clip-path: none; }
.js .stack.rv-img img { scale: 1; }
.js .stack.rv-img img:nth-child(2) { transition-delay: .25s; }
.js .work.rv-img img, .js .g-item.rv-img img { transition: clip-path 1.5s cubic-bezier(.65, 0, .25, 1), scale 2.2s var(--ease), transform 1.4s var(--ease); }
.js .work.rv-img:not(.in), .js .g-item.rv-img:not(.in), .js .svc-img.rv-img:not(.in) { background: transparent; box-shadow: none; }
.js .work.rv-img figcaption { opacity: 0; transition: opacity 1s var(--ease) .7s; }
.js .work.rv-img.in figcaption { opacity: 1; }

/* Sayfa geçişi */
.js body { animation: pagein .8s var(--ease) both; }
@keyframes pagein { from { opacity: 0; } }
body.leaving { opacity: 0; transition: opacity .3s; }

.hero .btn.ghost { background: rgba(var(--glass-rgb), .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hero .lead { color: var(--hero-text); }
.hero .spec { color: var(--hero-muted); }

/* Fotoğraf çerçevelerinde imleç tarafına hafif eğilme (3D tilt) */
.tilt { transition: transform .6s var(--ease), box-shadow .6s var(--ease); will-change: transform; }
.tilt.tilting { transition: transform .15s ease-out, box-shadow .3s ease-out;
  box-shadow: calc(var(--sx, 0) * 1px) calc(var(--sy, 0) * 1px + 18px) 44px rgba(20, 21, 23, .2); }
.g-item.tilt.tilting { z-index: 2; }

/* Footer imza alanı: çerçevesiz, serbest alan. İmleç gezdikçe harflerin üzerinde yumuşak bir ışık dolaşır. */
@property --wx { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --wy { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --lx { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --ly { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --lc { syntax: "<color>"; inherits: true; initial-value: #17a58d; }
.glow-area { position: relative; margin-top: 64px; padding-block: 12px 4px; display: grid; justify-items: center; gap: 14px;
  --wx: 50vw; --wy: 50%; --lc: #a58ff0; transition: --wx .35s ease-out, --wy .35s ease-out, --lc .5s ease-out; }
.glow-area::before { content: ""; position: absolute; top: -400px; bottom: -200px; left: calc(50% - 50vw); width: 100vw; pointer-events: none; opacity: 0; transition: opacity .8s var(--ease);
  background: radial-gradient(340px circle at var(--wx) calc(var(--wy) + 400px), color-mix(in srgb, var(--lc) 22%, transparent), transparent 72%); }
.glow-area.lit::before { opacity: 1; }
.glow-word { position: relative; font: 800 clamp(5rem, 21vw, 17rem)/.82 var(--f-display); letter-spacing: .03em; user-select: none;
  color: transparent; -webkit-background-clip: text; background-clip: text;
  transition: --lx .35s ease-out, --ly .35s ease-out;
  background-image: radial-gradient(320px circle at var(--lx) var(--ly), var(--lc) 0%, color-mix(in srgb, var(--lc) 80%, var(--glow-base)) 24%, color-mix(in srgb, var(--lc) 38%, var(--glow-base)) 50%, var(--glow-base) 78%);
  background-color: var(--glow-base); }
.glow-sub { position: relative; font: 500 .78rem/1 var(--f-mono); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); text-align: center; }

/* ---------- Tabela yanma efekti: turkuaz kelimeler ve bölüm çizgileri ekrana girince bir kez yumuşakça yanar ---------- */
.js .hl { color: var(--faint); transition: color 1.6s var(--ease); }
.js .hl.lit { color: var(--accent); animation: ignite 2.4s var(--ease) both; }
@keyframes ignite {
  0% { text-shadow: 0 0 0 rgba(23,165,141,0); }
  45% { text-shadow: 0 0 .32em rgba(23,165,141,.55), 0 0 .9em rgba(23,165,141,.25); }
  100% { text-shadow: 0 0 .25em rgba(23,165,141,.18); }
}
.js .eyebrow::before { transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease) .15s, box-shadow 1.6s var(--ease) .15s; }
.js .eyebrow.lit::before { transform: none; box-shadow: 0 0 10px rgba(23,165,141,.55); }

/* ---------- Seçili işler: aşağı kaydırdıkça yana akan şerit ---------- */
.hscroll { position: relative; padding-block: clamp(72px, 10vw, 140px) 0; }
.hs-pin { display: grid; gap: 0; }
.hs-view { overflow: hidden; }
.hs-track { display: flex; gap: 22px; width: max-content; padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); will-change: transform; }
.hs-card { flex: none; height: min(58vh, 520px); margin: 0; }
.hs-card.wide { aspect-ratio: 4 / 3; }
.hs-card.tall { aspect-ratio: 3 / 4; }
.hs-card figcaption { gap: 6px; }
.hs-card figcaption .spec:first-child { color: #7fe3cf; }
.hs-end { flex: none; align-self: stretch; width: 260px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); text-decoration: none;
  display: grid; align-content: end; gap: 10px; padding: 28px; transition: border-color .4s, background .4s; }
.hs-end b { font: 800 2.4rem/.95 var(--f-display); text-transform: uppercase; }
.hs-end svg { width: 28px; height: 28px; color: var(--accent-text); transition: transform .4s var(--ease); }
.hs-end:hover { border-color: var(--accent); }
.hs-end:hover svg { transform: translateX(6px); }
.hscroll.pinned .hs-pin { position: sticky; top: 0; height: 100vh; align-content: center; padding-top: 68px; }
.hscroll.pinned .head { margin-bottom: clamp(28px, 4vh, 48px); }
@media (max-width: 860px) {
  .hs-view { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .hs-view::-webkit-scrollbar { display: none; }
  .hs-track { padding-inline: var(--gutter); gap: 14px; }
  .hs-card, .hs-end { scroll-snap-align: start; scroll-margin-inline: var(--gutter); }
  .hs-card { height: auto; width: 78vw; aspect-ratio: 4 / 5 !important; }
  .hs-end { width: 60vw; }
}

/* ---------- Işık kapalı / açık karşılaştırma ---------- */
.compare { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 16 / 9; max-width: 100%; box-shadow: 0 30px 60px var(--shade); background: #111; --pos: 50%; user-select: none; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare .lit-img { clip-path: inset(0 0 0 var(--pos)); }
.compare.sweep .lit-img, .compare.sweep .cmp-line { transition: clip-path 2.2s cubic-bezier(.65, 0, .25, 1), left 2.2s cubic-bezier(.65, 0, .25, 1); }
.cmp-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: rgba(255,255,255,.9); box-shadow: 0 0 14px rgba(23,165,141,.8); pointer-events: none; }
.cmp-knob { position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.92); color: #141517;
  display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0,0,0,.3), 0 0 0 6px rgba(23,165,141,.25); transition: scale .3s var(--ease); }
.cmp-knob svg { width: 22px; height: 22px; }
.compare:hover .cmp-knob { scale: 1.06; }
.cmp-tag { position: absolute; top: 18px; padding: 8px 12px; border-radius: 99px; background: rgba(12,14,16,.55); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; }
.cmp-tag.off { left: 18px; }
.cmp-tag.on { right: 18px; color: #7fe3cf; }
.compare input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.compare:has(input:focus-visible) .cmp-knob { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--accent); }
@media (max-width: 860px) { .compare { aspect-ratio: 4 / 3; } .cmp-knob { width: 44px; height: 44px; } }

/* ---------- Sık sorulan sorular ---------- */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); }
.faq-intro { display: grid; gap: 22px; align-content: start; position: sticky; top: 120px; align-self: start; }
.faq { display: grid; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 24px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); transition: color .3s; }
.faq-item summary:hover h3 { color: var(--accent-text); }
.faq-item .pm { flex: none; position: relative; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); transition: background .4s var(--ease), border-color .4s; }
.faq-item .pm::before, .faq-item .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--text); border-radius: 2px; transition: transform .45s var(--ease), background .4s; }
.faq-item .pm::after { transform: rotate(90deg); }
.faq-item[open] .pm { background: var(--accent); border-color: var(--accent); }
.faq-item[open] .pm::before, .faq-item[open] .pm::after { background: #fff; }
.faq-item[open] .pm::after { transform: rotate(0deg); }
.faq-item p { color: var(--muted); padding-bottom: 26px; }
.faq-item[open] p { animation: faqin .6s var(--ease); }
@keyframes faqin { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 860px) { .faq-wrap { grid-template-columns: 1fr; } .faq-intro { position: static; } }

/* ---------- Hizmetler: kullanım alanları ve kutu harf rehberi ---------- */
.uses { color: var(--muted); font-size: .96rem; padding-top: 14px; border-top: 1px solid var(--line); }
.uses b { color: var(--text); font-weight: 600; }
.letters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 18px; }
.letter { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.letter .spec { color: var(--accent-text); }
.letter h3 { font-size: 1.55rem; }
.letter p { color: var(--muted); font-size: .96rem; }

/* ---------- Hakkımızda: sektörler ---------- */
.sectors { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 0 32px; }
.sectors > div { display: grid; gap: 6px; padding-block: 20px; border-top: 1px solid var(--line); }
.sectors dt { font: 700 1.35rem/1.05 var(--f-display); text-transform: uppercase; }
.sectors dd { margin: 0; color: var(--muted); font-size: .95rem; }

/* ---------- Tema düğmesi: güneş / ay ---------- */
.theme-toggle { flex: none; position: relative; width: 60px; height: 32px; padding: 0; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface-2); transition: background .5s var(--ease), border-color .5s var(--ease); }
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle .tt-knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--surface);
  box-shadow: 0 2px 8px var(--shade); display: grid; place-items: center; color: #e2a53a; transition: transform .55s cubic-bezier(.5, 1.6, .4, 1), background .5s, color .5s; }
.theme-toggle svg { width: 15px; height: 15px; grid-area: 1 / 1; transition: opacity .4s, transform .55s var(--ease); }
.theme-toggle .moon { opacity: 0; transform: rotate(-60deg) scale(.6); }
.theme-dark .theme-toggle .tt-knob { transform: translateX(28px); background: #0f1413; color: var(--accent); box-shadow: 0 0 12px rgba(44, 196, 168, .45); }
.theme-dark .theme-toggle .sun { opacity: 0; transform: rotate(60deg) scale(.6); }
.theme-dark .theme-toggle .moon { opacity: 1; transform: none; }
.theme-toggle .tt-stars { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s; }
.theme-toggle .tt-stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--accent); }
.theme-toggle .tt-stars i:nth-child(1) { left: 12px; top: 9px; } .theme-toggle .tt-stars i:nth-child(2) { left: 20px; top: 19px; } .theme-toggle .tt-stars i:nth-child(3) { left: 9px; top: 21px; }
.theme-dark .theme-toggle .tt-stars { opacity: 1; }
.nav-end { display: flex; align-items: center; gap: 14px; }
@media (max-width: 860px) { .nav-end { gap: 6px; } }
@media (min-width: 861px) { .nav .menu { margin-left: auto; } }

/* ---------- Logo: üzerine gelince öne çıkar, turkuaz çerçeve tabela gibi yanar ve üzerinden bir ışık süzülür ---------- */
.brand { position: relative; transform-origin: left center; transition: transform .55s cubic-bezier(.34, 1.4, .5, 1), filter .7s var(--ease); }
.brand:hover, .brand:focus-visible { transform: scale(1.08) translateY(-1px);
  filter: drop-shadow(0 0 5px rgba(23, 165, 141, .55)) drop-shadow(0 0 16px rgba(23, 165, 141, .3)) drop-shadow(0 8px 14px rgba(20, 21, 23, .12)); }
.brand::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  -webkit-mask: url(../img/logo.png) left center / contain no-repeat; mask: url(../img/logo.png) left center / contain no-repeat;
  background: linear-gradient(105deg, transparent 36%, rgba(23, 165, 141, .28) 44%, rgba(127, 227, 207, .85) 49%, rgba(225, 255, 248, .95) 50%, rgba(127, 227, 207, .85) 51%, rgba(23, 165, 141, .28) 56%, transparent 64%) 0 0 / 300% 100% no-repeat;
  background-position: 100% 0; }
.brand:hover::after, .brand:focus-visible::after { animation: logo-shine 1.3s cubic-bezier(.45, 0, .2, 1) .1s both; }
@keyframes logo-shine { 0% { opacity: 1; background-position: 100% 0; } 85% { opacity: 1; } 100% { opacity: 0; background-position: 0% 0; } }
.foot { position: relative; overflow: hidden; } /* imza alanındaki ışık hâlesi sayfa kenarlarına kadar uzanır, footer dışına taşmaz */
.stack.tilt.tilting { box-shadow: none; } /* üst üste iki foto: eğilirken kutu gölgesi değil, fotoğrafların kendi gölgeleri görünür */
@media (max-width: 560px) { .gallery { gap: 10px; --row: 150px; } }

/* ---------- Ana başlıktaki "sokakta": neon tabela gibi yumuşak bir hâle ve arada bir üzerinden geçen ışık ---------- */
.js .hero .hl .w {
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(100deg, var(--accent) 0%, var(--accent) 38%, #a8f3e4 48%, #e6fffa 50%, #a8f3e4 52%, var(--accent) 62%, var(--accent) 100%);
  background-size: 260% 100%; background-position: 100% 0;
  animation: rise 1.1s var(--ease) calc(var(--i) * 110ms + 150ms) forwards, hl-sheen 7s cubic-bezier(.45, 0, .25, 1) 2.6s infinite;
}
@keyframes hl-sheen { 0% { background-position: 100% 0; } 30%, 100% { background-position: 0% 0; } }
.hero .hl { transition: filter 1.8s var(--ease); }
.hero .hl.lit { animation: none; text-shadow: none;
  filter: drop-shadow(0 0 .06em rgba(23, 165, 141, .55)) drop-shadow(0 0 .35em rgba(23, 165, 141, .28)); }
.theme-dark .hero .hl.lit { filter: drop-shadow(0 0 .06em rgba(44, 196, 168, .7)) drop-shadow(0 0 .4em rgba(44, 196, 168, .35)); }

/* ---------- Hizmet kartları: her kartta imleci izleyen ışık farklı renkte, aynı yoğunlukta ---------- */
.services .svc:nth-child(1) { --c: 23, 165, 141; }   /* turkuaz (logo) */
.services .svc:nth-child(2) { --c: 52, 136, 232; }   /* gök mavisi */
.services .svc:nth-child(3) { --c: 132, 92, 236; }   /* mor */
.services .svc:nth-child(4) { --c: 230, 72, 150; }   /* neon pembe */
.services .svc:nth-child(5) { --c: 232, 148, 30; }   /* amber */
.services .svc:nth-child(6) { --c: 236, 92, 72; }    /* mercan */
.services .svc::before { background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--c, 23, 165, 141), .14), transparent 65%); }
.theme-dark .services .svc::before { background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--c, 23, 165, 141), .18), transparent 65%); }
.services .svc:hover { border-color: rgba(var(--c, 23, 165, 141), .75); }

/* ---------- Hakkımızda başlığı: yazı belirdikten sonra üzerinden bir kez renkli bir spot ışığı geçer ---------- */
@property --sx { syntax: "<percentage>"; inherits: true; initial-value: -60%; }
@property --tail { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
.sign.spot { animation: spot-sweep 1.9s cubic-bezier(.45, 0, .25, 1) forwards, spot-tail 2.6s ease-in-out 1.7s both; }
@keyframes spot-sweep { from { --sx: -10%; } to { --sx: 110%; } }
@keyframes spot-tail { from { --tail: 100%; } to { --tail: 0%; } }
/* Harf üstü işaretler (İ noktası, Ğ, Ö, Ü) kesilmesin: boyama alanı kelimenin üstüne ve altına taşar, yerleşim değişmez */
.sign.spectrum .w { padding-block: .18em; margin-block: -.18em; }
.sign.spot .w {
  color: transparent; -webkit-background-clip: text; background-clip: text; background-repeat: no-repeat;
  background-size: var(--hw, 100%) 100%; background-position: var(--ox, 0px) 0;
  background-image: linear-gradient(100deg,
    color-mix(in srgb, #17a58d var(--tail), var(--accent)) calc(var(--sx) - 64%),
    color-mix(in srgb, #3488e8 var(--tail), var(--accent)) calc(var(--sx) - 46%),
    color-mix(in srgb, #845cec var(--tail), var(--accent)) calc(var(--sx) - 30%),
    color-mix(in srgb, #e64896 var(--tail), var(--accent)) calc(var(--sx) - 15%),
    color-mix(in srgb, #e8941e var(--tail), var(--accent)) calc(var(--sx) - 4%),
    var(--text) calc(var(--sx) + 6%));
}
/* Işık geçtikten sonra başlık sitenin turkuaz yeşilinde kalır */
.sign.spectrum.spotted { color: var(--accent); }
.theme-dark .sign.spot .w { filter: none; }

/* ---------- Hakkımızda "kendi bünyemizde" kartları: üzerine gelince öne çıkıp küçük bir baş selamı verir ---------- */
.js .inhouse > div.rv.in { transition: opacity 1.3s var(--ease), transform .55s cubic-bezier(.34, 1.5, .5, 1), filter 1.3s var(--ease), box-shadow .5s var(--ease), border-color .4s; transition-delay: 0s; }
.js .inhouse > div.rv.in:hover { transform: translateY(-10px) scale(1.045); box-shadow: 0 22px 40px var(--shade); border-color: var(--accent); animation: salute .8s var(--ease) .05s; }
.inhouse > div { transform-origin: 50% 100%; }
@keyframes salute { 0% { rotate: 0deg; } 30% { rotate: -2.2deg; } 62% { rotate: 1.2deg; } 100% { rotate: 0deg; } }

/* Logo büyütüldü (Enes): menü yüksekliği de buna göre biraz arttı */
.nav .wrap { height: 100px; }
.nav.solid .wrap { height: 76px; }
.nav .brand img { height: 70px; }
.nav.solid .brand img { height: 54px; }
.hero { padding-top: 100px; }
@media (max-width: 860px) { .nav .wrap { height: 84px; } .nav.solid .wrap { height: 70px; } .nav .brand img, .nav.solid .brand img { height: 50px; } }

/* İletişim sayfasındayken "Teklif Al" butonu: yazı kaybolmasın, aktif sayfa olduğu turkuazla belli olsun */
.menu .btn[aria-current="page"] { color: var(--btn-hover-fg); background: var(--btn-hover-bg); border-color: var(--btn-hover-bg); }
@media (max-width: 860px) { .menu .btn[aria-current="page"] { color: var(--btn-hover-fg); } }

/* ---------- Dil düğmesi: Türk bayrağı / İngiliz bayrağı (tema düğmesiyle aynı ölçüde) ---------- */
.lang-toggle { flex: none; position: relative; display: block; width: 60px; height: 32px; border-radius: 99px; text-decoration: none;
  border: 1px solid var(--line-strong); background: var(--surface-2); transition: border-color .4s var(--ease); }
.lang-toggle:hover { border-color: var(--accent); }
.lang-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lang-toggle .lt-code { position: absolute; top: 50%; transform: translateY(-50%); font: 500 .66rem/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .06em; color: var(--muted); transition: opacity .3s; }
.lang-toggle .lt-tr { left: 9px; }
.lang-toggle .lt-en { right: 8px; }
.lang-toggle .lt-knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 2px 8px var(--shade), 0 0 0 1px rgba(0, 0, 0, .08); transition: transform .5s cubic-bezier(.5, 1.6, .4, 1); }
.lang-toggle .lt-flag { position: absolute; inset: 0; transition: opacity .35s; }
.lang-toggle .flag { display: block; width: 100%; height: 100%; }
.lang-toggle .lt-next { opacity: 0; }
/* Türkçe sayfada bayrak solda, EN yazısı sağda; İngilizce sayfada tersi */
.lang-toggle .lt-tr { opacity: 0; }
.lang-toggle.is-en .lt-tr { opacity: 1; } .lang-toggle.is-en .lt-en { opacity: 0; }
.lang-toggle.is-en .lt-knob { transform: translateX(28px); }
.lang-toggle:hover .lt-knob { box-shadow: 0 2px 10px var(--shade), 0 0 0 2px rgba(23, 165, 141, .35); }
/* tıklayınca düğme diğer tarafa kayar, bayrak değişir, sonra sayfa geçer */
.lang-toggle.go .lt-knob { transform: translateX(28px); }
.lang-toggle.is-en.go .lt-knob { transform: none; }
.lang-toggle.go .lt-cur { opacity: 0; } .lang-toggle.go .lt-next { opacity: 1; }
.lang-toggle.go .lt-code { opacity: 0; }
@media (max-width: 860px) { .lang-toggle { width: 54px; } .lang-toggle .lt-en { right: 6px; } .lang-toggle .lt-tr { left: 7px; }
  .lang-toggle.is-en .lt-knob, .lang-toggle.go .lt-knob { transform: translateX(22px); } .lang-toggle.is-en.go .lt-knob { transform: none; } }

/* ---------- Neon tabela (ana sayfa "yakalım."): ekrana gelince 80'ler neonu gibi cızırdayarak yanar, yanık kalır, ara ara (14 sn'de bir) kısa bir cızırtı yapar.
   Okunurluk için harflerin çevresinde koyu turuncu ince bir çerçeve var, parıltı da harfleri boğmayacak kadar dar ---------- */
:root { --neon: #ff6a14; --neon-off: #efd3c2; --neon-lit: #ff7420; --neon-edge: #9a3206;
  --neon-glow: 0 0 .08em rgba(255, 106, 20, .9), 0 0 .22em rgba(255, 106, 20, .55), 0 0 .5em rgba(255, 106, 20, .28); }
.theme-dark { --neon-off: #4a3020; --neon-lit: #ff8a3a; --neon-edge: #ffd2ad;
  --neon-glow: 0 0 .1em var(--neon), 0 0 .28em var(--neon), 0 0 .6em rgba(255, 106, 20, .5), 0 0 1.1em rgba(255, 106, 20, .28); }
.js .hl.neon { color: var(--neon-off); transition: none; text-shadow: none; -webkit-text-stroke: .045em transparent; paint-order: stroke fill; }
.js .hl.neon.lit { color: var(--neon-lit); -webkit-text-stroke-color: var(--neon-edge); text-shadow: var(--neon-glow);
  animation: neon-on 2.4s linear both, neon-flicker 14s 8s linear infinite; }
.theme-dark .hl.neon.lit { -webkit-text-stroke-width: .02em; }
@keyframes neon-on {
  0%, 5%, 9%, 13%, 24%, 31%, 47%, 52%, 68%, 71% { color: var(--neon-off); -webkit-text-stroke-color: transparent; text-shadow: none; }
  6%, 8%, 14%, 15.5%, 32%, 34%, 53%, 67%, 72%, 100% { color: var(--neon-lit); -webkit-text-stroke-color: var(--neon-edge); text-shadow: var(--neon-glow); }
  16%, 23% { color: #f3a878; -webkit-text-stroke-color: transparent; text-shadow: 0 0 .1em rgba(255, 106, 20, .4); }
  35%, 46% { color: #ff9a55; -webkit-text-stroke-color: var(--neon-edge); text-shadow: 0 0 .1em var(--neon), 0 0 .3em rgba(255, 106, 20, .45); }
}
/* tekrar: 14 sn'lik döngünün çoğunda yanık durur, sonunda yarım saniyelik kısa bir cızırtı */
@keyframes neon-flicker {
  0%, 93%, 93.8%, 95.6%, 96.4%, 100% { color: var(--neon-lit); -webkit-text-stroke-color: var(--neon-edge); text-shadow: var(--neon-glow); }
  93.4%, 95%, 96% { color: var(--neon-off); -webkit-text-stroke-color: transparent; text-shadow: none; }
  94.4% { color: #ff9a55; -webkit-text-stroke-color: var(--neon-edge); text-shadow: 0 0 .1em rgba(255, 106, 20, .45); }
}
@media (prefers-reduced-motion: reduce) { .js .hl.neon.lit { animation: none; } }
/* yalnızca ekran okuyucular için metin */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Telefon düzeltmeleri (8 Ekim 2026) */
@media (max-width: 760px) {
  /* Hizmetler sayfası: bölüm bağlantıları yana kayan düğmeler olur */
  .svc-jump { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; line-height: 1.2 !important; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; margin-bottom: 40px !important; -webkit-overflow-scrolling: touch; }
  .svc-jump::-webkit-scrollbar { display: none; }
  .svc-jump .sep { display: none; }
  .svc-jump a { flex: none; white-space: nowrap; text-decoration: none; padding: 11px 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--text); }
}
@media (max-width: 560px) {
  /* İşlerimiz: dar fotoğraflarda yazı sıkışmasın; ayrıntı büyütünce görünür */
  .g-item figcaption { padding: 30px 10px 9px; }
  .g-item figcaption b { font-size: 1rem; }
  .g-item figcaption .spec { display: none; }
}

/* Teklif formu: gönderildi onayı */
form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
form { position: relative; }
form.sent > :not(.form-done) { display: none; }
form.sent { grid-template-columns: 1fr; }
.form-done { display: grid; justify-items: center; text-align: center; gap: 12px; padding: clamp(28px, 6vw, 64px) 8px; animation: fd-in .7s var(--ease) both; }
.form-done[hidden] { display: none; }
.form-done h3 { font: 800 clamp(1.8rem, 4vw, 2.4rem)/1 var(--f-display); text-transform: uppercase; margin: 6px 0 0; }
.form-done p { color: var(--muted); margin: 0; }
.fd-ico { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); box-shadow: 0 0 0 8px var(--accent-soft); }
.fd-ico svg { width: 30px; height: 30px; stroke-dasharray: 24; stroke-dashoffset: 24; animation: fd-check .6s .35s var(--ease) forwards; }
.btn.sending { opacity: .6; pointer-events: none; }
@keyframes fd-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes fd-check { to { stroke-dashoffset: 0; } }

/* Konum butonu: küçük harita kartı, tıklayınca harita uygulaması açılır */
.map-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 12px; justify-self: start; margin-top: 4px; padding: 10px 14px 10px 10px; border: 1px solid var(--line); border-radius: 16px; text-decoration: none; color: var(--text);
  background:
    linear-gradient(115deg, transparent 46%, var(--accent-soft) 46% 54%, transparent 54%),
    linear-gradient(25deg, transparent 62%, rgba(127,140,138,.14) 62% 66%, transparent 66%),
    repeating-linear-gradient(0deg, transparent 0 17px, rgba(127,140,138,.10) 17px 18px),
    repeating-linear-gradient(90deg, transparent 0 17px, rgba(127,140,138,.10) 17px 18px),
    var(--surface);
  transition: border-color .3s, transform .4s var(--ease), box-shadow .4s var(--ease); }
.map-btn:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 12px 28px var(--shade); color: var(--text); }
.map-ico { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; box-shadow: 0 6px 16px rgba(23,165,141,.35); }
.map-ico::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); animation: map-ping 2.6s var(--ease) infinite; }
.map-ico svg { width: 20px; height: 20px; }
.map-txt { display: grid; line-height: 1.15; }
.map-txt b { font: 700 1.05rem/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.map-txt small { font: 400 .72rem/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.map-go { width: 16px; height: 16px; margin-left: 6px; color: var(--accent-text); transition: transform .4s var(--ease); }
.map-btn:hover .map-go { transform: translate(2px, -2px); }
@keyframes map-ping { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(1.7); opacity: 0; } }
.c-item .map-btn { margin-top: 8px; }

/* ---------- Katalog eklemeleri (v38): rakamlar, atölye, makine kartları, referans duvarı ---------- */
.services .svc:nth-child(7) { --c: 52, 136, 232; }
.services .svc:nth-child(8) { --c: 132, 92, 236; }
.services .svc:nth-child(9) { --c: 230, 72, 150; }
.services .svc:nth-child(10) { --c: 23, 165, 141; }
@media (min-width: 961px) { .services .svc:last-child:nth-child(3n+1) { grid-column: 1 / -1; } }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stat { display: grid; gap: 10px; align-content: start; padding: 26px 24px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); position: relative; overflow: hidden; }
.stat::after { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); opacity: .85; }
.stat b { font: 800 clamp(2.8rem, 5.4vw, 4.4rem)/.9 var(--f-display); color: var(--text); letter-spacing: .01em; display: flex; align-items: baseline; gap: 6px; }
.stat b small { font: 700 clamp(1rem, 1.6vw, 1.35rem)/1 var(--f-display); color: var(--accent-text); text-transform: uppercase; }
.stat span { color: var(--muted); font-size: .95rem; }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .stat { padding: 20px 16px 18px; } }

.shop-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
@media (max-width: 960px) { .shop-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.machines { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 18px; }
.m-card { display: grid; grid-template-rows: auto 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; min-width: 0; transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .4s; }
.m-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px var(--shade); border-color: var(--accent); }
.m-img { position: relative; background: #fff; aspect-ratio: 16 / 10; border-bottom: 1px solid var(--line); overflow: hidden; }
.m-img img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; transition: transform 1s var(--ease); }
.m-card:hover .m-img img { transform: scale(1.04); }
.m-body { display: grid; gap: 8px; align-content: start; padding: 18px 20px 22px; }
.m-body h3 { font-size: 1.45rem; }
.m-body p { color: var(--muted); font-size: .95rem; margin: 0; }
.m-body .spec { color: var(--accent-text); }
.shop-row .m-body { padding: 14px 16px 16px; }
.shop-row .m-body h3 { font-size: 1.15rem; }
@media (max-width: 560px) { .shop-row .m-body h3 { font-size: 1rem; } .shop-row .m-body .spec { font-size: .62rem; } }
.tags.media span { font-size: .8rem; padding: 10px 14px; }
html.theme-dark .m-img { filter: brightness(.93); }

/* İletişim */
.foot-addr { color: var(--muted); max-width: 30ch; }
.c-item .c-wa { font-size: .95rem; color: var(--accent-text); }

/* Referans duvarı: footer'da dev PROKAR yazısının altında */
.ref-wall { margin-top: clamp(40px, 6vw, 64px); display: grid; gap: 22px; }
.ref-head { display: grid; justify-items: center; gap: 10px; text-align: center; }
.ref-head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.ref-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.ref-grid li { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 10px; aspect-ratio: 16 / 9; transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s; }
.ref-grid li:hover { transform: translateY(-3px); box-shadow: 0 14px 28px var(--shade); border-color: var(--accent); }
.ref-grid img { position: absolute; inset: 0; margin: auto; max-width: 80%; max-height: 64%; width: auto; height: auto; }
html.theme-dark .ref-grid li { background: #fff; border-color: transparent; filter: brightness(.93); }
@media (max-width: 560px) { .ref-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .ref-grid li { border-radius: 8px; } .ref-grid img { max-width: 84%; max-height: 66%; } }

/* Menü: 5 bağlantı + Teklif Al, orta genişlikte sığsın */
@media (min-width: 861px) and (max-width: 1120px) { .menu { gap: 16px; } .menu a { font-size: .9rem; } .menu .btn { padding: 10px 16px; } }

/* Kutu harf türleri: üzerine gelince kart düz öne gelir, arkasında kendi pastel renginde ışık yanar (--lc kayıtlı bir renk değişkeni, burada --pc kullanılır) */
.letter { position: relative; transition: scale .5s var(--ease), box-shadow .5s var(--ease), border-color .4s; }
.letters .letter:nth-child(1) { --pc: 255, 160, 185; }   /* pastel pembe */
.letters .letter:nth-child(2) { --pc: 140, 195, 255; }   /* pastel mavi */
.letters .letter:nth-child(3) { --pc: 185, 160, 255; }   /* pastel lila */
.letters .letter:nth-child(4) { --pc: 120, 220, 185; }   /* pastel mint */
.letter:hover { scale: 1.05; z-index: 2; border-color: rgba(var(--pc), .9); box-shadow: 0 18px 46px -6px rgba(var(--pc), .75), 0 0 34px rgba(var(--pc), .45); }
@media (prefers-reduced-motion: reduce) { .letter:hover { scale: 1; } }