/* warpek.com v3 — Warpek Technologies ve LoomCore. Derleme yok, dış kaynak yok.
   Açık ve koyu tema (sistem ayarı + üstteki düğme), köşe yarıçapı en fazla 2px. */

@font-face { font-family: "Archivo"; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(fonts/archivo-latin-wdth-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: "Archivo"; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(fonts/archivo-latin-ext-wdth-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url(fonts/barlow-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: "Barlow"; font-weight: 400; font-display: swap; src: url(fonts/barlow-400-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url(fonts/barlow-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"; font-weight: 600; font-display: swap; src: url(fonts/barlow-600-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-weight: 700; font-display: swap; src: url(fonts/barlow-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"; font-weight: 700; font-display: swap; src: url(fonts/barlow-700-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20C0, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- tema ---------- */
:root {
  color-scheme: light;
  --zemin: #ffffff; --zemin-2: #f1f3f6; --kart: #ffffff; --cizgi: #d6dce4; --cizgi-2: #e6eaef;
  --metin: #0e1726; --metin-2: #4a5568; --soluk: #66717f; --baslik: #0b1d38;
  --lac: #0b1d38; --lac-cizgi: #28466f; --lac-metin: #c1cde0; --lac-soluk: #8396b5;
  --vurgu: #1b5ec6; --vurgu-acik: #6aa8ff;
  --dugme: #0b1d38; --dugme-ust: #16305a; --dugme-metin: #fff;
  --ust-zemin: rgba(255, 255, 255, .94);
  --golge: 0 30px 60px -32px rgba(11, 29, 56, .45);
  --yakinda: #a35a00;
}
@media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) {
  color-scheme: dark;
  --zemin: #08111f; --zemin-2: #0c182b; --kart: #0f1d33; --cizgi: #1f2e45; --cizgi-2: #172539;
  --metin: #e6edf6; --metin-2: #a9b6c8; --soluk: #8494aa; --baslik: #f3f6fb;
  --lac: #10284a; --lac-cizgi: #2a4a78; --lac-metin: #bccadf; --lac-soluk: #8ca0bf;
  --vurgu: #6aa1f5; --dugme: #1b5ec6; --dugme-ust: #2a6fdc; --dugme-metin: #fff;
  --ust-zemin: rgba(8, 17, 31, .92); --golge: 0 30px 60px -32px rgba(0, 0, 0, .8); --yakinda: #f2a640;
} }
:root[data-tema="koyu"] {
  color-scheme: dark;
  --zemin: #08111f; --zemin-2: #0c182b; --kart: #0f1d33; --cizgi: #1f2e45; --cizgi-2: #172539;
  --metin: #e6edf6; --metin-2: #a9b6c8; --soluk: #8494aa; --baslik: #f3f6fb;
  --lac: #10284a; --lac-cizgi: #2a4a78; --lac-metin: #bccadf; --lac-soluk: #8ca0bf;
  --vurgu: #6aa1f5; --dugme: #1b5ec6; --dugme-ust: #2a6fdc; --dugme-metin: #fff;
  --ust-zemin: rgba(8, 17, 31, .92); --golge: 0 30px 60px -32px rgba(0, 0, 0, .8); --yakinda: #f2a640;
}
:root {
  --f: "Barlow", system-ui, "Segoe UI", Roboto, sans-serif;
  --fb: "Archivo", "Barlow", system-ui, sans-serif;
  --r: 2px;
  --kenar: clamp(20px, 3.75vw, 72px);
  --ust-h: 96px;
  --egri: cubic-bezier(.22, 1, .36, 1);
}
/* temaya göre değişen görsel (yalnız platform bölümünde) */
.tema-koyu { display: none; }
:root[data-tema="koyu"] .tema-acik { display: none; } :root[data-tema="koyu"] .tema-koyu { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) .tema-acik { display: none; } :root:not([data-tema="acik"]) .tema-koyu { display: block; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--ust-h) + 16px); background: var(--zemin); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; font: 400 18px/1.6 var(--f); color: var(--metin); background: var(--zemin); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; transition: background-color 300ms, color 300ms; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--vurgu); text-underline-offset: 3px; text-decoration-thickness: 1px; }
h1, h2, h3, h4 { margin: 0; font-family: var(--fb); font-weight: 700; font-stretch: 112%; line-height: 1.04; letter-spacing: -.012em; color: var(--baslik); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }
::selection { background: var(--vurgu); color: #fff; }
:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 3px; }
.i { width: 22px; height: 22px; fill: currentColor; flex: none; }
.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.atla { position: absolute; left: 16px; top: -60px; z-index: 60; padding: 10px 14px; background: var(--dugme); color: #fff; }
.atla:focus { top: 12px; color: #fff; }
.sar { width: 100%; padding-inline: max(var(--kenar), calc(50vw - 960px + var(--kenar))); }

/* ---------- düğmeler ---------- */
.dg { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 0 28px; border: 1px solid transparent; border-radius: var(--r);
  font: 600 17px/1 var(--f); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color 200ms, color 200ms, border-color 200ms, transform 150ms var(--egri); }
.dg:active { transform: translateY(1px); }
.dg .i { width: 18px; height: 18px; }
.dg.ana { background: var(--dugme); color: var(--dugme-metin); }
.dg.ana:hover { background: var(--dugme-ust); color: var(--dugme-metin); }
.dg.beyaz { background: #fff; color: #0b1d38; }
.dg.beyaz:hover { background: #dfe9f8; color: #0b1d38; }
.dg.cizgi { border-color: var(--cizgi); color: var(--metin); background: transparent; }
.dg.cizgi:hover { border-color: var(--metin-2); }
.dg.kucuk { min-height: 46px; padding: 0 20px; font-size: 16px; }
.dugmeler { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.ok { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--baslik); text-decoration: none; }
.ok .i { width: 18px; height: 18px; transition: transform 300ms var(--egri); }
.ok:hover .i { transform: translateX(4px); }

/* ---------- üst çubuk ---------- */
.ust { position: sticky; top: 0; z-index: 40; background: var(--ust-zemin); border-bottom: 1px solid var(--cizgi); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); transition: background-color 300ms, border-color 300ms; }
.ust .sar { display: flex; align-items: center; gap: 40px; height: var(--ust-h); }
.marka { display: block; color: var(--baslik); flex: none; }
.marka svg { display: block; height: 46px; width: auto; }
.menu { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.menu > a { position: relative; padding: 10px 16px; color: var(--metin); font-weight: 600; font-size: 17px; text-decoration: none; }
.menu > a::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 2px; height: 2px; background: var(--vurgu); transform: scaleX(0); transform-origin: left; transition: transform 350ms var(--egri); }
.menu > a:hover::after, .menu > a[aria-current="page"]::after { transform: scaleX(1); }
.menu .dugmeler { display: none; }
.ust-sag { display: flex; align-items: center; gap: 12px; }
.tema-dg { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--cizgi); border-radius: var(--r); background: transparent; color: var(--metin); cursor: pointer; transition: border-color 200ms; }
.tema-dg:hover { border-color: var(--metin-2); }
.tema-dg .i { width: 20px; height: 20px; }
.tema-dg .gunes { display: none; }
:root[data-tema="koyu"] .tema-dg .ay { display: none; } :root[data-tema="koyu"] .tema-dg .gunes { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) .tema-dg .ay { display: none; } :root:not([data-tema="acik"]) .tema-dg .gunes { display: block; } }
.menu-ac { display: none; width: 46px; height: 46px; align-items: center; justify-content: center; border: 1px solid var(--cizgi); border-radius: var(--r); background: transparent; color: var(--metin); cursor: pointer; }
.menu-ac .kapat { display: none; }
@media (max-width: 1240px) { .menu > a { padding-inline: 11px; font-size: 16px; } .menu > a::after { left: 11px; right: 11px; } }
@media (max-width: 1080px) {
  :root { --ust-h: 76px; }
  .marka svg { height: 38px; }
  .menu-ac { display: inline-flex; }
  .ust-sag .dg { display: none; }
  .menu { display: none; }
  .ust .sar { gap: 16px; }
  .ust-sag { margin-left: auto; }
  .ust.acik .menu { display: grid; position: absolute; left: 0; right: 0; top: var(--ust-h); gap: 0; padding: 8px var(--kenar) 28px; background: var(--zemin); border-bottom: 1px solid var(--cizgi); min-height: calc(100svh - var(--ust-h)); align-content: start; }
  .ust.acik .menu > a { padding: 18px 0; font-size: 22px; border-bottom: 1px solid var(--cizgi); }
  .ust.acik .menu > a::after { display: none; }
  .ust.acik .menu .dugmeler { display: flex; margin-top: 24px; }
  .ust.acik .menu .dg { flex: 1; }
  .ust.acik .menu-ac .ac { display: none; } .ust.acik .menu-ac .kapat { display: block; }
}

/* ---------- hero (bölünmüş) ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 43fr) minmax(0, 57fr); min-height: clamp(680px, calc(100svh - var(--ust-h)), 920px); }
.hero-metin { display: flex; flex-direction: column; justify-content: space-between; gap: 56px; padding: clamp(64px, 6vw, 120px) clamp(32px, 3.6vw, 72px) 56px max(var(--kenar), calc(50vw - 960px + var(--kenar))); }
.hero h1 { font-size: clamp(48px, 4.3vw, 84px); font-stretch: 115%; line-height: 1; }
.hero-metin p { margin: 32px 0 44px; font-size: clamp(19px, 1.2vw, 23px); color: var(--metin-2); max-width: 36ch; }
.rakam { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; border-top: 1px solid var(--cizgi); }
.rakam div { display: grid; gap: 4px; padding-top: 22px; }
.rakam b { font: 700 clamp(22px, 1.5vw, 28px)/1.1 var(--fb); font-stretch: 112%; color: var(--baslik); }
.rakam span { font-size: 15px; color: var(--soluk); }
.hero-foto { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 66fr) minmax(0, 34fr); gap: 6px; overflow: hidden; }
.hero-foto .kare { position: relative; overflow: hidden; background: var(--zemin-2); }
.hero-foto .kare:first-child { grid-column: 1 / -1; }
.hero-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-metin { padding: 64px var(--kenar) 48px; gap: 48px; }
  .hero-foto { height: min(110vw, 620px); }
}

/* ---------- lacivert bant ---------- */
.bant { background: var(--lac); color: #fff; }
.bant .sar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 48px; padding-block: 56px; }
.bant b { font: 700 clamp(28px, 2.2vw, 42px)/1.12 var(--fb); font-stretch: 115%; max-width: 28ch; color: #fff; }

/* ---------- genel bölüm ---------- */
.bolum { padding-block: clamp(88px, 7vw, 136px); }
.bolum.gri { background: var(--zemin-2); }
.bas2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 96px; align-items: end; margin-bottom: clamp(48px, 4vw, 72px); }
.bas2 h2, .bas h2 { font-size: clamp(40px, 3.3vw, 64px); }
.bas2 p, .bas p { font-size: clamp(18px, 1.1vw, 21px); color: var(--metin-2); max-width: 54ch; }
.bas { display: grid; gap: 20px; max-width: 900px; margin-bottom: clamp(48px, 4vw, 72px); }
@media (max-width: 900px) { .bas2 { grid-template-columns: 1fr; gap: 20px; } }

/* özellik kartları */
.ozler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 32px; }
.oz { display: grid; align-content: start; color: inherit; text-decoration: none; }
.oz .foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--zemin-2); }
.oz .foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--egri); }
a.oz:hover .foto img { transform: scale(1.04); }
.oz h3 { margin: 26px 0 10px; font-size: clamp(22px, 1.45vw, 28px); font-stretch: 108%; }
.oz p { font-size: 17px; color: var(--metin-2); max-width: 46ch; }
.oz .ok { margin-top: 16px; color: var(--vurgu); font-size: 16px; }
@media (max-width: 1100px) { .ozler { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .ozler { grid-template-columns: 1fr; gap: 44px; } }

/* lacivert adımlar */
.akis { background: var(--lac); color: #fff; padding-block: clamp(88px, 6.5vw, 124px); }
.akis h2 { color: #fff; font-size: clamp(38px, 3vw, 58px); margin-bottom: clamp(48px, 4vw, 72px); }
.adimlar { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--lac-cizgi); }
.adimlar li { display: grid; gap: 14px; align-content: start; padding: 40px 48px 0 0; }
.adimlar li + li { padding-left: 48px; border-left: 1px solid var(--lac-cizgi); }
.adimlar small { font: 600 14px/1 var(--f); letter-spacing: .16em; color: var(--vurgu-acik); }
.adimlar b { font: 700 clamp(24px, 1.7vw, 32px)/1.1 var(--fb); font-stretch: 110%; }
.adimlar p { color: var(--lac-metin); font-size: 18px; max-width: 40ch; }
@media (max-width: 900px) { .adimlar { grid-template-columns: 1fr; } .adimlar li, .adimlar li + li { padding: 32px 0; border-left: 0; border-bottom: 1px solid var(--lac-cizgi); } }

/* platformlar: yalnız burada ürün görseli */
.cihazlar { position: relative; aspect-ratio: 1776 / 760; }
.cihazlar > * { position: absolute; }
.pencere { background: #fff; border: 1px solid #c4ccd7; border-radius: var(--r); box-shadow: var(--golge); overflow: hidden; }
.pencere .bar { height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 12px; font: 600 12px var(--f); color: #4a5568; background: #eef1f5; border-bottom: 1px solid #d4dae3; }
.pencere.win .bar { justify-content: space-between; background: #f3f3f3; }
.pencere.win .bar span:last-child { letter-spacing: 12px; color: #555; font-weight: 400; }
.pencere.mac .bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; } .pencere.mac .bar i:nth-child(2) { background: #febc2e; } .pencere.mac .bar i:nth-child(3) { background: #28c840; }
.pencere.mac .bar b { margin: 0 auto; transform: translateX(-24px); }
.dizustu .ekr { padding: clamp(6px, .8vw, 14px) clamp(6px, .8vw, 14px) 0; background: #1b1f27; border-radius: 10px 10px 0 0; }
.dizustu .tab { height: 16px; margin: 0 -7%; background: linear-gradient(#c8ccd3, #8b9099); border-radius: 0 0 10px 10px; }
.ipad { padding: clamp(6px, .75vw, 14px); background: #15181e; border-radius: clamp(10px, 1.1vw, 20px); box-shadow: var(--golge); }
.ipad img { border-radius: clamp(3px, .35vw, 6px); }
.iphone { padding: clamp(3px, .4vw, 8px); background: #15181e; border-radius: clamp(12px, 1.5vw, 30px); box-shadow: var(--golge); }
.iphone img { border-radius: clamp(9px, 1.2vw, 24px); }
.c-mac { left: 56.9%; top: 0; width: 42.8%; } .c-win { left: 29.3%; top: 14.5%; width: 40.5%; } .c-diz { left: 0; top: 26.3%; width: 49.5%; }
.c-ipad { left: 64.7%; top: 43.4%; width: 29.3%; } .c-tel { left: 90.1%; top: 39.5%; width: 9.9%; }
.pl-etiketler { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 56px; border-top: 1px solid var(--cizgi); }
.pl-etiketler li { display: grid; gap: 6px; align-content: start; padding: 26px 24px 0 0; }
.pl-etiketler li + li { padding-left: 24px; border-left: 1px solid var(--cizgi); }
.pl-etiketler .i { width: 26px; height: 26px; color: var(--baslik); margin-bottom: 6px; }
.pl-etiketler b { font: 700 22px var(--fb); font-stretch: 108%; color: var(--baslik); }
.pl-etiketler span { font-size: 16px; color: var(--metin-2); }
.pl-etiketler em { font-style: normal; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--yakinda); }
@media (max-width: 1100px) { .pl-etiketler { grid-template-columns: repeat(3, 1fr); row-gap: 24px; } .pl-etiketler li:nth-child(4) { padding-left: 0; border-left: 0; } }
@media (max-width: 720px) {
  .cihazlar { aspect-ratio: 1 / .78; }
  .c-mac, .c-win, .c-ipad { display: none; }
  .c-diz { top: 4%; width: 86%; } .c-tel { left: 70%; top: 30%; width: 28%; }
  .pl-etiketler { grid-template-columns: 1fr 1fr; }
  .pl-etiketler li, .pl-etiketler li + li { padding: 20px 12px 0 0; border-left: 0; }
}

/* warpek */
.biz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 720px; }
.biz .foto { position: relative; overflow: hidden; background: var(--zemin-2); }
.biz .foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.biz-metin { display: grid; gap: 28px; align-content: center; padding: clamp(72px, 6vw, 120px) max(var(--kenar), calc(50vw - 960px + var(--kenar))) clamp(72px, 6vw, 120px) clamp(40px, 5vw, 96px); }
.biz-metin h2 { font-size: clamp(38px, 2.9vw, 56px); }
.biz-metin p { font-size: 19px; color: var(--metin-2); max-width: 54ch; }
.biz-metin ul { list-style: none; display: grid; border-top: 1px solid var(--cizgi); }
.biz-metin li { padding: 18px 0; border-bottom: 1px solid var(--cizgi); font-weight: 600; color: var(--baslik); }
@media (max-width: 1000px) { .biz { grid-template-columns: 1fr; } .biz .foto { height: 420px; } .biz-metin { padding: 64px var(--kenar); } }

/* fotoğraflı çağrı */
.cagri { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: #0b1d38; }
.cagri .zemin-foto { position: absolute; inset: 0; z-index: -2; }
.cagri .zemin-foto img { width: 100%; height: 100%; object-fit: cover; }
.cagri::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 20, 40, .95) 0%, rgba(8, 20, 40, .75) 50%, rgba(8, 20, 40, .35) 100%); }
.cagri .sar { padding-block: clamp(96px, 8vw, 150px); display: grid; gap: 26px; justify-items: start; }
.cagri h2 { color: #fff; font-size: clamp(42px, 3.4vw, 66px); max-width: 22ch; }
.cagri p { font-size: 21px; color: #c8d4e6; max-width: 48ch; }

/* ---------- iç sayfalar ---------- */
.sayfa-bas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-bottom: 1px solid var(--cizgi); }
.sayfa-bas .metin { display: grid; gap: 24px; align-content: center; padding: clamp(72px, 6vw, 120px) clamp(40px, 4vw, 80px) clamp(72px, 6vw, 120px) max(var(--kenar), calc(50vw - 960px + var(--kenar))); }
.sayfa-bas h1 { font-size: clamp(46px, 4vw, 80px); font-stretch: 115%; line-height: 1; }
.sayfa-bas p { font-size: clamp(19px, 1.2vw, 22px); color: var(--metin-2); max-width: 46ch; }
.sayfa-bas .foto { position: relative; overflow: hidden; min-height: 420px; background: var(--zemin-2); }
.sayfa-bas .foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sayfa-bas.duz { grid-template-columns: 1fr; }
.sayfa-bas.duz .metin { padding-right: max(var(--kenar), calc(50vw - 960px + var(--kenar))); }
@media (max-width: 1000px) { .sayfa-bas { grid-template-columns: 1fr; } .sayfa-bas .metin { padding: 56px var(--kenar); } .sayfa-bas .foto { min-height: 300px; } }

.altmenu { position: sticky; top: var(--ust-h); z-index: 30; background: var(--ust-zemin); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--cizgi); }
.altmenu .sar { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.altmenu a { position: relative; flex: none; padding: 18px 18px; color: var(--metin-2); font-weight: 600; font-size: 16px; text-decoration: none; transition: color 200ms; }
.altmenu a::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 2px; background: var(--vurgu); transform: scaleX(0); transition: transform 350ms var(--egri); }
.altmenu a:hover, .altmenu a.on { color: var(--baslik); }
.altmenu a.on::after { transform: scaleX(1); }

/* modül: fotoğraf + metin satırı */
.modul { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 112px); align-items: center; padding-block: clamp(72px, 6vw, 120px); border-bottom: 1px solid var(--cizgi); }
.modul:last-child { border-bottom: 0; }
.modul.ters .modul-foto { order: 2; }
.modul-foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--zemin-2); }
.modul-foto img { width: 100%; height: 100%; object-fit: cover; }
.modul-metin { display: grid; gap: 22px; align-content: center; }
.modul-metin h2 { font-size: clamp(36px, 2.8vw, 54px); }
.modul-metin > p { font-size: 19px; color: var(--metin-2); max-width: 52ch; }
.liste { list-style: none; display: grid; border-top: 1px solid var(--cizgi); }
.liste li { display: grid; grid-template-columns: minmax(150px, 2fr) 3fr; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--cizgi); font-size: 16.5px; color: var(--metin-2); }
.liste li b { color: var(--baslik); font-weight: 600; }
.liste.tek li { grid-template-columns: 1fr; }
@media (max-width: 1000px) { .modul { grid-template-columns: 1fr; } .modul.ters .modul-foto { order: 0; } }
@media (max-width: 560px) { .liste li { grid-template-columns: 1fr; gap: 2px; } }

/* bilgi ızgarası (fotoğrafsız kutular) */
.izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--cizgi); border-left: 1px solid var(--cizgi); }
.izgara > div { display: grid; gap: 12px; align-content: start; padding: 36px; border-right: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); background: var(--kart); }
.izgara .i { width: 30px; height: 30px; color: var(--vurgu); }
.izgara h3 { font-size: 22px; font-stretch: 108%; }
.izgara p { font-size: 16.5px; color: var(--metin-2); }
.izgara.dort { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.izgara.dort > div::before { content: counter(adim, decimal-leading-zero); font: 700 40px/1 var(--fb); font-stretch: 115%; color: var(--vurgu); }
.izgara.dort { counter-reset: adim; } .izgara.dort > div { counter-increment: adim; }
@media (max-width: 1100px) { .izgara, .izgara.dort { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .izgara, .izgara.dort { grid-template-columns: 1fr; } }

.not { display: flex; gap: 14px; margin-top: 40px; padding: 22px 26px; border-left: 3px solid var(--vurgu); background: var(--zemin-2); font-size: 17px; color: var(--metin); }
.not .i { width: 22px; height: 22px; color: var(--vurgu); margin-top: 2px; }

/* veri akış şeması */
.sema { display: grid; grid-template-columns: 1fr 64px 1.2fr 64px 1fr; align-items: stretch; }
.sema-kutu { display: grid; gap: 12px; align-content: start; padding: 36px; border: 1px solid var(--cizgi); background: var(--kart); }
.sema-kutu .i { width: 34px; height: 34px; color: var(--vurgu); }
.sema-kutu h3 { font-size: 23px; }
.sema-kutu p { font-size: 16.5px; color: var(--metin-2); }
.sema-kutu code { font: 700 16px var(--f); color: var(--baslik); }
.sema-kutu.orta { background: var(--lac); border-color: var(--lac); }
.sema-kutu.orta h3, .sema-kutu.orta code { color: #fff; } .sema-kutu.orta p { color: var(--lac-metin); } .sema-kutu.orta .i { color: var(--vurgu-acik); }
.sema-ok { display: grid; place-items: center; color: var(--soluk); }
.sema-ok::before { content: ""; width: 100%; height: 1px; background: var(--cizgi); grid-area: 1 / 1; }
.sema-ok .i { grid-area: 1 / 1; width: 22px; height: 22px; padding: 2px; background: var(--zemin); color: var(--vurgu); }
@media (max-width: 1000px) { .sema { grid-template-columns: 1fr; } .sema-ok { height: 48px; } .sema-ok::before { width: 1px; height: 100%; } .sema-ok .i { transform: rotate(90deg); } }

.sss { display: grid; max-width: 1000px; border-top: 1px solid var(--cizgi); }
.sss details { border-bottom: 1px solid var(--cizgi); }
.sss summary { display: flex; align-items: center; gap: 16px; padding: 26px 0; cursor: pointer; list-style: none; font: 600 20px/1.3 var(--f); color: var(--baslik); }
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: ""; margin-left: auto; width: 12px; height: 12px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 300ms var(--egri); flex: none; }
.sss details[open] summary::after { transform: rotate(-135deg); }
.sss details p { padding: 0 0 28px; color: var(--metin-2); font-size: 18px; max-width: 72ch; }

/* platform sayfası kartları */
.pl-kartlar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--cizgi); border-left: 1px solid var(--cizgi); }
.pl-kartlar > div { display: grid; gap: 14px; align-content: start; padding: 32px; border-right: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); background: var(--kart); }
.pl-kartlar .i { width: 34px; height: 34px; color: var(--baslik); }
.pl-kartlar h3 { font-size: 24px; }
.pl-kartlar p { font-size: 16px; color: var(--metin-2); }
.pl-kartlar em { font-style: normal; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--yakinda); }
.pl-kartlar .dg { justify-self: start; margin-top: 4px; }
@media (max-width: 1200px) { .pl-kartlar { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .pl-kartlar { grid-template-columns: 1fr; } }

/* iletişim formu */
.iletisim { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(40px, 5vw, 112px); align-items: start; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: clamp(28px, 3vw, 48px); border: 1px solid var(--cizgi); background: var(--kart); }
.alan { display: grid; gap: 8px; align-content: start; }
.alan.tam { grid-column: 1 / -1; }
.alan label, .alan legend { font-weight: 600; font-size: 15.5px; color: var(--baslik); padding: 0; }
.alan label small, .alan legend small { font-weight: 400; color: var(--soluk); }
.alan input, .alan textarea { width: 100%; min-height: 54px; padding: 12px 14px; border: 1px solid var(--cizgi); border-radius: var(--r); background: var(--zemin); color: var(--metin); font: 400 17px/1.4 var(--f); transition: border-color 200ms, box-shadow 200ms; }
.alan textarea { min-height: 140px; resize: vertical; }
.alan input::placeholder, .alan textarea::placeholder { color: var(--soluk); }
.alan input:hover, .alan textarea:hover { border-color: var(--metin-2); }
.alan input:focus, .alan textarea:focus { outline: none; border-color: var(--vurgu); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vurgu) 22%, transparent); }
.alan .hata { display: none; font-size: 14.5px; color: #c7302a; font-weight: 600; }
:root[data-tema="koyu"] .alan .hata { color: #ff8a80; }
.alan.hatali input, .alan.hatali textarea { border-color: #c7302a; }
.alan.hatali .hata { display: block; }
.secenekler { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.secenekler > div { display: flex; flex-wrap: wrap; gap: 8px; }
.sec { position: relative; }
.sec input { position: absolute; opacity: 0; pointer-events: none; }
.sec span { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px; border: 1px solid var(--cizgi); border-radius: var(--r); background: var(--zemin); font-size: 16px; font-weight: 600; color: var(--metin-2); cursor: pointer; transition: border-color 200ms, background-color 200ms, color 200ms; }
.sec span::before { content: ""; width: 14px; height: 14px; border: 1.5px solid var(--soluk); flex: none; }
.sec span:hover { border-color: var(--metin-2); color: var(--metin); }
.sec input:checked + span { border-color: var(--vurgu); color: var(--baslik); background: color-mix(in srgb, var(--vurgu) 10%, var(--zemin)); }
.sec input:checked + span::before { border-color: var(--vurgu); background: var(--vurgu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.4'/%3E%3C/svg%3E") center / 12px no-repeat; }
.sec input:focus-visible + span { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.onay { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--metin-2); cursor: pointer; }
.onay input { width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; accent-color: var(--vurgu); flex: none; }
.form-alt { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.form-durum { font-size: 15.5px; font-weight: 600; }
.form-durum.kotu { color: #c7302a; }
.bal { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .dg[disabled] { opacity: .6; cursor: progress; }
.form-tamam { display: none; grid-column: 1 / -1; gap: 14px; padding: 12px 0; }
.form.gonderildi > *:not(.form-tamam) { display: none; }
.form.gonderildi .form-tamam { display: grid; }
.form-tamam h2 { font-size: 32px; display: flex; gap: 12px; align-items: center; }
.form-tamam h2 .i { width: 32px; height: 32px; color: #1b8656; }
.form-tamam p { color: var(--metin-2); }
.yan { display: grid; gap: 36px; }
.yan section { display: grid; gap: 12px; padding-bottom: 32px; border-bottom: 1px solid var(--cizgi); }
.yan h2 { font-size: 24px; }
.yan p, .yan li { color: var(--metin-2); font-size: 17px; }
.yan ol { padding-left: 20px; display: grid; gap: 8px; }
.yan .bag { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; text-decoration: none; color: var(--baslik); }
.yan .bag .i { color: var(--vurgu); }
.eksik { background: color-mix(in srgb, #ef8a1d 26%, transparent); padding: 0 5px; font-weight: 600; }
@media (max-width: 1000px) { .iletisim, .form { grid-template-columns: 1fr; } }

.yazi { max-width: 820px; display: grid; gap: 18px; }
.yazi h2 { font-size: 28px; margin-top: 24px; }
.yazi p, .yazi li { color: var(--metin-2); font-size: 18px; }
.yazi ul { padding-left: 22px; display: grid; gap: 6px; }

/* ---------- alt bilgi ---------- */
.alt { background: #0b1d38; color: #b8c4d6; padding: 88px 0 32px; font-size: 16px; }
:root[data-tema="koyu"] .alt { background: #050c17; border-top: 1px solid var(--cizgi); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) .alt { background: #050c17; border-top: 1px solid var(--cizgi); } }
.alt-ust { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 64px; }
.alt .marka { color: #fff; } .alt .marka svg { height: 54px; }
.alt-ust p { margin-top: 24px; max-width: 46ch; }
.alt-ust nav, .alt-ust > div { display: grid; gap: 12px; align-content: start; }
.alt h2 { font: 600 13px/1.2 var(--f); letter-spacing: .14em; text-transform: uppercase; color: #7f93b3; margin-bottom: 6px; }
.alt a { color: #fff; text-decoration: none; } .alt a:hover { color: var(--vurgu-acik); }
.alt-alt { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; margin-top: 72px; padding-top: 24px; border-top: 1px solid #22406a; font-size: 14px; color: #7f93b3; }
@media (max-width: 900px) { .alt-ust { grid-template-columns: 1fr 1fr; gap: 40px; } .alt-ust > div:first-child { grid-column: 1 / -1; } }

/* ---------- yumuşak kaydırma geçişleri ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .gir { opacity: 0; transform: translate3d(0, 56px, 0); transition: opacity 1400ms var(--egri), transform 1400ms var(--egri); transition-delay: calc(var(--s, 0) * 110ms); }
  .js .gir.gorundu { opacity: 1; transform: none; }
  /* fotoğraflar perde gibi açılır, hafif yakınlaşmayla oturur */
  .js .perde { clip-path: inset(12% 0 0 0); transition: clip-path 1600ms var(--egri); transition-delay: calc(var(--s, 0) * 110ms); }
  .js .perde img { transform: scale(1.12); transition: transform 2200ms var(--egri); transition-delay: calc(var(--s, 0) * 110ms); }
  .js .perde.gorundu { clip-path: inset(0 0 0 0); }
  .js .perde.gorundu img { transform: none; }
  /* hero ilk açılış */
  .hero-metin > * { animation: yukari 1200ms var(--egri) both; }
  .hero-metin > :nth-child(2) { animation-delay: 160ms; }
  .hero-foto .kare { animation: perde-ac 1600ms var(--egri) both; }
  .hero-foto .kare:nth-child(2) { animation-delay: 160ms; } .hero-foto .kare:nth-child(3) { animation-delay: 280ms; }
  .hero-foto .kare img { animation: yavas 2400ms var(--egri) both; }
  /* kaydırmayla hafif paralaks (destekleyen tarayıcılarda) */
  @supports (animation-timeline: view()) {
    .paralaks img { animation: paralaks linear both; animation-timeline: view(); scale: 1.14; }
  }
}
@keyframes yukari { from { opacity: 0; transform: translateY(32px); } }
@keyframes perde-ac { from { clip-path: inset(0 0 100% 0); } }
@keyframes yavas { from { transform: scale(1.15); } }
@keyframes paralaks { from { translate: 0 -5%; } to { translate: 0 5%; } }

@media (max-width: 600px) {
  body { font-size: 17px; }
  .dugmeler .dg { flex: 1 1 auto; }
  .bant .sar { padding-block: 44px; }
}
/* koyu temada cihaz kasaları zeminden ayrılsın */
:root[data-tema="koyu"] :is(.ipad, .iphone, .dizustu .ekr) { box-shadow: var(--golge), 0 0 0 1px rgba(255, 255, 255, .14); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) :is(.ipad, .iphone, .dizustu .ekr) { box-shadow: var(--golge), 0 0 0 1px rgba(255, 255, 255, .14); } }
@media (max-width: 520px) { .rakam b { font-size: 20px; } .rakam span { font-size: 14px; } }
.altmenu a:first-child { padding-left: 0; } .altmenu a:first-child::after { left: 0; }