/* Sadece Medya — site stili
   Görsel dil 21hrs.space'in yapısından uyarlandı: köşe çerçeveleri, yuvarlak araç düğmeleri,
   Futura sınıfı başlık (Jost), mono etiket (IBM Plex Mono), cetvel ve köşe parantezli kutular.
   Gövde metni TeX Gyre Heros (Helvetica karşılığı). Renk ve yazı tek yerden, değişkenlerle. */

@font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/jost-latin-500-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: 'Jost'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/jost-latin-ext-500-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: 'Jost'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/jost-latin-600-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: 'Jost'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/jost-latin-ext-600-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: 'Jost'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/jost-latin-700-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: 'Jost'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/jost-latin-ext-700-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: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/ibm-plex-mono-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: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/ibm-plex-mono-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: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/ibm-plex-mono-latin-500-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: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/ibm-plex-mono-latin-ext-500-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: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/ibm-plex-mono-latin-600-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: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/ibm-plex-mono-latin-ext-600-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: 'TeX Gyre Heros'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/heros-400.woff2) format('woff2'); }
@font-face { font-family: 'TeX Gyre Heros'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/heros-700.woff2) format('woff2'); }

:root {
  --zemin: #000;
  --zemin-2: #0b0a09;
  --zemin-3: #151311;
  --zemin-4: #1f1c19;
  --metin: #fff3ea;
  --metin-2: #ddd2c9;
  --metin-3: #b3a99f;
  --baslik: #d9d9d9;
  --menu-soluk: #a8a19a;
  --kose: #e4b592;
  --kose-soluk: #8e735e;
  --cizgi: #fff3ea;
  --cizgi-2: #4a433d;
  --vurgu: #ea572c;
  --vurgu-acik: #ff8a5f;
  --f-baslik: 'Jost', 'Futura', 'Futura PT', 'Century Gothic', 'Trebuchet MS', sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --f-govde: 'TeX Gyre Heros', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --icerik: 1360px;
  --kenar: clamp(18px, 4.2vw, 64px);
  --r-k: 8px;
  --r-o: 12px;
  --r-b: 18px;
  --golge: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px rgba(0, 0, 0, .45);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--zemin); color: var(--metin); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font: 400 18px/1.7 var(--f-govde); background: var(--zemin); color: var(--metin); overflow-x: clip; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--vurgu); color: #fff; }
