/* ==========================================================================
   Develoop Teknoloji · site stili
   Açık tema: kağıt beyazı zemin, mürekkep siyahı yazı, logodaki elektrik mavisi.
   Yazı: Bricolage Grotesque (gövde + başlık), Instrument Serif italik (vurgu),
   Martian Mono (etiket). Hareket js/site.js'te; burada yalnız durumlar.
   ========================================================================== */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  src: url(../fonts/bricolage-grotesque-latin-standard-normal.woff2) format('woff2-variations');
  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: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  src: url(../fonts/bricolage-grotesque-latin-ext-standard-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/instrument-serif-latin-400-italic.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: 'Instrument Serif';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/instrument-serif-latin-ext-400-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/instrument-serif-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/instrument-serif-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  src: url(../fonts/martian-mono-latin-standard-normal.woff2) format('woff2-variations');
  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: 'Martian Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  src: url(../fonts/martian-mono-latin-ext-standard-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Kiril (Rusça): Bricolage ve Instrument Serif'te Kiril yok. Aynı aile adına unicode-range ile
   Onest (grotesk) ve Cormorant italik (serif) bağlanır; Kiril harf geldiğinde tarayıcı bunları kullanır. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/onest-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-display: swap;
  font-weight: 300 700;
  src: url(../fonts/cormorant-cyrillic-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  src: url(../fonts/martian-mono-cyrillic-standard-normal.woff2) format('woff2-variations');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ---------- Jetonlar ---------- */
:root {
  --kagit: #F2EFEA;
  --kagit-2: #E8E3DC;
  --kagit-3: #FBFAF7;
  --murekkep: #0B0B0E;
  --murekkep-2: #34343A;
  --soluk: #7A766F;
  --cizgi: rgba(11, 11, 14, 0.12);
  --cizgi-guclu: rgba(11, 11, 14, 0.22);
  --mavi: #1B17FF;
  --mavi-koyu: #100CC4;
  --beyaz: #FFFFFF;
  --amber: #F5A524;

  --f-sans: 'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-serif: 'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif;
  --f-mono: 'Martian Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --kenar: clamp(18px, 3.2vw, 56px);
  --ust-h: 76px;
  --r-kart: clamp(22px, 2.2vw, 34px);
  --yay: cubic-bezier(0.16, 1, 0.3, 1);
  --yay-io: cubic-bezier(0.76, 0, 0.24, 1);

  color-scheme: light;
}

/* ---------- Taban ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
html.kilit { overflow: hidden; }

body {
  margin: 0;
  background: var(--kagit);
  color: var(--murekkep);
  font-family: var(--f-sans);
  font-size: clamp(16px, 0.35vw + 14.6px, 18px);
  line-height: 1.5;
  font-weight: 400;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
em { font-style: normal; }
::selection { background: var(--mavi); color: var(--beyaz); }
:focus-visible { outline: 2px solid var(--mavi); outline-offset: 3px; border-radius: 6px; }

.kap { width: 100%; max-width: 1840px; margin-inline: auto; padding-inline: var(--kenar); }
.mono {
  font-family: var(--f-mono);
  font-size: 11px;
  line-height: 1.5;
  font-weight: 400;
  font-stretch: 87.5%;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.serif { font-family: var(--f-serif); font-style: italic; font-weight: 400; }
.gizli {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.atla {
  position: fixed; left: 12px; top: 12px; z-index: 300; padding: 10px 16px;
  background: var(--murekkep); color: var(--beyaz); border-radius: 999px;
  transform: translateY(-160%); transition: transform 0.3s var(--yay);
}
.atla:focus { transform: none; }

/* Başlıklarda serif italik vurgu */
.bolum-baslik em, .ara-baslik em, .hizmet-baslik em, .manifesto em, .preactra-slogan em, .giris-baslik em, .iletisim-baslik em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
  padding-right: 0.04em;
}
.bolum-baslik em, .ara-baslik em, .hizmet-baslik em, .manifesto em, .preactra-slogan em { color: var(--mavi); }

/* SplitText maskeleri: inen harflerin altı kesilmesin */
.satir-mask, [data-satir] > div { padding-bottom: 0.08em; margin-bottom: -0.08em; }

/* Film greni */
.tane {
  position: fixed; inset: -50%; z-index: 120; pointer-events: none; opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: tane 1.2s steps(6) infinite;
}
@keyframes tane {
  0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -5%); }
  60% { transform: translate(-6%, -2%); } 80% { transform: translate(5%, 4%); } 100% { transform: translate(0, 0); }
}

/* ---------- İmleç ---------- */
html.imlec-aktif, html.imlec-aktif a, html.imlec-aktif button, html.imlec-aktif label, html.imlec-aktif [data-imlec] { cursor: none; }
html.imlec-aktif input, html.imlec-aktif textarea { cursor: text; }
.imlec { position: fixed; left: 0; top: 0; z-index: 250; pointer-events: none; opacity: 0; transition: opacity 0.3s; }
.imlec.gorunur { opacity: 1; }
.imlec-nokta, .imlec-halka { position: fixed; left: 0; top: 0; border-radius: 50%; }
.imlec-nokta { width: 9px; height: 9px; background: var(--mavi); transition: transform 0.35s var(--yay), background-color 0.3s, opacity 0.3s; }
.imlec-halka {
  width: 40px; height: 40px; border: 1px solid rgba(11, 11, 14, 0.28);
  display: grid; place-items: center;
  transition: width 0.55s var(--yay), height 0.55s var(--yay), background-color 0.4s, border-color 0.4s, opacity 0.3s;
}
.imlec-yazi { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--beyaz); opacity: 0; transform: scale(0.6); transition: opacity 0.3s, transform 0.5s var(--yay); white-space: nowrap; }
.imlec[data-durum='link'] .imlec-halka { width: 68px; height: 68px; border-color: var(--mavi); background: rgba(27, 23, 255, 0.07); }
.imlec[data-durum='link'] .imlec-nokta { transform: scale(0.6); }
.imlec[data-durum='medya'] .imlec-halka { width: 108px; height: 108px; background: var(--mavi); border-color: var(--mavi); }
.imlec[data-durum='medya'] .imlec-yazi { opacity: 1; transform: none; }
.imlec[data-durum='medya'] .imlec-nokta { opacity: 0; }
.imlec[data-durum='yazi'] .imlec-halka, .imlec[data-durum='yazi'] .imlec-nokta { opacity: 0; }
.imlec.acik .imlec-halka { border-color: rgba(255, 255, 255, 0.5); }
.imlec.acik .imlec-nokta { background: var(--beyaz); }
.imlec.acik[data-durum='link'] .imlec-halka { border-color: var(--beyaz); background: rgba(255, 255, 255, 0.12); }
.imlec.acik[data-durum='medya'] .imlec-halka { background: var(--beyaz); border-color: var(--beyaz); }
.imlec.acik[data-durum='medya'] .imlec-yazi { color: var(--mavi); }