:focus-visible { outline: 2px solid var(--vurgu-acik); outline-offset: 3px; border-radius: 4px; }
.gorunmez { 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; top: 8px; left: 50%; transform: translate(-50%, -160%); z-index: 100; background: var(--metin); color: #000; padding: 15px 18px; border-radius: var(--r-k); font: 600 14px/1 var(--f-mono); text-decoration: none; }
.atla:focus { transform: translate(-50%, 0); }

/* film greni: referanstaki dokulu siyah */
.gren { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- sol üst yuvarlak araç düğmeleri ---------- */
.araclar { position: fixed; top: 25px; left: 30px; z-index: 55; display: flex; gap: 10px; }
.yuvarlak { position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; text-decoration: none;
  border: 1.5px solid rgba(255, 243, 234, .62); color: var(--metin);
  background: rgba(10, 9, 8, .74) repeating-linear-gradient(90deg, rgba(255, 243, 234, .07) 0 1px, transparent 1px 3px);
  transition: border-color .2s, background-color .2s, border-radius .25s; }
.yuvarlak svg { width: 18px; height: 18px; }
.yuvarlak::after { content: ""; position: absolute; inset: -3px; }
.yuvarlak:hover { border-color: var(--metin); background-color: rgba(40, 36, 32, .7); }
.yuvarlak[aria-expanded="true"], .yuvarlak[aria-pressed="true"] { border-radius: 9px; border-color: var(--metin); }

.ust-logo { position: fixed; top: 22px; right: 34px; z-index: 55; display: block; padding: 6px; }
.ust-logo img { width: 128px; height: auto; }

/* ---------- menü katmanı: dev Futura bağlantılar ---------- */
.menu { position: fixed; inset: 0; z-index: 54; display: grid; place-items: center; background: rgba(0, 0, 0, .78); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.menu.acik { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.menu ul { list-style: none; margin: 0; padding: 0; text-align: center; }
.menu li a { display: inline-block; font: 700 clamp(30px, min(8.4vh, 10.5vw), 92px)/1.02 var(--f-baslik); letter-spacing: -.01em; text-transform: uppercase; color: var(--menu-soluk); text-decoration: none; padding: .04em .1em; transition: color .2s; }
.menu li a:hover, .menu li a:focus-visible, .menu li a[aria-current="page"] { color: var(--metin); }
.menu-alt { position: absolute; left: 0; right: 0; bottom: 42px; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 28px; font: 500 13px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--metin-2); }
.menu-alt a { text-decoration: none; }
.menu-alt a:hover { color: var(--metin); }


/* köşe parantezli düğme ("SCROLL TO LAND" karşılığı) */
.kose-dugme { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 30px; cursor: pointer; text-decoration: none; text-align: center;
  font: 500 13px/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--metin);
  background: rgba(18, 16, 14, .8) repeating-linear-gradient(90deg, rgba(255, 243, 234, .055) 0 1px, transparent 1px 4px);
  border: 1.5px solid rgba(255, 243, 234, .82); border-radius: 5px; transition: background-color .2s; }
.kose-dugme:hover { background-color: rgba(48, 43, 38, .75); }
.kose-dugme.dolu { background: var(--metin); color: #000; border-color: var(--metin); }
.kose-dugme.dolu:hover { background: #fff; }
.kose-dugme.kucuk { min-height: 44px; padding: 0 20px; font-size: 12px; }
/* display: inline-flex, hidden özniteliğini ezmesin (kartta bağlantısı olmayan "Yol tarifi" gizli kalır) */
.kose-dugme[hidden] { display: none; }

/* mono etiketler */
.etiket { font: 500 12px/1.35 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--metin-2); }
.etiket.parlak { color: var(--metin); }

/* ======================================================================
   ANA SAHNE: uzaydan Samsun'a
   ====================================================================== */
.sahne-bolum { position: relative; height: 470vh; background: #000; }
.sahne { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #000; isolation: isolate;
  --hero: 1; --ozet: 0; --yildiz: 1; --yaklas: 0; }
/* --yaklas yalnız küre inerken (yavaş bağlantı) kaydırmayla artar; küre gelince 0'a döner */
.yildizlar { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: var(--yildiz);
  transform: scale(calc(1 + var(--yaklas) * .6)); transition: transform .6s ease-out; }
.kure { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.kure.hazir { opacity: 1; }
.kure .cesium-widget, .kure canvas { width: 100%; height: 100%; display: block; touch-action: pan-y; }
.kure .cesium-widget { position: relative; }
.kure-golge { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: var(--hero);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) calc(var(--ufuk, 45%) + 26px), rgba(0, 0, 0, .46) calc(var(--ufuk, 45%) + 110px), rgba(0, 0, 0, .62) 76%, rgba(0, 0, 0, .74) 100%), radial-gradient(70% 45% at 50% 66%, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)); }

/* dev başlık küre ARKASINDA durur; ufuk harflerin alt kısmını örter */
.hero-baslik { position: absolute; z-index: 3; left: 0; right: 0; top: 0; margin: 0; pointer-events: none; font-weight: 700;
  opacity: var(--hero); transform: translate3d(0, calc((1 - var(--hero)) * -9svh), 0); }
.hero-ust { position: absolute; top: 21.5svh; left: 50%; transform: translateX(-50%); width: min(1160px, calc(100vw - 2 * var(--kenar)));
  display: flex; justify-content: center; font: 700 clamp(17px, 3.1svh, 28px)/1 var(--f-baslik); letter-spacing: .01em; text-transform: uppercase; color: var(--baslik); white-space: nowrap; }
/* "sadece." gerçek logo dosyası; yükseklik betikle ekrana göre ayarlanır */
.hero-dev { position: absolute; top: 28.2svh; left: 50%; transform: translateX(-50%); display: block;
  height: var(--dev-yuk, 200px); width: auto; max-width: none; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .55)); }

/* ön katman: künye, açıklama, düğme */
.hero-on { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: var(--hero); transform: translate3d(0, calc((1 - var(--hero)) * -5svh), 0); }
.hero-on.gizli { visibility: hidden; }
.hero-satir { position: absolute; top: 56svh; left: 50%; transform: translateX(-50%); width: min(640px, calc(100vw - 2 * var(--kenar))); }
.hero-aciklama { margin: 0; text-align: center; font: 700 clamp(16px, 2.2svh, 19px)/1.38 var(--f-baslik); color: var(--metin); text-wrap: balance; text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
.hero-eylem { position: absolute; top: 76svh; left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: 26px; pointer-events: auto; }
.hero-ipucu { margin: 0; font: 500 12px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--metin-3); text-align: center; }

/* iniş sırasında üst orta gösterge */
.hud { position: absolute; z-index: 6; top: 30px; left: 50%; transform: translateX(-50%); text-align: center; pointer-events: none; opacity: 0; transition: opacity .4s; }
.hud.gorunur { opacity: 1; }
.hud .etiket { color: var(--metin); text-shadow: 0 1px 6px rgba(0, 0, 0, .8); white-space: nowrap; }
/* küre inene kadar (yavaş bağlantı) gösterge "Dünya yükleniyor…" der, yavaşça nabız atar */
.hud.yukleniyor .etiket { animation: nabiz 1.6s ease-in-out infinite; }
@keyframes nabiz { 50% { opacity: .45; } }