/* ---------- Açılış perdesi ---------- */
.perde { display: none; }
html.js .perde {
  position: fixed; inset: 0; z-index: 160; display: grid; place-items: center;
  background: var(--kagit); color: var(--murekkep);
  animation: perde-kacis 0.4s 6s forwards; /* JS çalışmazsa sayfa kilitli kalmasın */
}
html.js .perde.calisiyor { animation: none; }
@keyframes perde-kacis { to { opacity: 0; visibility: hidden; } }
.perde-sahne { width: clamp(84px, 11vw, 150px); }
.perde-isaret { width: 100%; height: auto; overflow: visible; }
.perde-kapsul { fill: var(--mavi); }
.perde-nokta { fill: var(--mavi); }
.perde-alt {
  position: absolute; left: var(--kenar); right: var(--kenar); bottom: clamp(18px, 4vh, 44px);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
}
.perde-not { color: var(--soluk); }
.perde-sayac {
  font-size: clamp(64px, 11vw, 190px); line-height: 0.78; font-weight: 500; font-stretch: 85%;
  letter-spacing: -0.06em; font-variant-numeric: tabular-nums;
}
.perde-sayac sup { font-size: 0.28em; vertical-align: top; margin-left: 0.06em; letter-spacing: 0; }

/* ---------- Üst çubuk ---------- */
.ust {
  position: fixed; inset: 0 0 auto 0; z-index: 90; height: var(--ust-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-inline: var(--kenar);
  transition: transform 0.7s var(--yay), color 0.4s;
}
.ust::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(242, 239, 234, 0.74);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--cizgi);
  opacity: 0; transition: opacity 0.5s, background-color 0.4s;
}
.ust.ust-dolu::before { opacity: 1; }
.ust.gizle { transform: translateY(-110%); }
.ust.ust-acik { color: var(--beyaz); }
.ust.ust-acik::before { background: rgba(27, 23, 255, 0.55); border-color: rgba(255, 255, 255, 0.16); }
.ust-logo { display: flex; align-items: center; height: 40px; }
.ust-logo-svg { height: 31px; width: auto; aspect-ratio: 1872 / 352; color: var(--murekkep); transition: color 0.4s; }
.ust.ust-acik .ust-logo { --logo-isaret: var(--beyaz); }
.ust.ust-acik .ust-logo-svg { color: var(--beyaz); }
.ust-nav { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: clamp(20px, 2.4vw, 40px); font-size: 15px; font-weight: 500; }
.ust-sag { display: flex; align-items: center; gap: 18px; }
.ust-saat { opacity: 0.7; }
.dil-secici { display: flex; align-items: center; gap: 2px; }
.dil-secici a { padding: 6px 8px; border-radius: 999px; opacity: 0.5; transition: opacity 0.3s, background-color 0.4s, color 0.4s; }
@media (hover: hover) { .dil-secici a:hover { opacity: 1; } }
.dil-secici a[aria-current='page'] { opacity: 1; background: var(--murekkep); color: var(--kagit); }
.ust.ust-acik .dil-secici a[aria-current='page'] { background: var(--beyaz); color: var(--mavi); }

/* Yazı yuvarlama bağlantısı */
.kay { display: inline-flex; overflow: hidden; vertical-align: top; line-height: 1.3; }
.kay > span { display: block; position: relative; transition: transform 0.6s var(--yay); }
.kay > span::after { content: attr(data-yazi); position: absolute; left: 0; top: 100%; }
@media (hover: hover) { .kay:hover > span { transform: translateY(-100%); } }

.menu-dugme { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--cizgi-guclu); position: relative; }
.menu-dugme > span:not(.gizli) { position: absolute; left: 14px; right: 14px; height: 1.5px; background: currentColor; transition: transform 0.5s var(--yay); }
.menu-dugme > span:nth-child(1) { top: 19px; }
.menu-dugme > span:nth-child(2) { top: 25px; }
html.menu-acik .menu-dugme > span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
html.menu-acik .menu-dugme > span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

.mobil-menu {
  position: fixed; inset: 0; z-index: 80; background: var(--kagit);
  padding: calc(var(--ust-h) + 4vh) var(--kenar) 5vh;
  display: flex; flex-direction: column; justify-content: space-between;
}
.mobil-menu[hidden] { display: none; }
.mobil-menu nav { display: flex; flex-direction: column; }
.mobil-menu nav a {
  display: flex; align-items: baseline; gap: 14px; overflow: hidden;
  font-size: clamp(44px, 13vw, 88px); line-height: 1.04; font-weight: 500; letter-spacing: -0.05em; font-stretch: 90%;
  border-bottom: 1px solid var(--cizgi); padding: 1.2vh 0;
}
.mobil-menu nav a small { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--mavi); }
.mobil-alt { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.mobil-alt > p { color: var(--soluk); }
.mobil-alt .dil-secici a { padding: 10px 12px; font-size: 12px; }

/* ---------- Düğmeler ---------- */
.dugme {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 12px;
  height: 50px; padding: 0 7px 0 22px; border-radius: 999px;
  font-size: 15px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap;
  transition: color 0.5s var(--yay), border-color 0.5s;
  will-change: transform;
}
.dugme::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 100%;
  width: 150%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, 0) scale(0); transition: transform 0.7s var(--yay);
}
@media (hover: hover) { .dugme:hover::before { transform: translate(-50%, -55%) scale(1); } }
.dugme-ok { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; transition: background-color 0.5s, color 0.5s, transform 0.6s var(--yay); }
.dugme-ok svg { width: 17px; height: 17px; transition: transform 0.6s var(--yay); }
@media (hover: hover) { .dugme:hover .dugme-ok svg { transform: rotate(-45deg); } }

.dugme-koyu { background: var(--murekkep); color: var(--beyaz); }
.dugme-koyu::before { background: var(--mavi); }
.dugme-koyu .dugme-ok { background: var(--beyaz); color: var(--murekkep); }
.dugme-mavi { background: var(--mavi); color: var(--beyaz); }
.dugme-mavi::before { background: var(--murekkep); }
.dugme-mavi .dugme-ok { background: var(--beyaz); color: var(--mavi); }
.dugme-cizgi { padding: 0 24px; border: 1px solid var(--cizgi-guclu); }
.dugme-cizgi::before { background: var(--murekkep); }
@media (hover: hover) { .dugme-cizgi:hover { color: var(--beyaz); border-color: var(--murekkep); } }
.dugme-beyaz { background: var(--beyaz); color: var(--mavi); }
.dugme-beyaz::before { background: var(--murekkep); }
.dugme-beyaz .dugme-ok { background: var(--mavi); color: var(--beyaz); }
@media (hover: hover) { .dugme-beyaz:hover { color: var(--beyaz); } .dugme-beyaz:hover .dugme-ok { background: var(--beyaz); color: var(--murekkep); } }
.dugme-buyuk { height: 66px; padding-left: 30px; font-size: 18px; }
.dugme-buyuk .dugme-ok { width: 50px; height: 50px; }
.ust.ust-acik .dugme-koyu { background: var(--beyaz); color: var(--mavi); }
.ust.ust-acik .dugme-koyu .dugme-ok { background: var(--mavi); color: var(--beyaz); }
.ust.ust-acik .menu-dugme { border-color: rgba(255, 255, 255, 0.4); }

/* ---------- Ortak bölüm parçaları ---------- */
.etiket { display: flex; gap: 10px; color: var(--soluk); margin-bottom: clamp(20px, 3.5vh, 40px); }
.etiket span { color: var(--mavi); }
.bolum-baslik {
  font-size: clamp(50px, 7.4vw, 152px); line-height: 0.9; font-weight: 500; font-stretch: 90%;
  letter-spacing: -0.046em;
}
.ara-baslik {
  font-size: clamp(36px, 4.4vw, 86px); line-height: 0.96; font-weight: 500; font-stretch: 90%;
  letter-spacing: -0.045em;
}
.bolum-metin { max-width: 38ch; font-size: clamp(17px, 1.1vw, 20px); color: var(--murekkep-2); }
.nabiz { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); position: relative; flex: none; }
.nabiz::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid currentColor; color: inherit; animation: nabiz 1.8s var(--yay) infinite; }
@keyframes nabiz { from { transform: scale(0.4); opacity: 1; } to { transform: scale(2); opacity: 0; } }
.nokta-isaret { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mavi); margin-right: 10px; vertical-align: 1px; }
.hap { border: 1px solid var(--cizgi-guclu); border-radius: 999px; padding: 6px 12px; }

/* ==========================================================================
   00 · Giriş
   ========================================================================== */
.giris { position: relative; height: 100svh; min-height: 660px; overflow: hidden; }
.giris-medya { position: absolute; inset: 0; overflow: hidden; transform-origin: 50% 0; will-change: transform; }
.giris-medya-ic { position: absolute; inset: -2%; will-change: transform; }
.giris-medya-ic picture, .giris-medya-ic img, .giris-medya-ic video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 55%; }
video { opacity: 0; transition: opacity 1.2s var(--yay); }
video.hazir { opacity: 1; }
.giris-sis {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(242, 239, 234, 0.72) 0%, rgba(242, 239, 234, 0.32) 34%, rgba(242, 239, 234, 0) 56%),
    linear-gradient(180deg, rgba(242, 239, 234, 0) 62%, rgba(242, 239, 234, 0.55) 86%, var(--kagit) 100%);
}
.giris-ic {
  position: relative; height: 100%;
  display: grid; grid-template-rows: auto 1fr auto;
  padding-top: calc(var(--ust-h) + 3vh); padding-bottom: clamp(24px, 5vh, 56px);
}
.giris-ust { color: var(--murekkep-2); }
.giris-baslik {
  align-self: end; margin-bottom: clamp(20px, 4vh, 48px);
  font-size: clamp(44px, 6.2vw, 128px); line-height: 0.9; font-weight: 500; font-stretch: 90%;
  letter-spacing: -0.042em; max-width: 9.5em;
}
.g-satir { display: block; overflow: hidden; padding: 0 0.08em 0.1em 0; margin-bottom: -0.1em; }
.g-ic { display: inline-block; will-change: transform; }
.g-donen { font-size: 1.62em; line-height: 0.86; margin-block: -0.02em 0.02em; perspective: 600px; }
.donen {
  position: relative; font-family: var(--f-serif); font-style: italic; font-weight: 400;
  letter-spacing: -0.025em; color: var(--mavi); white-space: nowrap;
}
.donen-k { display: inline-block; white-space: nowrap; }
.donen-k + .donen-k { position: absolute; left: 0; top: 0; }
.donen .char { display: inline-block; transform-origin: 50% 100%; }