/* hedef vizörü: inişte Samsun'u işaretler */
.vizor { position: absolute; z-index: 6; left: 0; top: 0; width: 92px; height: 92px; margin: -46px 0 0 -46px; pointer-events: none; opacity: 0; will-change: transform, opacity; }
.vizor i { position: absolute; width: 18px; height: 18px; border: 2px solid var(--metin); }
.vizor i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.vizor i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.vizor i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.vizor i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.vizor b { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--vurgu); box-shadow: 0 0 0 3px rgba(234, 87, 44, .28); }
.vizor span { position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-50%); white-space: nowrap; display: grid; gap: 4px; }
.vizor strong { font: 700 22px/1 var(--f-baslik); letter-spacing: .01em; color: var(--metin); text-shadow: 0 1px 10px rgba(0, 0, 0, .7); }
.vizor em { font: 500 12px/1 var(--f-mono); font-style: normal; letter-spacing: .1em; color: var(--metin-2); text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }

/* ---------- varış: harita katmanları ---------- */
.ozet { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.ozet-ust, .cetvel { opacity: var(--ozet); }
.ozet.etkin { pointer-events: auto; }
.surukle-alan { position: absolute; inset: 0; cursor: grab; touch-action: pan-y; }
.surukle-alan.tutuyor { cursor: grabbing; }
.ozet-ust { position: absolute; top: 36px; left: 50%; transform: translateX(-50%); z-index: 3; display: grid; justify-items: center; gap: 10px; pointer-events: none; }
.ozet-ust .etiket { color: var(--metin); text-shadow: 0 1px 6px rgba(0, 0, 0, .85); }
.kesif-ac { pointer-events: auto; display: none; }
.kesif-cik { display: none; align-items: center; gap: 8px; }
.kesif-cik svg { width: 14px; height: 14px; }
/* şehir dışındaki (uzak) marka için üst şeritteki yön düğmesi; okun yönünü sahne.js verir.
   Gizliyken de yer kaplar: logo yerleşimi şeridi engel sayar, düğme çıkınca logoların üstüne binmez */
.uzak-isaret { gap: 8px; white-space: nowrap; pointer-events: auto; }
.uzak-isaret.gizli { visibility: hidden; pointer-events: none; }
.uzak-ok { display: inline-block; font-size: 15px; line-height: 1; }
.isaret.merkez .isaret-kutu img { left: 11px; top: 11px; width: 36px; height: 36px; }
.cizgiler { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.cizgiler line { stroke: var(--kose); stroke-width: 1.25; opacity: 0; }
.nokta { position: absolute; left: 0; top: 0; z-index: 2; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: var(--vurgu); border: 2px solid #fff; box-shadow: 0 0 0 4px rgba(234, 87, 44, .32), 0 1px 4px rgba(0, 0, 0, .6); }
.nb { white-space: nowrap; }
.nokta.temsili { background: transparent; border-color: var(--kose); box-shadow: 0 1px 4px rgba(0, 0, 0, .6); }

.isaret { position: absolute; left: 0; top: 0; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; text-align: left; will-change: transform, opacity;
  --g: 0; opacity: var(--g); }
.isaret .isaret-kutu { transform: scale(calc(.9 + .1 * var(--g))); transform-origin: 50% 60%; }
.isaret.solda { flex-direction: row-reverse; text-align: right; }
.isaret-kutu { flex: none; position: relative; width: var(--kutu-g, 104px); height: var(--kutu-y, 68px); border-radius: 7px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .55); }
.isaret-kutu img { position: absolute; left: 9px; top: 7px; width: calc(100% - 18px); height: calc(100% - 14px); max-width: none; object-fit: contain; }
.isaret-ad { max-width: 150px; font: 600 12px/1.25 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--metin); text-shadow: 0 1px 3px #000, 0 0 10px rgba(0, 0, 0, .9); }
.isaret-ad small { display: block; font-weight: 500; letter-spacing: .06em; color: var(--metin-2); margin-top: 3px; font-size: 12px; }
.isaret.merkez .isaret-kutu { width: 58px; height: 58px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(255, 243, 234, .9), 0 0 0 7px rgba(0, 0, 0, .35), 0 2px 12px rgba(0, 0, 0, .6); }
.isaret.secili .isaret-kutu { box-shadow: 0 0 0 2px var(--vurgu), 0 4px 18px rgba(0, 0, 0, .7); }

.ilce { position: absolute; left: 0; top: 0; z-index: 1; display: grid; justify-items: center; gap: 2px; pointer-events: none; transform: translate(-50%, -100%); will-change: transform; opacity: 0; }
.ilce b { font: 400 13px/1 var(--f-govde); color: var(--metin); text-shadow: 0 1px 4px #000; }
.ilce span { font: 700 clamp(20px, 2.1vw, 28px)/1 var(--f-baslik); letter-spacing: .01em; color: var(--metin); text-shadow: 0 1px 2px rgba(0, 0, 0, .8), 0 0 16px rgba(0, 0, 0, .65); }

/* ---------- alt cetvel ---------- */
.cetvel { position: absolute; z-index: 4; left: 50%; bottom: 52px; transform: translateX(-50%); width: min(1070px, calc(100vw - 2 * var(--kenar) - 40px)); height: 64px; }
.cetvel-pencere { position: absolute; inset: 0; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.cetvel-serit { position: absolute; left: 0; top: 0; height: 100%; margin: 0; padding: 0; list-style: none; will-change: transform; }
.cetvel-serit li { position: absolute; top: 0; bottom: 0; width: 150px; border-left: 2px solid var(--cizgi); }
.cetvel-serit li.uc-li { border-left: 0; }
.cetvel-serit button, .cetvel-serit .uc { display: flex; align-items: flex-start; width: 100%; height: 100%; margin: 0; padding: 4px 12px 0 10px; border: 0; background: none; cursor: pointer; text-align: left; vertical-align: top;
  font: 500 12px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--metin); text-shadow: 0 1px 4px #000; }
.cetvel-serit button span { display: block; }
.cetvel-serit .uc { color: var(--metin-2); cursor: default; }
.cetvel-serit button[aria-current="true"] { color: #fff; }
.cetvel-serit button:hover { color: #fff; background: linear-gradient(180deg, rgba(255, 243, 234, .08), rgba(255, 243, 234, 0)); }
.cetvel-taban { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--cizgi); opacity: .95; }
.cetvel-imlec { position: absolute; left: 50%; bottom: 8px; width: 0; height: 0; margin-left: -8px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 12px solid var(--vurgu); filter: drop-shadow(0 1px 3px #000); }
.cetvel-bolge { position: absolute; left: 50%; bottom: -44px; transform: translateX(-50%); margin: 0; white-space: nowrap; font: 700 30px/1 var(--f-baslik); letter-spacing: .01em; color: var(--metin); text-shadow: 0 1px 10px rgba(0, 0, 0, .8); }

/* ---------- marka detay kartı ---------- */
.detay { position: absolute; z-index: 7; top: 92px; right: 42px; width: 372px; max-height: calc(100% - 92px - 176px); overflow: auto; overscroll-behavior: contain;
  padding: 22px 22px 20px; border-radius: var(--r-b); background: #0a0908;
  box-shadow: 0 0 0 1px rgba(255, 243, 234, .08), 0 24px 60px rgba(0, 0, 0, .55); opacity: 0; transform: translateX(16px); visibility: hidden; transition: opacity .3s, transform .3s, visibility 0s linear .3s; }
.detay.acik { opacity: 1; transform: none; visibility: visible; transition: opacity .3s, transform .3s; }
.detay-ust { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.detay-logo { position: relative; height: 132px; border-radius: var(--r-o); background: #fff; margin: 8px 0 18px; }
.detay-logo img { position: absolute; inset: 18px 26px; width: calc(100% - 52px); height: calc(100% - 36px); max-width: none; object-fit: contain; }
.detay-logo.merkez { background: #000; box-shadow: inset 0 0 0 1px rgba(255, 243, 234, .14); }
.detay h2 { margin: 0 0 4px; font: 700 28px/1.1 var(--f-baslik); letter-spacing: -.005em; color: var(--metin); }
.detay-sektor { margin: 0 0 16px; font-size: 16px; line-height: 1.5; color: var(--metin-2); }
.detay dl { margin: 0 0 18px; display: grid; gap: 12px; }
.detay dt { font: 600 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--metin-3); margin-bottom: 5px; }
.detay dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--metin); }
.detay-eylem { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.detay-gezin { display: flex; justify-content: space-between; gap: 10px; }
.metin-dugme { border: 0; background: none; cursor: pointer; padding: 14px 0; margin: -8px 0; font: 600 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--metin-2); text-decoration: none; }
.metin-dugme:hover { color: var(--metin); }

/* keşif kipinde aynı düğme dolgulu "Haritadan çık" olur ve şeridin en üstüne geçer: çıkış hep göz önünde */
html.kesif .kesif-ac { display: inline-flex; order: -1; }
html.kesif .kesif-gir { display: none; }
html.kesif .kesif-cik { display: inline-flex; }
html.kesif, html.kesif body { overflow: hidden; }
html.kesif .sahne { position: fixed; inset: 0; z-index: 30; }
html.kesif .araclar, html.kesif .ust-logo { visibility: hidden; }

.kredi { position: absolute; z-index: 6; right: 30px; bottom: 16px; max-width: 46vw; text-align: right; font: 400 12px/1.35 var(--f-govde); color: #a39a92; opacity: calc(.45 + var(--ozet) * .55); text-shadow: 0 1px 3px #000; }
.kredi a { color: inherit; }
.kredi .cesium-credit-logoContainer, .kredi .cesium-credit-expand-link { display: none !important; }
.kredi .cesium-credit-textContainer, .kredi .cesium-credit-textContainer * { display: inline !important; }

html.sahne-yedek .sahne-bolum { height: 100vh; height: 100svh; }
html.sahne-yedek .ozet, html.sahne-yedek .kredi { display: none; }

/* ======================================================================
   İÇERİK BÖLÜMLERİ
   ====================================================================== */
.bolum { position: relative; padding: 112px var(--kenar); background: var(--zemin); }
.bolum.koyu { background: var(--zemin-2); }
.bolum-ic { width: 100%; max-width: var(--icerik); margin: 0 auto; }
.bolum-bas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 28px 64px; align-items: end; margin-bottom: 56px; }
.bolum-bas .etiket { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.bolum-bas .etiket::after { content: ""; height: 2px; width: 72px; background: var(--metin-3); opacity: .8; }
.bolum-bas h2 { margin: 0; font: 700 clamp(34px, 4.2vw, 58px)/1.02 var(--f-baslik); letter-spacing: -.012em; color: var(--metin); text-wrap: balance; }
.bolum-bas p { margin: 0; color: var(--metin-2); font-size: 18px; line-height: 1.7; }

/* hizmet şeridi: cetvel diliyle kartlar */
.hizmet-serit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 2px solid var(--cizgi); }
.hizmet { position: relative; display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 14px; align-content: start; padding: 6px 30px 34px 22px; border-left: 2px solid var(--cizgi); text-decoration: none; transition: background-color .25s; }
.hizmet:nth-child(n+4) { padding-top: 34px; }
.hizmet:hover { background: linear-gradient(180deg, rgba(255, 243, 234, .055), rgba(255, 243, 234, 0) 70%); }
.hizmet .etiket { color: var(--metin); }
.hizmet h3 { margin: 18px 0 0; font: 700 clamp(25px, 2.2vw, 31px)/1.08 var(--f-baslik); color: var(--metin); }
.hizmet p { margin: 0; color: var(--metin-2); font-size: 17px; line-height: 1.65; }
.hizmet ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 7px; }
.hizmet li { position: relative; padding-left: 18px; font-size: 15.5px; line-height: 1.45; color: var(--metin-2); }
.hizmet li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 2px; background: var(--kose); }
.hizmet .devam { align-self: end; padding-top: 10px; font: 600 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--metin); }
.hizmet .devam span { display: inline-block; transition: transform .25s; }
.hizmet:hover .devam span { transform: translateX(5px); }

/* referans ızgarası */
/* 11 referans: geniş ekranda 6 + 5, dar masaüstünde 4 + 4 + 3 (5 sütunda son satırda tek kart kalıyordu) */
.ref-izgara { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 46px 34px; }
@media (max-width: 1365px) { .ref-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ref { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 16px; min-width: 0; text-decoration: none; }
.ref span a, .kunye-satir a, .menu-alt a { display: inline-block; padding: 12px 0; margin: -12px 0; }
.ref-kutu { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-o); background: #fff; }
.ref-kutu img { position: absolute; inset: 16px 20px; width: calc(100% - 40px); height: calc(100% - 32px); max-width: none; object-fit: contain; }
.ref-kutu.merkez { background: #000; box-shadow: inset 0 0 0 1px rgba(255, 243, 234, .16); }
.ref b { display: block; font: 700 19px/1.2 var(--f-baslik); color: var(--metin); }
.ref span { display: block; margin-top: 5px; font: 500 12px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--metin-2); }


/* süreç: cetvel üzerinde dört adım */
.surec { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 58px; }
.surec::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--cizgi); }
.adim { position: relative; display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; padding: 0 28px 0 22px; border-left: 2px solid var(--cizgi); }
.adim::before { content: ""; position: absolute; left: -9px; top: -66px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 12px solid var(--vurgu); }
.adim .etiket { color: var(--metin); }
.adim h3 { margin: 14px 0 12px; font: 700 26px/1.12 var(--f-baslik); color: var(--metin); }
.adim p { margin: 0; color: var(--metin-2); font-size: 17px; line-height: 1.65; }

/* blog kartları */
.kart-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.kart { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; text-decoration: none; }
.kart-ust { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 2px solid var(--cizgi); }
.kart h3 { margin: 0 0 14px; font: 700 clamp(23px, 1.9vw, 27px)/1.16 var(--f-baslik); color: var(--metin); text-wrap: balance; }
.kart p { margin: 0 0 18px; color: var(--metin-2); font-size: 17px; line-height: 1.65; }
.kart .devam { align-self: end; font: 600 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.kart:hover h3 { color: #fff; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--vurgu); }

/* SSS */
.sss { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 56px; }
.sss details { border-top: 2px solid var(--cizgi-2); }
.sss details:nth-last-child(-n+2) { border-bottom: 2px solid var(--cizgi-2); }
.sss summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 14px; align-items: baseline; padding: 24px 0; }
.sss summary::-webkit-details-marker { display: none; }
.sss summary h3 { margin: 0; font: 600 21px/1.3 var(--f-baslik); color: var(--metin); }
.sss summary i { font: 500 22px/1 var(--f-mono); font-style: normal; color: var(--metin-2); transition: transform .25s; }
.sss details[open] summary i { transform: rotate(45deg); }
.sss details > div { padding: 0 38px 26px 0; color: var(--metin-2); font-size: 17px; line-height: 1.7; }
.sss details > div p { margin: 0; }

/* iletişim */
.iletisim-izgara { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.iletisim-satirlar { display: grid; border-top: 2px solid var(--cizgi); }
.iletisim-satir { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; padding: 24px 0; border-bottom: 2px solid var(--cizgi-2); text-decoration: none; }
.iletisim-satir .etiket { padding-top: 9px; }
.iletisim-satir b { font: 600 clamp(21px, 2vw, 28px)/1.25 var(--f-baslik); color: var(--metin); overflow-wrap: anywhere; }
.iletisim-satir.adres b { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.45; font-weight: 500; }
a.iletisim-satir:hover b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--vurgu); }
.iletisim-kart { padding: 34px; border-radius: var(--r-b); background: var(--zemin-3); box-shadow: 0 0 0 1px rgba(255, 243, 234, .07); }
.iletisim-kart h2, .iletisim-kart h3 { margin: 0 0 12px; font: 700 28px/1.12 var(--f-baslik); color: var(--metin); }
.iletisim-kart p { margin: 0 0 26px; color: var(--metin-2); font-size: 17px; }
.eylemler { display: flex; flex-wrap: wrap; gap: 20px; }

/* ---------- alt bilgi ---------- */
.alt { position: relative; padding: 88px var(--kenar) 40px; background: var(--zemin-2); }
.alt-ic { max-width: var(--icerik); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 36px; }
.alt-marka img { width: 190px; height: auto; margin-bottom: 22px; }
.alt-marka p { margin: 0; color: var(--metin-2); font-size: 16px; line-height: 1.65; max-width: 380px; }
.alt h2 { margin: 6px 0 16px; font: 600 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--metin-3); }
.alt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.alt li, .alt address { font-size: 16px; line-height: 1.55; color: var(--metin-2); font-style: normal; }
.alt a { text-decoration: none; }
.alt a:hover { color: var(--metin); text-decoration: underline; text-underline-offset: 4px; }
.alt-son { max-width: var(--icerik); margin: 64px auto 0; padding-top: 24px; border-top: 2px solid var(--cizgi-2); display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; font: 500 12px/1.5 var(--f-mono); letter-spacing: .06em; color: var(--metin-3); }

/* ======================================================================
   İÇ SAYFALAR (hizmet, blog, ajans, iletişim)
   ====================================================================== */
.sayfa-bas { position: relative; padding: 168px var(--kenar) 64px; background: radial-gradient(90% 70% at 50% 0%, #17130f 0%, #000 70%); }
.sayfa-bas .bolum-ic, .bolum-ic.dar { max-width: 1180px; }
.sayfa-bas.genis .bolum-ic { max-width: var(--icerik); }
.sayfa-bas + .bolum { padding-top: 40px; }
.yol { display: flex; gap: 10px; margin: 0 0 30px; padding: 0; list-style: none; font: 500 12px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--metin-3); }
.yol li { flex: none; white-space: nowrap; }
.yol li:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.yol li + li::before { content: "/"; margin-right: 10px; color: var(--cizgi-2); }
.yol a { display: inline-block; padding: 14px 0; margin: -14px 0; text-decoration: none; color: var(--metin-2); }
.yol a:hover { color: var(--metin); }
.sayfa-bas h1 { margin: 0; font: 700 clamp(34px, 5.6vw, 72px)/1.04 var(--f-baslik); letter-spacing: -.015em; color: var(--metin); text-wrap: balance; }
.sayfa-bas .giris { margin: 26px 0 0; max-width: 760px; font-size: 20px; line-height: 1.65; color: var(--metin-2); }
.sayfa-bas .kunye-satir { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 14px 40px; padding-top: 18px; border-top: 2px solid var(--cizgi); }
.kunye-satir div { display: grid; gap: 6px; }
.kunye-satir dt, .kunye-satir .etiket { color: var(--metin-3); }
.kunye-satir dd { margin: 0; font: 600 18px/1.3 var(--f-baslik); color: var(--metin); }

.duzen { display: grid; grid-template-columns: minmax(0, 720px) minmax(0, 340px); gap: 72px; justify-content: space-between; max-width: 1180px; margin: 0 auto; }
.yazi { font-size: 19px; line-height: 1.8; color: var(--metin); }
.yazi > :first-child { margin-top: 0; }
.yazi p { margin: 0 0 1.15em; }
.yazi h2 { margin: 2.1em 0 .7em; font: 700 clamp(27px, 2.6vw, 34px)/1.15 var(--f-baslik); letter-spacing: -.008em; color: var(--metin); scroll-margin-top: 90px; }
.yazi h3 { margin: 1.7em 0 .5em; font: 600 23px/1.25 var(--f-baslik); color: var(--metin); }
.yazi ul, .yazi ol { margin: 0 0 1.2em; padding-left: 1.2em; }
.yazi li { margin: 0 0 .5em; padding-left: .2em; }
.yazi ul li::marker { color: var(--kose); }
.yazi ol li::marker { font-family: var(--f-mono); font-size: .8em; color: var(--kose); }
.yazi a { color: var(--metin); text-decoration: underline; text-decoration-color: var(--vurgu); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.yazi a:hover { color: #fff; text-decoration-color: var(--vurgu-acik); }
.yazi strong { color: #fff; }
.yazi blockquote { margin: 1.6em 0; padding: 4px 0 4px 26px; border-left: 3px solid var(--kose); font: 600 22px/1.5 var(--f-baslik); color: var(--metin); }

.yan { align-self: start; display: grid; gap: 30px; }
.yan.yapiskan { position: sticky; top: 96px; }
.yan-kutu { padding: 26px; border-radius: var(--r-b); background: var(--zemin-3); box-shadow: 0 0 0 1px rgba(255, 243, 234, .06); }
.yan-kutu h2 { margin: 0 0 16px; font: 600 12px/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--metin-3); }
.yan-kutu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.yan-kutu li { position: relative; padding-left: 18px; font-size: 16px; line-height: 1.5; color: var(--metin-2); }
.yan-kutu li::before { content: ""; position: absolute; left: 0; top: .66em; width: 8px; height: 2px; background: var(--kose); }
.yan-kutu p { margin: 0 0 18px; font-size: 16px; line-height: 1.6; color: var(--metin-2); }
.yan-kutu .kose-dugme { width: 100%; padding: 14px 22px; line-height: 1.45; }
.yan-kutu li a { text-decoration: none; color: var(--metin-2); transition: color .2s; }
.yan-kutu li a:hover { color: var(--metin); }
.icindekiler a { font-size: 15.5px; }
.kisaca dl { margin: 0; display: grid; gap: 14px; }
.kisaca dt { margin: 0 0 4px; font: 600 12px/1.25 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--metin-3); }
.kisaca dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--metin); }

/* Karadeniz il kartları: bağlantısız kartta altı çizili başlık yok, çapa ile gelinen kart vurgulu */
.il-izgara .kart { scroll-margin-top: 110px; }
div.kart:hover h3 { color: var(--metin); text-decoration: none; }
.il-izgara .kart:target .kart-ust { border-bottom-color: var(--vurgu); }
.il-izgara .kart:target h3 { color: #fff; }
.icindekiler li::before { background: var(--cizgi-2); }

.bolum-ic > .cta-bant:first-child { margin-top: 0; }
.cta-bant { margin-top: 64px; padding: 38px 40px; border-radius: var(--r-b); background: var(--zemin-3); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: center; box-shadow: 0 0 0 1px rgba(255, 243, 234, .07); }
.cta-bant h2 { margin: 0 0 8px; font: 700 clamp(25px, 2.4vw, 32px)/1.15 var(--f-baslik); }
.cta-bant p { margin: 0; color: var(--metin-2); font-size: 17px; }

.liste-baslik { margin: 0 0 26px; font: 600 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--metin-3); }
/* il bağlantı şeridi (ana sayfa hizmet bölgeleri, hizmetler sayfası); dokunma alanı 44 px */
.il-serit { display: flex; flex-wrap: wrap; align-items: center; gap: 0 26px; margin: 34px 0 0; font: 500 17px/1 var(--f-baslik); }
.il-serit .etiket { flex-basis: 100%; margin-bottom: 6px; }
.il-serit a { display: inline-flex; align-items: center; min-height: 44px; color: var(--metin); text-decoration: underline; text-decoration-color: var(--cizgi-2); text-decoration-thickness: 2px; text-underline-offset: 6px; transition: color .2s, text-decoration-color .2s; }
.il-serit a:hover { color: #fff; text-decoration-color: var(--vurgu); }
/* 2 ya da 4 kartlık ızgara: geniş ekranda iki sütun, son satırda boş hücre kalmasın */
@media (min-width: 961px) { .kart-izgara.iki { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 404 */
.bulunamadi { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 120px var(--kenar); }
.bulunamadi h1 { margin: 0 0 18px; font: 700 clamp(48px, 9vw, 120px)/1 var(--f-baslik); color: var(--baslik); }
.bulunamadi p { margin: 0 0 34px; color: var(--metin-2); }

/* ---------- belirme: açılışta bir kez, küçük ---------- */
.bel { opacity: 0; transform: translateY(6px); transition: opacity .7s ease, transform .7s ease; transition-delay: var(--g, 0s); }
.bel.goster { opacity: 1; transform: none; }

/* ======================================================================
   DUYARLI
   ====================================================================== */
@media (max-width: 1365px), (max-height: 760px) {
  .isaret-ad small { display: none; }
}
@media (min-width: 701px) and (max-height: 820px) {
  .detay { top: 80px; max-height: calc(100% - 80px - 140px); padding: 18px 20px 14px; }
  .detay-ust { margin-bottom: 10px; }
  .detay-logo { height: 92px; margin: 4px 0 12px; }
  .detay-logo img { inset: 12px 22px; width: calc(100% - 44px); height: calc(100% - 24px); }
  .detay h2 { font-size: 24px; }
  .detay-sektor { margin-bottom: 10px; font-size: 15px; }
  .detay dl { gap: 8px; margin-bottom: 12px; }
  .detay dt { margin-bottom: 3px; }
  .detay dd { font-size: 15px; line-height: 1.4; }
  .detay-eylem { margin-bottom: 12px; }
}
@media (max-width: 1180px) {
  .ref-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .duzen { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
  .yan, .yan.yapiskan { position: static; }
  .alt-ic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .bolum { padding: 88px var(--kenar); }
  .bolum-bas { grid-template-columns: 1fr; margin-bottom: 42px; }
  .hizmet-serit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hizmet:nth-child(n+3) { padding-top: 34px; }
  .surec { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 0; }
  .adim:nth-child(n+3)::before { display: none; }
  .kart-izgara { grid-template-columns: 1fr; gap: 34px; }
  .sss { grid-template-columns: 1fr; }
  .sss details:nth-last-child(2) { border-bottom: 0; }
  .iletisim-izgara { grid-template-columns: 1fr; }
  .ref-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 22px; }
  .detay { right: 24px; width: 340px; }
}
@media (max-width: 700px) {
  body { font-size: 17px; }
  /* dört basamaklı kırıntıda (alt hizmet, bölge içindeki il) aradaki üst basamak telefonda gizlenir; şemada durur */
  .yol li:nth-child(n+3):not(:last-child) { display: none; }
  .araclar { top: 20px; left: 20px; gap: 8px; }
  .yuvarlak { width: 38px; height: 38px; }
  .ust-logo { top: 16px; right: 20px; }
  .ust-logo img { width: 104px; }
  .hero-ust { top: 19svh; font-size: 15px; }
  .hero-dev { top: 25svh; }
  .hero-satir { top: 53svh; }
  .hero-aciklama { font-size: 16px; }
  .hero-eylem { top: 75svh; gap: 18px; width: calc(100vw - 40px); }
  .hud { top: 74px; }
  .ozet-ust { top: 74px; }
  .kesif-ac { display: inline-flex; }
  .ozet-ust .etiket { display: none; }
  html.kesif .ozet-ust .etiket { display: block; }
  .surukle-alan { pointer-events: none; }
  html.kesif .surukle-alan { pointer-events: auto; touch-action: none; }
  .isaret { gap: 8px; }
  .isaret-ad { display: none; max-width: 150px; font-size: 12px; }
  .isaret-ad small { display: none; }
  .isaret.secili .isaret-ad { display: block; }
  .cetvel { bottom: 78px; width: calc(100vw - 40px); height: 58px; }
  .cetvel-serit li { width: 132px; }
  .cetvel-bolge { font-size: 24px; bottom: -36px; }
  .detay { left: 10px; right: 10px; top: auto; bottom: 34px; width: auto; max-height: 62svh; padding: 18px 18px 16px; border-radius: 16px; transform: translateY(18px); }
  .detay-logo { height: 104px; margin: 4px 0 14px; }
  .detay h3 { font-size: 25px; }
  .kredi { left: 16px; right: 16px; bottom: 9px; max-width: none; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hizmet-serit { grid-template-columns: 1fr; }
  .hizmet, .hizmet:nth-child(n+2) { padding: 30px 8px 30px 18px; }
  .surec { grid-template-columns: 1fr; gap: 40px; padding-top: 0; }
  .surec::before, .adim::before { display: none; }
  .ref-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sss summary { grid-template-columns: minmax(0, 1fr) 18px; gap: 14px; }
  .sss summary h3 { font-size: 19px; }
  .sss details > div { padding: 0 8px 22px 0; }
  .iletisim-satir { grid-template-columns: 1fr; gap: 6px; }
  .iletisim-kart { padding: 26px 22px; }
  .iletisim-kart .eylemler .kose-dugme, .cta-bant .eylemler .kose-dugme { flex: 1 1 auto; }
  .alt ul { gap: 0; }
  .alt li a { display: inline-block; padding: 10px 0; }
  .yan-kutu ul:has(li > a) { gap: 0; }
  .yan-kutu li > a { display: block; padding: 10px 0; }
  .yan-kutu li:has(> a)::before { top: calc(10px + .66em); }
  .alt-ic { grid-template-columns: 1fr; gap: 34px; }
  .sayfa-bas { padding-top: 128px; }
  .sayfa-bas .giris { font-size: 18px; }
  .yazi { font-size: 18px; }
  .cta-bant { grid-template-columns: 1fr; padding: 28px 24px; }
}
/* Lenis (yalnız ana sayfa, masaüstü tekerleği) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
body.ana .gren { display: none; }

/* çerez onay bandı (olcum.js kurar; ölçüm kimliği yoksa hiç basılmaz) */
.onay { position: fixed; right: 28px; bottom: 28px; z-index: 58; width: min(440px, calc(100% - 56px)); padding: 22px 22px 20px; border-radius: var(--r-o);
  background: var(--zemin-3); box-shadow: 0 0 0 1px rgba(255, 243, 234, .1), var(--golge); }
.onay p { margin: 0 0 18px; font-size: 16px; line-height: 1.55; color: var(--metin-2); }
.onay-dugmeler { display: flex; gap: 26px; }
.onay-dugmeler .kose-dugme { flex: 1 1 0; }
@media (max-width: 699px) {
  .onay { left: 16px; right: 16px; bottom: 16px; width: auto; padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .bel { opacity: 1; transform: none; transition: none; }
  .kure { transition: none; }
  .hud.yukleniyor .etiket { animation: none; }
  .yildizlar { transition: none; }
}