.giris-alt { display: flex; align-items: flex-end; gap: clamp(24px, 4vw, 72px); max-width: 64vw; }
.giris-metin { max-width: 40ch; color: var(--murekkep-2); }
.giris-dugmeler { display: flex; gap: 10px; flex-wrap: wrap; flex: none; }

.kaydir { position: absolute; right: var(--kenar); bottom: clamp(24px, 5vh, 56px); width: 118px; height: 118px; display: grid; place-items: center; }
.kaydir-halka { position: absolute; inset: 0; width: 100%; height: 100%; animation: don 16s linear infinite; }
.kaydir-halka text { font-family: var(--f-mono); font-size: 9.6px; letter-spacing: 0; /* aralığı textLength dağıtır */ text-transform: uppercase; fill: var(--murekkep); font-stretch: 87.5%; }
.kaydir-isaret { width: 32px; height: auto; color: var(--mavi); transition: transform 0.6s var(--yay); }
@media (hover: hover) { .kaydir:hover .kaydir-isaret { transform: translateY(6px) rotate(20deg); } }
@keyframes don { to { transform: rotate(360deg); } }

/* ---------- Kayan bant ---------- */
.bant {
  overflow: hidden; padding: clamp(28px, 5vh, 64px) 0; user-select: none;
  font-size: clamp(56px, 9.2vw, 176px); line-height: 1; font-weight: 500; font-stretch: 86%; letter-spacing: -0.05em;
}
.bant-ray { display: flex; width: max-content; will-change: transform; }
.bant-grup { display: flex; align-items: center; gap: 0.32em; padding-right: 0.32em; white-space: nowrap; }
.bant-grup .bos { color: transparent; -webkit-text-stroke: 1.4px var(--murekkep); }
.bant-isaret { height: 0.56em; width: auto; color: var(--mavi); transform: rotate(var(--don, 0deg)); }

/* ==========================================================================
   01 · Yaklaşım
   ========================================================================== */
.yaklasim { padding-block: clamp(80px, 16vh, 200px) clamp(80px, 14vh, 180px); }
.manifesto {
  font-size: clamp(30px, 4.25vw, 84px); line-height: 1.06; font-weight: 450; font-stretch: 94%;
  letter-spacing: -0.038em; text-indent: 18%;
}
.manifesto em { font-size: 1.08em; }
.manifesto .k { display: inline-block; text-indent: 0; }
.manifesto > * { text-indent: 0; }
.satir-gorsel {
  display: inline-block; width: 1.9em; height: 0.8em; border-radius: 999px; overflow: hidden;
  vertical-align: -0.06em; margin-inline: 0.06em; background: var(--kagit-2); text-indent: 0;
}
.satir-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.yaklasim-alt { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(28px, 6vw, 110px); margin-top: clamp(64px, 14vh, 180px); align-items: end; }
.mobius { position: relative; border-radius: var(--r-kart); overflow: hidden; aspect-ratio: 16 / 10; background: var(--kagit-2); }
.mobius-ic { position: absolute; inset: -10% 0; }
.mobius-ic picture, .mobius-ic img, .mobius-ic video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.yaklasim-yan { display: grid; gap: 22px; color: var(--murekkep-2); max-width: 46ch; }
.buyuk-not { font-size: clamp(28px, 2.6vw, 48px); line-height: 1.04; letter-spacing: -0.035em; color: var(--murekkep); font-weight: 500; font-stretch: 92%; }
.buyuk-not .serif { color: var(--mavi); letter-spacing: -0.01em; }
.ozet-liste { border-top: 1px solid var(--murekkep); margin-top: 8px; }
.ozet-liste li { display: flex; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--cizgi); color: var(--murekkep); }
.ozet-liste li span:last-child { color: var(--mavi); }

/* ==========================================================================
   02 · Hizmetler (yapışkan yığın)
   ========================================================================== */
.hizmetler { padding-top: clamp(40px, 8vh, 100px); }
.hizmetler-bas { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px 6vw; align-items: end; }
.hizmetler-bas .etiket { grid-column: 1 / -1; margin-bottom: 0; }
.yigin { display: flex; flex-direction: column; gap: 5vh; padding-block: clamp(48px, 9vh, 120px) clamp(80px, 14vh, 180px); }
.hizmet {
  --karart: 0;
  position: sticky; top: calc(var(--ust-h) + 1.4vh + var(--i, 0) * 1.3vh);
  height: calc(100svh - var(--ust-h) - 7vh); min-height: 560px; max-height: 980px;
  display: grid; grid-template-columns: 1.08fr 0.92fr;
  border-radius: var(--r-kart); overflow: hidden;
  background: var(--kagit-3); border: 1px solid var(--cizgi);
  box-shadow: 0 40px 90px -50px rgba(11, 11, 14, 0.32);
  transform-origin: 50% 0; will-change: transform;
}
.hizmet::after {
  content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit;
  background: var(--murekkep); opacity: var(--karart);
}
.hizmet-metin { padding: clamp(26px, 3.4vw, 64px); display: flex; flex-direction: column; min-height: 0; }
.hizmet-ust { display: flex; align-items: center; gap: 14px; }
.hizmet-no { color: var(--mavi); }
.hizmet-baslik {
  margin: auto 0 clamp(16px, 2.6vh, 32px);
  font-size: clamp(36px, 4.3vw, 88px); line-height: 0.94; font-weight: 500; font-stretch: 88%; letter-spacing: -0.05em;
  max-width: 11em;
}
.hizmet-metin > p { max-width: 48ch; color: var(--murekkep-2); }
.hizmet-liste { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(18px, 3vh, 36px); }
.hizmet-liste li { border: 1px solid var(--cizgi-guclu); border-radius: 999px; padding: 8px 14px; font-size: 14px; line-height: 1.2; }
.hizmet-medya { position: relative; margin: 12px 12px 12px 0; border-radius: calc(var(--r-kart) - 8px); overflow: hidden; background: var(--kagit-2); }
.hizmet-medya-ic { position: absolute; inset: 0; will-change: transform; }
.hizmet-medya-ic picture, .hizmet-medya-ic img, .hizmet-medya-ic video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hizmet-mavi { background: var(--mavi); color: var(--beyaz); border-color: transparent; }
.hizmet-mavi .hizmet-no, .hizmet-mavi .hizmet-baslik em { color: var(--beyaz); }
.hizmet-mavi .hizmet-metin > p { color: rgba(255, 255, 255, 0.84); }
.hizmet-mavi .hap, .hizmet-mavi .hizmet-liste li { border-color: rgba(255, 255, 255, 0.36); }

/* ==========================================================================
   03 · Preactra
   ========================================================================== */
.preactra {
  position: relative; padding-block: clamp(80px, 16vh, 200px) clamp(80px, 12vh, 160px); overflow: hidden;
  background-image: linear-gradient(var(--cizgi) 1px, transparent 1px), linear-gradient(90deg, var(--cizgi) 1px, transparent 1px);
  background-size: 88px 88px; background-position: center top;
}
.preactra::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 55%, rgba(242, 239, 234, 0) 0%, var(--kagit) 78%);
}
.preactra > * { position: relative; }
.preactra-ust { display: grid; grid-template-columns: 1.25fr 1fr; gap: 28px 5vw; align-items: end; }
.preactra-ad { margin: 0; line-height: 0; }
.preactra-logo-mask { display: block; overflow: hidden; padding-bottom: 0.4%; }
.preactra-logo { display: block; width: clamp(280px, 48vw, 940px); height: auto; margin-left: -0.6%; will-change: transform; }
.preactra-tanim { display: grid; gap: 20px; justify-items: start; padding-bottom: 1vh; color: var(--murekkep-2); }
.preactra-slogan { font-size: clamp(24px, 2.2vw, 40px); line-height: 1.06; letter-spacing: -0.03em; color: var(--murekkep); font-weight: 500; font-stretch: 92%; }
.preactra-sahne { margin-top: clamp(60px, 12vh, 150px); padding-inline: var(--kenar); perspective: 1700px; }
.preactra-cerceve { position: relative; max-width: 1240px; margin-inline: auto; transform-style: preserve-3d; transform-origin: 50% 80%; will-change: transform; }
.tarayici { border-radius: 18px; overflow: hidden; background: var(--beyaz); box-shadow: 0 70px 140px -50px rgba(11, 11, 14, 0.42), 0 0 0 1px rgba(11, 11, 14, 0.08); }
.tarayici-ust { height: 42px; display: flex; align-items: center; gap: 7px; padding: 0 16px; background: #FAF9F6; border-bottom: 1px solid var(--cizgi); }
.tarayici-ust i { width: 11px; height: 11px; border-radius: 50%; background: #E2DDD5; }
.tarayici-ust span { margin-inline: auto; padding: 5px 48px; border-radius: 7px; background: var(--kagit); color: var(--soluk); font-size: 10px; text-transform: none; }
.tarayici img { width: 100%; }
.telefon {
  position: absolute; right: -2.5%; bottom: -12%; width: 20%; border-radius: clamp(18px, 2.6vw, 40px); overflow: hidden;
  border: clamp(4px, 0.6vw, 9px) solid var(--murekkep); background: var(--murekkep);
  box-shadow: 0 50px 90px -30px rgba(11, 11, 14, 0.5);
}
.cip {
  position: absolute; display: flex; align-items: center; gap: 9px; white-space: nowrap;
  padding: 10px 16px 10px 12px; border-radius: 999px; background: var(--beyaz); border: 1px solid var(--cizgi);
  font-size: 14px; font-weight: 500; box-shadow: 0 18px 44px -20px rgba(11, 11, 14, 0.4);
}
.cip img { height: 18px; width: auto; max-width: 70px; }
.cip-yazi { padding: 12px 18px; }
.cip-yazi img { height: 17px; max-width: 110px; }
.cip-mavi { background: var(--mavi); color: var(--beyaz); border-color: transparent; }
.cip-mavi img { filter: invert(1); }
.cip-amber { background: #FFF6E6; border-color: #F3C77A; color: #6A4300; }
.cip-amber .nabiz { color: var(--amber); }
.c1 { left: -5%; top: 14%; }
.c2 { left: -8%; top: 48%; }
.c3 { left: 7%; bottom: -5%; }
.c4 { right: -6%; top: 6%; }
.c5 { right: 22%; top: -4%; }
.c6 { right: -9%; top: 36%; }
.c7 { left: 26%; top: -3.5%; }
.not { text-align: center; color: var(--soluk); margin-top: clamp(64px, 12vh, 140px); }
.preactra-ozellik { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 2.4vw; margin-top: clamp(40px, 6vh, 80px); }
.preactra-ozellik article { border-top: 1px solid var(--murekkep); padding-top: 22px; }
.preactra-ozellik span { color: var(--mavi); }
.preactra-ozellik h3 { font-size: clamp(22px, 1.7vw, 30px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; margin: 16px 0 10px; }
.preactra-ozellik p { font-size: 15.5px; color: var(--murekkep-2); }

/* ==========================================================================
   04 · Referanslar
   ========================================================================== */
.referanslar { padding-block: clamp(80px, 14vh, 180px); }
.markalar-bas { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px 6vw; align-items: end; }
.markalar-bas p { max-width: 42ch; color: var(--murekkep-2); }
.marka-izgara { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(36px, 6vh, 72px); border-top: 1px solid var(--cizgi-guclu); border-left: 1px solid var(--cizgi-guclu); }
.marka { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; border-right: 1px solid var(--cizgi-guclu); border-bottom: 1px solid var(--cizgi-guclu); }
.marka img { position: relative; z-index: 2; max-width: 50%; max-height: 40%; width: auto; object-fit: contain; filter: grayscale(1) brightness(0.32) contrast(1.2); transition: filter 0.5s, transform 0.8s var(--yay); }
.marka.kare img { max-height: 54%; }
.marka-is { position: absolute; z-index: 2; left: 16px; top: 14px; color: var(--soluk); transition: color 0.4s; }
.marka.ustunde .marka-is { color: rgba(255, 255, 255, 0.72); }
.marka-davet { display: block; }
.marka-davet a {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  padding: clamp(16px, 1.6vw, 26px); background: var(--murekkep); color: var(--beyaz); transition: background-color 0.6s var(--yay);
}
.marka-davet .mono { color: rgba(255, 255, 255, 0.6); }
.marka-davet strong { font-size: clamp(30px, 3vw, 58px); line-height: 0.95; font-weight: 500; font-stretch: 90%; letter-spacing: -0.045em; }
.davet-ok { position: absolute; top: clamp(14px, 1.4vw, 22px); right: clamp(14px, 1.4vw, 22px); width: 46px; height: 46px; border-radius: 50%; background: var(--mavi); display: grid; place-items: center; transition: transform 0.7s var(--yay), background-color 0.5s; }
.davet-ok svg { width: 20px; height: 20px; transform: rotate(-45deg); transition: transform 0.7s var(--yay); }
@media (hover: hover) {
  .marka-davet a:hover { background: var(--mavi); }
  .marka-davet a:hover .davet-ok { background: var(--beyaz); color: var(--mavi); transform: scale(1.1); }
  .marka-davet a:hover .davet-ok svg { transform: rotate(0deg); }
}
.marka-dolgu { position: absolute; inset: 0; z-index: 1; background: var(--mavi); transform: translateY(101%); }
.marka-ad { position: absolute; z-index: 2; left: 18px; bottom: 14px; color: var(--beyaz); opacity: 0; transform: translateY(10px); transition: opacity 0.4s, transform 0.6s var(--yay); }
.marka.ustunde img { filter: brightness(0) invert(1); transform: scale(1.06); }
.marka.ustunde .marka-ad { opacity: 1; transform: none; }

/* Çözüm ortaklarımız (girişin hemen altında) */
.ortaklar { position: relative; padding-block: clamp(56px, 10vh, 130px) clamp(40px, 8vh, 110px); }
.ortaklar-bas { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px 6vw; align-items: end; }
.ortaklar-bas .etiket { grid-column: 1 / -1; margin-bottom: 0; }
.ortaklar-bas p { max-width: 44ch; color: var(--murekkep-2); }
.logo-bant {
  display: grid; gap: 14px; margin-top: clamp(40px, 7vh, 90px); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.logo-ray { display: flex; width: max-content; will-change: transform; }
.logo-grup { display: flex; gap: 14px; padding-right: 14px; }
.logo-hap {
  display: inline-flex; align-items: center; gap: 12px; height: clamp(54px, 5.4vw, 72px); padding: 0 28px 0 22px;
  border-radius: 999px; background: var(--kagit-3); border: 1px solid var(--cizgi);
  font-size: clamp(15px, 1.1vw, 19px); font-weight: 500; letter-spacing: -0.015em; white-space: nowrap;
}
.logo-hap img { height: 24px; width: auto; max-width: 92px; object-fit: contain; filter: grayscale(1) contrast(1.1); }
.logo-hap-yazi { padding-inline: 30px; }
.logo-hap-yazi img { height: 26px; max-width: 132px; filter: grayscale(1) brightness(0.25); }

/* ==========================================================================
   05 · Süreç: döngü
   ========================================================================== */
.dongu { position: relative; height: 380vh; }
.dongu-sahne { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.dongu-ic { display: grid; grid-template-columns: 1fr 1fr; gap: 4vw; align-items: center; }
.dongu-adimlar { margin-top: clamp(28px, 5vh, 64px); border-bottom: 1px solid var(--cizgi); max-width: 620px; }
.adim { display: grid; grid-template-columns: 64px 1fr; padding: clamp(14px, 2.2vh, 26px) 0; border-top: 1px solid var(--cizgi); opacity: 0.3; transition: opacity 0.6s var(--yay); }
.adim-no { color: var(--mavi); padding-top: 0.9em; }
.adim h3 { font-size: clamp(26px, 2.4vw, 44px); line-height: 1.05; font-weight: 500; letter-spacing: -0.035em; }
.adim p { color: var(--murekkep-2); max-width: 46ch; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.8s var(--yay), opacity 0.6s, margin 0.8s var(--yay); }
.adim.aktif { opacity: 1; }
.adim.aktif p { max-height: 9em; opacity: 1; margin-top: 10px; }
.dongu-sag { position: relative; width: min(40vw, 74svh); aspect-ratio: 1; justify-self: center; }
.halka { width: 100%; height: 100%; overflow: visible; }
.halka-iz { fill: none; stroke: var(--cizgi-guclu); stroke-width: 1.5; stroke-dasharray: 2 9; stroke-linecap: round; }
.halka-dolu { fill: none; stroke: var(--mavi); stroke-width: 3; stroke-dasharray: 1 1; stroke-dashoffset: 1; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 300px 300px; }
.halka-dugumler circle { fill: var(--kagit); stroke: var(--murekkep); stroke-width: 1.5; transition: fill 0.4s, stroke 0.4s; }
.halka-dugumler circle.ulasti { fill: var(--mavi); stroke: var(--mavi); }
.halka-etiketler text { font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.1em; fill: var(--soluk); font-stretch: 87.5%; }
.halka-top { fill: var(--mavi); filter: drop-shadow(0 8px 18px rgba(27, 23, 255, 0.45)); }
.halka-merkez { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; pointer-events: none; }
.halka-sayi { font-size: clamp(110px, 13vw, 260px); line-height: 0.9; letter-spacing: -0.04em; display: block; }
.halka-alt { color: var(--soluk); }

/* ==========================================================================
   06 · İlkeler
   ========================================================================== */
.ilkeler { padding-block: clamp(80px, 16vh, 200px) clamp(80px, 16vh, 200px); }
.ilke-liste { margin-top: clamp(40px, 8vh, 100px); border-top: 1px solid var(--murekkep); }
.ilke {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 72px 1.5fr 1fr; gap: 2vw; align-items: center;
  padding: clamp(22px, 4.2vh, 48px) 1.4vw; border-bottom: 1px solid var(--cizgi-guclu);
  transition: color 0.5s var(--yay);
}
.ilke-no { color: var(--mavi); transition: color 0.5s; }
.ilke-baslik { font-size: clamp(30px, 4.2vw, 84px); line-height: 1; font-weight: 500; font-stretch: 90%; letter-spacing: -0.048em; transition: transform 0.8s var(--yay); }
.ilke p { max-width: 42ch; color: var(--murekkep-2); transition: color 0.5s; }
.ilke-dolgu { position: absolute; inset: 0; z-index: -1; background: var(--mavi); transform: scaleY(0); transform-origin: 50% 100%; transition: transform 0.7s var(--yay); }
@media (hover: hover) {
  .ilke:hover { color: var(--beyaz); }
  .ilke:hover .ilke-dolgu { transform: scaleY(1); }
  .ilke:hover .ilke-no { color: var(--beyaz); }
  .ilke:hover p { color: rgba(255, 255, 255, 0.86); }
  .ilke:hover .ilke-baslik { transform: translateX(1.4vw); }
}

/* ==========================================================================
   07 · İletişim
   ========================================================================== */
.iletisim {
  position: relative; overflow: hidden; margin-inline: clamp(8px, 1vw, 16px);
  border-radius: clamp(28px, 3vw, 52px); background: var(--mavi); color: var(--beyaz);
  padding-block: clamp(90px, 16vh, 200px) clamp(70px, 12vh, 150px);
}
.nokta-alan { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.iletisim-ic { position: relative; }
.iletisim .etiket { color: rgba(255, 255, 255, 0.7); }
.iletisim .etiket span { color: var(--beyaz); }
.iletisim-baslik { font-size: clamp(52px, 8.2vw, 176px); line-height: 0.9; font-weight: 500; font-stretch: 88%; letter-spacing: -0.055em; max-width: 11em; }
.iletisim-izgara { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: clamp(36px, 6vw, 120px); margin-top: clamp(56px, 11vh, 140px); }
.iletisim-yan { display: grid; align-content: start; gap: 28px; font-size: clamp(17px, 1.2vw, 21px); color: rgba(255, 255, 255, 0.86); max-width: 34ch; }
.iletisim-eposta-satir { color: rgba(255, 255, 255, 0.66); }
.iletisim-eposta { display: inline-block; margin-top: 8px; font-family: var(--f-sans); font-size: clamp(22px, 2vw, 34px); text-transform: none; letter-spacing: -0.03em; font-stretch: 100%; color: var(--beyaz); border-bottom: 1px solid rgba(255, 255, 255, 0.45); padding-bottom: 2px; transition: border-color 0.4s; }
.iletisim-eposta:hover { border-color: var(--beyaz); }
.secimler { border: 0; padding: 0; margin: 0 0 clamp(28px, 5vh, 52px); display: flex; flex-wrap: wrap; gap: 10px; }
.secimler legend { margin-bottom: 16px; color: rgba(255, 255, 255, 0.7); padding: 0; }
.secimler label { position: relative; }
.secimler input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.secimler span {
  display: inline-flex; align-items: center; height: 46px; padding: 0 20px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.42); font-size: 15.5px; transition: background-color 0.4s, color 0.4s, border-color 0.4s;
}
.secimler label:hover span { border-color: var(--beyaz); }
.secimler input:checked + span { background: var(--beyaz); color: var(--mavi); border-color: var(--beyaz); }
.secimler input:focus-visible + span { outline: 2px solid var(--beyaz); outline-offset: 3px; }
.alanlar { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 4vh, 40px) 2.4vw; }
.alan { display: flex; flex-direction: column; gap: 8px; }
.alan > span { color: rgba(255, 255, 255, 0.7); }
.alan input, .alan textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.42); border-radius: 0;
  color: var(--beyaz); font: inherit; font-size: clamp(19px, 1.5vw, 24px); letter-spacing: -0.02em; padding: 6px 0 12px;
  outline: none; transition: border-color 0.4s; resize: vertical;
}
.alan input:focus, .alan textarea:focus { border-color: var(--beyaz); }
.alan.hata input { border-color: #FFD27A; }
.alan-genis { grid-column: 1 / -1; }
.form-alt { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 3vw; margin-top: clamp(32px, 6vh, 64px); }
.form-not { max-width: 40ch; color: rgba(255, 255, 255, 0.72); text-transform: none; letter-spacing: 0; font-size: 12px; }

/* ---------- Alt bilgi ---------- */
.alt { padding-top: clamp(80px, 14vh, 170px); overflow: hidden; }
.alt-ust { display: grid; grid-template-columns: 1.4fr 0.55fr 0.55fr 0.55fr auto; gap: 40px 4vw; align-items: start; }
.alt-isaret { width: 46px; height: auto; color: var(--mavi); }
.alt-tanim p { margin-top: 24px; font-size: clamp(22px, 2vw, 34px); line-height: 1.12; letter-spacing: -0.03em; max-width: 19ch; font-weight: 500; font-stretch: 92%; }
.alt-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 18px; }
.alt-nav p { color: var(--soluk); margin-bottom: 10px; }
.alt-dil a[aria-current='page'] > span { color: var(--mavi); }
.yukari { width: 68px; height: 68px; border-radius: 50%; border: 1px solid var(--cizgi-guclu); display: grid; place-items: center; transition: background-color 0.5s, color 0.5s, border-color 0.5s; }
.yukari svg { width: 22px; height: 22px; transform: rotate(-90deg); }
@media (hover: hover) { .yukari:hover { background: var(--murekkep); color: var(--kagit); border-color: var(--murekkep); } }
.alt-dev { padding-inline: var(--kenar); margin-top: clamp(60px, 12vh, 160px); overflow: hidden; }
.alt-yazi { width: 100%; height: auto; aspect-ratio: 1495 / 340; color: var(--murekkep); will-change: transform; }
.alt-son { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; padding-block: 22px 30px; margin-top: 20px; border-top: 1px solid var(--cizgi); color: var(--soluk); }

/* ---------- Dile özel ---------- */
/* Almanca: uzun bileşik kelimeler satırı taşırmasın */
html[lang='de'] p { hyphens: auto; -webkit-hyphens: auto; }
html[lang='de'] h1, html[lang='de'] h2, html[lang='de'] h3, html[lang='ru'] h1, html[lang='ru'] h2, html[lang='ru'] h3 { text-wrap: balance; overflow-wrap: break-word; }
html[lang='de'] .giris-baslik { max-width: 13em; }
html[lang='de'] .g-donen { font-size: 1.3em; }
/* Rusça: Onest daha geniş; başlık aralığı ve boyutu açılır, Cormorant italik biraz kalınlaşır */
html[lang='ru'] .giris-baslik, html[lang='ru'] .bolum-baslik, html[lang='ru'] .ara-baslik, html[lang='ru'] .hizmet-baslik,
html[lang='ru'] .ilke-baslik, html[lang='ru'] .iletisim-baslik, html[lang='ru'] .manifesto, html[lang='ru'] .bant { letter-spacing: -0.03em; }
html[lang='ru'] .giris-baslik { font-size: clamp(38px, 5.4vw, 112px); max-width: 11em; }
html[lang='ru'] .bolum-baslik, html[lang='ru'] .iletisim-baslik { font-size: clamp(44px, 6.4vw, 134px); }
html[lang='ru'] .hizmet-baslik { font-size: clamp(32px, 3.7vw, 76px); }
html[lang='ru'] .manifesto { font-size: clamp(28px, 3.8vw, 76px); }
html[lang='ru'] .bant { font-size: clamp(48px, 8vw, 150px); }
html[lang='ru'] em, html[lang='ru'] .serif, html[lang='ru'] .donen { font-variation-settings: 'wght' 560; }

/* ==========================================================================
   Duyarlı
   ========================================================================== */
@media (max-width: 1180px) {
  .ust-saat { display: none; }
  .ust-sag > .dil-secici { margin-right: 4px; }
  .ust-nav { gap: 22px; }
  .giris-alt { max-width: 72vw; }
}

@media (max-width: 900px) {
  :root { --ust-h: 66px; }
  .ust-nav, .ust-sag > .dugme, .ust-sag > .dil-secici { display: none; }
  .menu-dugme { display: block; }

  .giris { height: auto; min-height: 0; }
  .giris-medya { position: relative; height: 62svh; min-height: 380px; }
  .giris-medya-ic picture, .giris-medya-ic img, .giris-medya-ic video { object-position: 80% 50%; }
  .giris-sis { background: linear-gradient(180deg, rgba(242, 239, 234, 0) 60%, var(--kagit) 100%); }
  .giris-ic { height: auto; display: block; padding-top: 0; margin-top: -7vh; }
  .giris-baslik { font-size: clamp(40px, 11.4vw, 84px); max-width: none; }
  .giris-alt { max-width: none; flex-direction: column; align-items: flex-start; }
  .kaydir { display: none; }
  html[lang='de'] .g-donen { font-size: 0.98em; }
  html[lang='ru'] .giris-baslik { font-size: clamp(38px, 11vw, 84px); }
  html[lang='ru'] .g-donen { font-size: 1.3em; }
  .giris-ust { margin-bottom: 14px; }
  .giris { padding-bottom: 0; }

  .hizmetler-bas, .preactra-ust, .markalar-bas, .ortaklar-bas { grid-template-columns: 1fr; }
  .preactra-logo { width: 88vw; }
  .manifesto { text-indent: 0; }
  .yaklasim-alt { grid-template-columns: 1fr; }

  .hizmet { position: relative; top: auto; height: auto; min-height: 0; max-height: none; grid-template-columns: 1fr; }
  .hizmet-baslik { margin-top: 28px; }
  .hizmet-medya { margin: 0 10px 10px; aspect-ratio: 4 / 5; }

  .preactra-ozellik { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .cip { font-size: 12px; padding: 7px 12px 7px 9px; }
  .cip img { height: 14px; }
  .c2, .c5, .c7 { display: none; }
  .c1 { left: -2%; top: -8%; }
  .c4 { right: -2%; top: -6%; }
  .c6 { right: auto; left: 2%; top: auto; bottom: -9%; }
  .c3 { display: none; }
  .telefon { width: 26%; right: -1%; bottom: -14%; }

  .marka-izgara { grid-template-columns: repeat(2, 1fr); }

  .dongu { height: auto; padding-block: 12vh; }
  .dongu-sahne { position: relative; height: auto; overflow: visible; }
  .dongu-ic { grid-template-columns: 1fr; }
  .dongu-sag { order: -1; width: min(84vw, 460px); margin-bottom: 4vh; }
  .adim { opacity: 1; }
  .adim p { max-height: none; opacity: 1; margin-top: 10px; }

  .ilke { grid-template-columns: 40px 1fr; padding-inline: 0; }
  .ilke p { grid-column: 2; }

  .iletisim-izgara, .alanlar { grid-template-columns: minmax(0, 1fr); }
  .iletisim-eposta { font-size: clamp(17px, 5.6vw, 34px); overflow-wrap: anywhere; }
  .alt-ust { grid-template-columns: 1fr 1fr 1fr; }
  .alt-tanim { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .preactra-ozellik { grid-template-columns: 1fr; }
  .marka-is { left: 12px; top: 10px; font-size: 10px; }
  .giris-dugmeler .dugme-cizgi { display: none; }
  .alt-son { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .tane, .kaydir-halka, .nabiz::after { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}