/* melihbayrak.com — koyu, parlak, sade */

/* Geist ve Geist Mono: SIL Open Font License 1.1 (fonts/OFL.txt) */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/geist-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/geist-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: 'Geist Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/assets/fonts/geist-mono-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/assets/fonts/geist-mono-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; }

:root {
  color-scheme: dark;   /* kaydırma çubuğu ve yazı kutuları da koyu çizilir, sayfa açılırken beyaz parlamaz */
  --bg: #08090a;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);
  --line-3: rgba(255, 255, 255, .24);
  --text: #f7f8f8;
  --text-2: #c9ccd1;
  --text-3: #8a8f98;
  --text-4: #787d87;   /* en soluk yazı; sayfa zemininde 4,8, kutu içinde 4,5 karşıtlık (okunurluk sınırı 4,5): daha koyu yapma */
  --accent: #ff7a3d;
  --violet: #8b7cff;
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --mx: 50vw;
  --my: -400px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  font-family: var(--sans); font-size: 16px; line-height: 1.6; color: var(--text-2);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
/* <picture> yalnız WebP/JPG seçimi içindir; kutusu olmaz, içindeki görsel doğrudan yerleşir */
picture { display: contents; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: rgba(255, 122, 61, .35); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
kbd {
  font-family: var(--mono); font-size: 11px; line-height: 1; color: var(--text-3);
  border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px;
  padding: 3px 6px; background: rgba(255, 255, 255, .03);
}
.container { width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: 20px; }
@media (min-width: 720px) { .container { padding-inline: 32px; } }
main { padding-bottom: 96px; }
main:focus { outline: 0; }   /* "İçeriğe geç" bağlantısı odağı buraya taşır; çerçeve gerekmez */
/* Sayfa genişliği bütün sayfalarda aynıdır: 1080, geniş ekranda (1400 ve üstü) 1200. Çok büyük ekranda (2560 × 1440 gibi)
   her sayfanın içeriği dörtte bir büyür, alt satır da aynı genişliğe gelir. Sayfaya özel genişlik kuralı yazılmaz. */
@media (min-width: 1400px) { .container { max-width: 1200px; } }
@media (min-width: 2200px) and (min-height: 1200px) {
  main { zoom: 1.25; }
  .site-footer .container { max-width: 1500px; padding-inline: 40px; }
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 60; padding: 8px 12px; border-radius: 8px; background: var(--text); color: #000; }
.skip:focus { left: 8px; }

/* Arka plan: nokta ızgarası, üstte renkli parıltı ve imleci gecikmeyle izleyen çok soluk bir ışık.
   Noktalar imleçle parlamaz (göz alıyordu); parlak ızgara yalnız sürpriz komutta görünür. */
.bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bg-grid, .bg-grid-hi {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .075) 1px, transparent 1.3px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 25%, transparent 80%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 25%, transparent 80%);
}
.bg-grid-hi { opacity: 0; background-image: radial-gradient(rgba(255, 255, 255, .45) 1px, transparent 1.4px); }
.bg-spot { position: absolute; inset: 0; background: radial-gradient(520px circle at var(--mx) var(--my), rgba(255, 255, 255, .065), transparent 62%); }
.bg-aurora {
  position: absolute; left: 50%; top: -360px; width: 1240px; height: 660px; will-change: transform;
  transform: translateX(-50%);
  background:
    radial-gradient(45% 55% at 32% 50%, rgba(255, 122, 61, .4), transparent 70%),
    radial-gradient(42% 55% at 70% 45%, rgba(139, 124, 255, .38), transparent 70%);
  filter: blur(40px); animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translateX(-46%) translateY(30px) scale(1.06); } }
/* Sürpriz komutta parlayan renkli ışık: üstteki parıltının büyümüş hâlinin hazır resmi; yalnız saydamlığı değişir.
   (Eskiden bulanık parıltının kendisi 1,7 kat büyütülüyordu; telefon o anda bulanık katmanı baştan çizdiği için
   gösteri yazıdan fişeklere geçerken üçte bir saniye donuyordu. Bulanık katmanı büyütme.) */
.bg-bloom {
  position: absolute; inset: 0; opacity: 0;
  background:
    radial-gradient(948px 617px at calc(50% - 379px) 90px, rgba(255, 122, 61, .2), transparent 70%),
    radial-gradient(885px 617px at calc(50% + 422px) 34px, rgba(139, 124, 255, .18), transparent 70%);
}
/* Sürpriz komut ("rmb"): gösteri tam ekran bir tuvale çizilir (assets/fx.js); yazı dağıldığı an ızgara da aydınlanır */
.fx-cv { position: fixed; inset: 0; z-index: 70; width: 100%; height: 100%; pointer-events: none; }
/* Boş yere tıklayınca çıkan kıvılcım (site.js): tıklanan yerden on iki küçük nokta saçılıp söner */
.tap { position: fixed; left: var(--x); top: var(--y); z-index: 60; width: 0; height: 0; pointer-events: none; }
.tap i {
  position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c);
  transform: rotate(var(--a)) translateX(4px); animation: tap-spark .65s cubic-bezier(.15, .7, .3, 1) forwards;
}
@keyframes tap-spark { 70% { opacity: 1; } to { transform: rotate(var(--a)) translateX(var(--d)) scale(.25); opacity: 0; } }
/* Parlak ızgara ve renkli ışık gösteri başlarken hazırlanır (.fx-ready), yazı dağılınca parlar (.fx); ikisini de fx.js koyar */
.bg.fx-ready .bg-grid-hi, .bg.fx .bg-grid-hi { -webkit-mask-image: none; mask-image: none; will-change: opacity; }
.bg.fx-ready .bg-bloom, .bg.fx .bg-bloom { will-change: opacity; }
.bg.fx .bg-grid-hi { animation: fx-grid 2.6s ease both; }
.bg.fx .bg-bloom { animation: fx-bloom 2.6s ease both; }
@keyframes fx-grid { 0%, 100% { opacity: 0; } 25%, 60% { opacity: 1; } }
@keyframes fx-bloom { 0%, 100% { opacity: 0; } 40% { opacity: 1; } }

/* Üst menü: ortada yüzen kapsül; sayfayla birlikte kayar, arkasını bulanıklaştırır.
   Sayfa geçişi adı kapsülün kendisinde durmalı; üst kapsayıcıda olursa bulanıklık çalışmaz. */
.site-header { position: sticky; top: 12px; z-index: 20; margin-top: 12px; padding-inline: 12px; pointer-events: none; }
.header-inner {
  display: flex; align-items: center; gap: 10px; width: max-content; max-width: 100%; height: 50px; margin-inline: auto; padding: 0 8px 0 11px;
  pointer-events: auto; view-transition-name: site-header; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(17, 18, 20, .78);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 18px 50px -18px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .03) inset;
}
.logo { display: flex; align-items: center; gap: 9px; margin-right: 6px; color: var(--text); font-weight: 550; font-size: 15px; letter-spacing: -.01em; white-space: nowrap; }
.logo-mark { width: 28px; height: 28px; flex: none; }
.logo-mark text { font-family: var(--mono); font-weight: 600; font-size: 9.4px; fill: #f7f8f8; }
.logo-cur { animation: blink 1.15s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.site-nav { position: relative; display: none; }
.site-nav a { position: relative; z-index: 1; font-size: 14px; color: var(--text-3); padding: 6px 14px; border-radius: 999px; transition: color .2s; }
.site-nav a[aria-current="page"], .site-nav a.is-go { color: var(--text); }
.site-nav.going a[aria-current="page"]:not(.is-go) { color: var(--text-3); }   /* tıklanınca: yeni sayfanın adı parlar, eskisi söner */
@media (hover: hover) { .site-nav a:hover { color: var(--text); } }   /* dokunmatik ekranda "üstünde kalma" olmaz; dokunulan ad takılı kalmasın */
/* Betik çalışmadan önceki sabit vurgu. Sayfa geçişinde kayan vurguyla aynı adı taşır ki betik yetişmese de vurgu kaysın */
.site-nav:not(.glide) a[aria-current="page"]::before, .legal:not(.glide) a[aria-current="page"]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 999px;
  background: rgba(255, 255, 255, .09); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset;
}
.site-nav:not(.glide) a[aria-current="page"]::before { view-transition-name: nav-glider; }
.legal:not(.glide) a[aria-current="page"]::before { view-transition-name: doc-glider; }
/* Bağlantılar arasında kayan vurgu; konumunu site.js belirler. Yeri "transform" ile değil "left" ile verilir: sayfa
   geçişi parçaların yerini yerleşimden okur; "transform"la duran parça telefonda geçiş sırasında eski yerine dönüp
   yeniden geliyordu ("geri tepme"). Dil düğmesi için de aynı kural geçerli. */
.nav-glider {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: 999px; opacity: 0;
  background: rgba(255, 255, 255, .09); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset;
  transition: left .32s var(--ease), width .32s var(--ease), opacity .2s;
}
.nav-glider.is-on { view-transition-name: nav-glider; }
.cmdk-btn {
  display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 12px; cursor: pointer;
  font-size: 13px; color: var(--text-3); background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line); border-radius: 999px; transition: border-color .2s, color .2s;
}
.cmdk-btn:hover { color: var(--text); border-color: var(--line-2); }
.cmdk-btn .k-desk { display: none; }
/* Dil anahtarı: beyaz düğme seçili dilin üstünde durur, tıklayınca kayar */
.lang-switch { position: relative; display: flex; flex: none; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .025); font-family: var(--mono); font-size: 12px; }
.lang-switch a { position: relative; z-index: 1; width: 34px; padding: 5px 0; text-align: center; color: var(--text-3); transition: color .2s; }
.lang-switch a:hover { color: var(--text); }
.lang-switch a[aria-current="true"] { color: #0b0c0e; }
/* Düğmenin yeri yerleşimle ("left") verilir ve kayma yalnız tıklanınca açılır (.sliding; site.js). Sayfa açılırken
   hiçbir şey kaymaz: düğme sayfa geçişinde ayrı bir parça değildir, üst kapsülle birlikte yerinde durur. */
.lang-thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: 34px; border-radius: 999px; background: var(--text); }
.lang-switch[data-lang="en"] .lang-thumb { left: 37px; }
.lang-switch.sliding .lang-thumb { transition: left .3s var(--ease); }
/* Dar telefonda kapsül sıkışır; en dar ekranda ad gizlenir, simge kalır */
@media (max-width: 400px) {
  .site-header { padding-inline: 8px; }
  .header-inner { gap: 8px; padding: 0 7px 0 10px; }
  .logo { gap: 7px; margin-right: 2px; font-size: 14px; }
}
@media (max-width: 355px) { .logo span { display: none; } }
@media (min-width: 820px) {
  .site-nav { display: flex; }
  .cmdk-btn { padding: 0 6px 0 12px; }
  .cmdk-btn .k-desk { display: inline; }
  .cmdk-btn .k-mob { display: none; }
}

/* Giriş hareketi */
.rise { animation: rise .7s var(--ease) both; }
.d1 { animation-delay: .06s; } .d2 { animation-delay: .12s; } .d3 { animation-delay: .18s; }
.d4 { animation-delay: .24s; } .d5 { animation-delay: .3s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); filter: blur(6px); } }

/* Ortak yazı */
.display {
  text-wrap: balance;
  margin-top: 26px; font-weight: 600; font-size: clamp(42px, 8.2vw, 92px); line-height: 1; letter-spacing: -.045em;
  color: var(--text); background: linear-gradient(180deg, #fff 20%, rgba(255, 255, 255, .56));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-bottom: .08em;
}
.lede { margin-top: 20px; max-width: 36em; font-size: 18px; line-height: 1.55; color: var(--text-3); text-wrap: pretty; }
@media (min-width: 820px) { .lede { font-size: 19px; } }
.page-head { padding-top: 56px; }
@media (min-width: 820px) { .page-head { padding-top: 96px; } }
/* Ana sayfa gibi kapsülün altında ortalanan başlık; başlık sayfanın adı değil, bir cümledir */
.page-head.center { text-align: center; }
.page-head.center .display { max-width: 17em; margin-inline: auto; }
.page-head.center .lede { max-width: 40em; margin-inline: auto; }
.display.md { margin-top: 0; font-size: clamp(30px, 4.2vw, 46px); line-height: 1.08; }
/* Başlık ile alt cümle arası ana sayfadaki oranla (başlık boyunun yaklaşık üçte ikisi) */
.page-head.center .lede { margin-top: 24px; }
/* Uzun (kaydırılan) sayfalarda başlığın üstündeki ve sayfanın altındaki boşluk (Hakkımda, Emlakçı Kariyeri). Tek ekrana
   sığan sayfalarda (ana sayfa, Projeler, İletişim) ölçülen boşluğu izler ki sayfa değiştirince başlık zıplamasın:
   650 piksel yükseklikte 34, MacBook'ta (820) 70, 950'de 111, 1080 ve üstünde 150 (çok büyük ekranda içerikle birlikte
   dörtte bir büyür: 187). Alttaki boşluk üsttekiyle aynıdır, öbür sayfalardaki gibi. Telefonda değişmez (üstte 56,
   altta 96). */
:root { --edge: clamp(28px, calc(34px + (100vh - 650px) * .21 + max(0px, (100vh - 860px) * .16)), 150px); }
@media (min-width: 820px) {
  .page-head.center { padding-top: var(--edge); }
  :is([data-page="about"], [data-page="game"], [data-page="doc"]) main { padding-bottom: var(--edge); }
}
/* Bölümler arası boşluk ekranla ölçeklenir: telefonda ve alçak dizüstünde 64, MacBook'ta 80, büyük ekranda 104 */
.section { margin-top: 64px; }
@media (min-width: 820px) { .section { margin-top: clamp(64px, 9.75vh, 104px); } }
/* Bölüm başlığı: ortada, gerçek bir başlık (küçük büyük harfli etiket değil) */
.section-title { margin-bottom: 26px; text-align: center; font-size: clamp(24px, 3.4vw, 28px); font-weight: 600; letter-spacing: -.03em; color: var(--text); }

/* Kendi kendine yazan satırın imleci */
.cur {
  display: inline-block; width: .52em; height: .09em; margin-left: .06em; border-radius: 2px; vertical-align: baseline;
  background: linear-gradient(90deg, var(--accent), var(--violet)); animation: blink 1.15s steps(1) infinite;
}

/* Düğmeler */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 11px; background: rgba(255, 255, 255, .03);
  font-size: 14.5px; font-weight: 500; color: var(--text); transition: border-color .2s, background .2s, transform .2s var(--ease);
}
.btn:hover { border-color: var(--line-3); background: rgba(255, 255, 255, .06); }
.btn.primary { background: var(--text); border-color: var(--text); color: #0b0c0e; }
.btn.primary:hover { background: #fff; transform: translateY(-1px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.btn-row.center { justify-content: center; margin-top: 0; }
/* Telefonda sayfa sonundaki düğme sırası (Emlakçı Kariyeri ve Hakkımda): asıl düğme tek başına üstte, ötekiler hemen
   altında (kullanıcı istedi; eskiden sığdığı kadarı yan yana diziliyordu). Görünmez bir ara öğe ilk düğmeden sonra satırı
   kırar. Altta iki düğme varsa en dar telefonlarda yan yana sığsınlar diye iç boşlukları ve yazıları biraz küçülür. */
@media (max-width: 540px) {
  .btn-row.lead { row-gap: 5px; }
  .btn-row.lead::before { content: ""; flex-basis: 100%; order: 1; }
  .btn-row.lead > :not(:first-child) { order: 2; }
}
@media (max-width: 380px) { .btn-row.lead > :first-child:nth-last-child(n+3) ~ * { padding-inline: 13px; } }
@media (max-width: 340px) { .btn-row.lead { column-gap: 8px; } .btn-row.lead > :first-child:nth-last-child(n+3) ~ * { padding-inline: 10px; font-size: 13px; } }

/* Durum hapı */
.pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 5px 12px 5px 10px;
  border: 1px solid var(--line-2); border-radius: 999px; background: rgba(255, 255, 255, .03);
  font-size: 13px; line-height: 1.3; color: var(--text-2); transition: border-color .2s, background .2s;
}
a.pill:hover { border-color: var(--line-3); background: rgba(255, 255, 255, .05); }
.pill-k { font-family: var(--mono); font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
.pill-text { transition: opacity .35s; }
.pill-text.out { opacity: 0; }
.pill-arrow { color: var(--text-3); transition: transform .2s var(--ease), color .2s; }
a.pill:hover .pill-arrow { transform: translateX(3px); color: var(--accent); }
.dot { position: relative; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--accent); opacity: 0; animation: ping 2.4s var(--ease) infinite; }
@keyframes ping { 0% { transform: scale(.6); opacity: .7; } 80%, 100% { transform: scale(1.6); opacity: 0; } }
@media (max-width: 480px) { .pill-k { display: none; } }

/* Durum etiketinin üstüne gelince açılan kutu (yalnız fareli cihazlarda) */
.hero-top { position: relative; z-index: 5; }
.pill-wrap { position: relative; }
.hovercard {
  position: absolute; left: 0; top: calc(100% + 10px); width: 100%; padding: 14px; pointer-events: none; text-align: left; /* genişliği her zaman etiketle aynı */
  border: 1px solid var(--line-2); border-radius: 16px; background: #111214;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .03) inset;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .18s, transform .22s var(--ease), visibility 0s .22s;
}
@media (hover: hover) {
  .pill-wrap:hover .hovercard.on, .pill-wrap:focus-within .hovercard.on {
    opacity: 1; visibility: visible; transform: none; transition-delay: .12s, .12s, 0s;
  }
}
/* Kutunun içi ortalıdır ve ana sayfadaki kutuların parçalarıyla kurulur: logo (yoksa simge + ad), mağaza etiketi (.pill),
   cümle, Projeler kutusundaki aşama çubuğu ve tek satır (.tile-steps, .tile-sub), en altta ipucu */
.hovercard { text-align: center; }
.hc-head { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hc-head img { width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
.hc-head b { font-size: 15.5px; font-weight: 550; letter-spacing: -.01em; color: var(--text); }
.hc-head .hc-logo { width: auto; height: 56px; border-radius: 0; box-shadow: none; }
/* Etiket (ve onunla aynı genişlikteki kutu) çok daralırsa mağaza etiketi kutudan taşmaz, sonu kısalır */
.hovercard .hc-pill { max-width: 100%; margin-top: 10px; }
.hc-pill > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.hc-desc { margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: var(--text-3); }
.hc-stage { display: grid; justify-items: center; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.hovercard .hc-sub { margin-top: 10px; }
.hc-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11.5px; color: var(--text-4); }
.hc-foot i { font-style: normal; color: var(--accent); }

/* Işıklı kutular */
.tile, .card, .b, .game-card, .contact-card, .about-card, .plan, .doc-sum {
  --x: 50%; --y: 50%; position: relative; isolation: isolate; overflow: hidden;
  border: 1px solid var(--line); border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
  transition: border-color .25s, transform .25s var(--ease);
}
.tile::before, .card::before, .b::before, .game-card::before, .contact-card::before, .about-card::before, .plan::before, .doc-sum::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s;
  background: radial-gradient(320px circle at var(--x) var(--y), rgba(255, 255, 255, .07), transparent 65%);
}
.tile:hover::before, .card:hover::before, .b:hover::before, .game-card:hover::before, .contact-card:hover::before, .about-card:hover::before, .plan:hover::before, .doc-sum:hover::before { opacity: 1; }
.tile:hover, .game-card:hover, .contact-card:hover, .about-card:hover, .plan:hover, .doc-sum:hover { border-color: var(--line-2); }

/* Ana sayfa */
/* İçerik üst kapsül ile alt satır arasında dikeyde ortalanır; aralıklar ve kutular ekran yüksekliğiyle birlikte büyür */
[data-page="home"] main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(28px, 5vh, 64px); }
.hero { text-align: center; }
.hero-top { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
/* Büyük başlık kendi kendine yazılır; alttaki yazı zıplamasın diye dar ekranda iki satırlık yer ayrılır */
.hero .display { text-wrap: wrap; margin-top: clamp(40px, 7.6vh, 86px); font-size: clamp(31px, 9.2vw, 52px); line-height: 1.03; min-height: 2.12em; }
@media (min-width: 820px) { .hero .display { font-size: clamp(52px, 6.4vw, 70px); min-height: 1.12em; } }
.hero .lede { max-width: 40em; margin-top: clamp(30px, 5.4vh, 60px); margin-inline: auto; }
.tiles { display: grid; gap: 12px; margin-top: clamp(36px, 7vh, 84px); }
@media (min-width: 820px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: clamp(124px, 17vh, 176px); padding: 18px; text-align: center; }
.tile:hover { transform: translateY(-2px); }
.tile-title { grid-column: 1 / -1; margin-top: 8px; font-size: 20px; font-weight: 550; letter-spacing: -.02em; color: var(--text); }
/* Kutuların içi üçünde de aynı düzende: başlık, sabit yükseklikte bir orta bant (yazı satırı + ince çubuk ya da e-posta hapı)
   ve tek satırlık alt yazı. Böylece tuşlar, başlıklar, bantlar ve alt yazılar yan yana aynı hizada durur. */
.tile-body { display: grid; justify-items: center; margin-top: 12px; }
.tile-main { display: grid; justify-items: center; align-content: center; gap: 10px; height: 36px; }
.tile-line { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; line-height: 22px; color: var(--text-2); }
.tile-line b { font-weight: 400; color: var(--text); }
.tile-line .dot { width: 6px; height: 6px; }
.tile-sub { display: block; min-height: 19px; margin-top: 12px; font-family: var(--mono); font-size: 12.5px; line-height: 1.5; color: var(--text-3); }
.tile-sub b { font-weight: 400; color: var(--text-2); }
.tile-rot { transition: opacity .35s; }
.tile-rot.out { opacity: 0; }
.tile-proj img { width: 22px; height: 22px; border-radius: 6px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.tile-steps, .tile-day { position: relative; display: flex; gap: 4px; width: 184px; max-width: 100%; }
.tile-steps i, .tile-day i { flex: 1 0 0; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .12); }
.tile-steps i.d { background: var(--text-2); }
.tile-steps i.n, .tile-day i.on { background: linear-gradient(90deg, var(--accent), var(--violet)); box-shadow: 0 0 10px rgba(255, 122, 61, .5); }
/* Günün akışı: dinlenme, mesai, projeler; beyaz nokta şu anki saati gösterir (dilimleri site.js ayarlar) */
.tile-mark { position: absolute; top: -3px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #0c0d0f, 0 0 12px rgba(255, 255, 255, .7); }
/* İletişim kutusu: başlık bütün kutuyu bağlantı yapar, e-posta hapı onun üstünde kalır ve tıklayınca kopyalar */
.tile-link::after { content: ""; position: absolute; inset: 0; }
.tile-mail {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 14px; cursor: copy;
  border: 1px solid var(--line-2); border-radius: 999px; background: rgba(255, 255, 255, .035); font-size: 14.5px; color: var(--text-2);
  transition: color .2s, border-color .2s, background .2s;
}
.tile-mail:hover { color: var(--text); border-color: var(--line-3); background: rgba(255, 255, 255, .07); }
.tile-mail svg { width: 14px; height: 14px; flex: none; color: var(--text-4); transition: color .2s; }
.tile-mail:hover svg { color: var(--text); }
.tile-mail-l { position: relative; }
.tile-mail-ok { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text); }
.tile-mail .i-copy, .tile-mail .i-ok { width: 13px; height: 13px; }
.tile-mail .i-ok { display: none; color: var(--accent); }
.tile-mail.is-done { border-color: rgba(255, 122, 61, .5); }
.tile-mail.is-done .tile-mail-t { visibility: hidden; }
.tile-mail.is-done .i-copy { display: none; }
.tile-mail.is-done .i-ok { display: block; }
/* Dokunmatik cihazda kısayol tuşu görünmez; kutu alçalır, yazı dikeyde ortalanır */
@media (hover: none) { .tile kbd { display: none; } .tile { min-height: 104px; } .tile-title { margin-top: 0; } }
/* Alçak dizüstü ekranında sayfa kaymasın diye aralıklar daralır; kademesiz: 820 piksel yükseklikteki ölçülerden 650'deki
   en sıkı hâle doğru yumuşakça iner (eskiden 780'de birden sıkışıyor, dışarıda büyük boşluk kalıyordu). 820'den yüksek
   ekranda yukarıdaki ölçüler aynen geçerli (min() oradan sonra eski değeri seçer). */
@media (min-width: 820px) {
  [data-page="home"] main { padding-block: clamp(12px, min(calc(12px + (100vh - 650px) * .17), 5vh), 64px); }
  .hero .display { margin-top: clamp(24px, min(calc(24px + (100vh - 650px) * .225), 7.6vh), 86px); }
  .hero .lede { margin-top: clamp(18px, min(calc(18px + (100vh - 650px) * .155), 5.4vh), 60px); }
  .tiles { margin-top: clamp(24px, min(calc(24px + (100vh - 650px) * .197), 7vh), 84px); }
  .tile { padding-block: clamp(14px, calc(14px + (100vh - 650px) * .0235), 18px); }
}
/* Geniş ve yüksek ekranda ana sayfanın yazıları biraz büyür ki ekranda küçük kalmasın */
@media (min-width: 1400px) and (min-height: 860px) {
  .hero .display { font-size: 78px; }
  .hero .lede { font-size: 21px; }
  .tile-title { font-size: 22px; }
}

/* Projeler listesi */
/* Köşe ve üstüne gelince yükselme ana sayfadaki kutularla aynı */
.game-card { display: grid; margin-top: 44px; }
.game-card:hover { transform: translateY(-2px); }
/* Kart içeriği kadar yüksektir; sabit bir en az yükseklik verilmez (düğmenin üstünde boşluk açıyordu) */
@media (min-width: 880px) { .game-card { grid-template-columns: 1.05fr 1fr; } }
/* Kartın içi ana sayfadaki kutular gibi ortalıdır */
.gc-body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 28px 24px; text-align: center; }
@media (min-width: 880px) { .gc-body { padding: 40px; } }
/* Kartın başında projenin yan yana logosu (simge + yazı tek parça); mağaza etiketi bir satır aşağıda, alt başlık gibi */
.gc-top { display: flex; align-items: center; justify-content: center; gap: 12px; }
.gc-logo { display: block; width: auto; height: 76px; }
@media (max-width: 819.98px) { .gc-logo { height: 64px; } }
.gc-top h2 { font-size: 32px; font-weight: 600; line-height: 1.05; letter-spacing: -.035em; white-space: nowrap; color: var(--text); }
.gc-pill { min-height: 28px; margin-top: -2px; padding: 4px 11px 4px 9px; font-size: 12.5px; white-space: nowrap; }
.game-card p { max-width: 30em; font-size: 16px; color: var(--text-3); }
/* Künye: tür, cihaz, fiyat; üç küçük etiket (mağaza etiketiyle aynı biçim, noktasız) */
.gc-chips { display: flex; flex-wrap: wrap; justify-content: center; align-self: stretch; gap: 8px; margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--line); }
.gc-chips li { padding: 4px 11px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(255, 255, 255, .03); font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
/* Telefonda üç etiket tek satıra sığmaz; "iki üstte, biri altta" dağınık durduğu için iki eşit satıra dizilir: üstte tür
   ve fiyat, altta cihazlar. İçerik alanı daraltılır ki sıra her telefonda aynı kırılsın; üstteki ayırıcı çizgi tam kalır. */
@media (max-width: 430px) {
  .gc-chips { padding-inline: calc((100% - 250px) / 2); }
  .gc-chips li:nth-child(2) { order: 1; }
}
@media (max-width: 480px) {
  .gc-top { gap: 10px; }
  .gc-top h2 { font-size: 27px; }
}
@media (max-width: 359.98px) { .gc-top h2 { font-size: 23px; } .pill-more { display: none; } }
/* Aşamalar yan yana (Projeler kartında ve proje sayfasının üstünde): geçilen adım açık gri, şimdiki turuncu-mor,
   sıradakiler soluk */
.hsteps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hsteps li { display: grid; align-content: start; gap: 9px; font-size: 12.5px; line-height: 1.3; color: var(--text-4); }
.hsteps i { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .12); }
.hsteps .done { color: var(--text-3); }
.hsteps .done i { background: var(--text-2); }
.hsteps .now { color: var(--text); }
.hsteps .now i { background: linear-gradient(90deg, var(--accent), var(--violet)); box-shadow: 0 0 10px rgba(255, 122, 61, .5); }
.gc-hsteps { align-self: stretch; margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--line); }
.gc-go { margin-top: 8px; }
/* Sayfanın ana düğmesi (Projeler'de "Keşfedin", İletişim'de "E-posta yazın") basma isteği uyandırsın diye hareketlidir:
   ok sağa hafifçe gidip gelir, çevresinde turuncu-mor bir ışık nefes alır. Üstüne gelince ok ileride durur. Hareketi
   azaltmayı seçen cihazlarda ikisi de durur (en alttaki kural). */
.btn-live { animation: go-breathe 2.4s ease-in-out infinite; }
.btn-live span { display: inline-block; animation: go-nudge 2.4s var(--ease) infinite; }
.game-card:hover .btn-live span, .btn-live:hover span { animation: none; transform: translateX(5px); }
@keyframes go-nudge { 0%, 55%, 100% { transform: translateX(0); } 28% { transform: translateX(6px); } }
@keyframes go-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 122, 61, 0), 0 6px 20px -10px rgba(255, 122, 61, .3); }
  50% { box-shadow: 0 0 0 5px rgba(255, 122, 61, .16), 0 10px 36px -6px rgba(139, 124, 255, .7); }
}
.gc-visual { position: relative; min-height: 360px; overflow: hidden; border-top: 1px solid var(--line); }
@media (min-width: 880px) { .gc-visual { border-top: 0; border-left: 1px solid var(--line); } }
.gc-banner { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.gc-visual::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 55% at 50% 62%, rgba(255, 122, 61, .26), transparent 70%), linear-gradient(180deg, rgba(8, 9, 10, .05), rgba(8, 9, 10, .8));
}

/* Tek ekrana sığan sayfaların (Projeler, İletişim) yerleşimi: ana sayfadaki gibi içerik üst kapsül ile alt satır arasında
   dikeyde ortalanır; üstteki ve alttaki boşluk eşittir. Sayfa tek ekrana sığsın diye başlığın boyu, aralıklar ve kartın
   iç boşluğu ekran yüksekliğiyle birlikte küçülür ya da büyür; alçak ekranda kart içindekilerle birlikte orantılı
   küçülür. Telefonda içerik ekrandan uzun olduğu için sayfa üstten başlar. */
@media (min-width: 820px) {
  :is([data-page="projects"], [data-page="contact"], [data-page="notfound"]) main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(12px, 3.2vh, 64px); }
  :is([data-page="projects"], [data-page="contact"]) .page-head.center { padding-top: 0; }
  .page-head.center .display.md { font-size: clamp(36px, 5.6vh, 46px); }
  .page-head.center .lede { margin-top: clamp(12px, calc(8vh - 36px), 32px); }
  [data-page="projects"] .game-card, [data-page="contact"] .contact-wrap, [data-page="about"] .about-card { margin-top: clamp(20px, calc(11vh - 46px), 64px); }
  [data-page="projects"] .gc-body { padding-block: clamp(22px, calc(9vh - 34px), 40px); }
}
/* Kart kısaldığı için küçülme daha geç başlar; eşikler üstte ve altta en az 28 piksel kalacak şekilde ölçülerek seçildi */
@media (min-width: 820px) and (max-height: 739px) { [data-page="projects"] .game-card { zoom: .93; } }
@media (min-width: 820px) and (max-height: 689px) { [data-page="projects"] .game-card { zoom: .88; } }
@media (min-width: 820px) and (max-height: 649px) { [data-page="projects"] .game-card { zoom: .85; } }
/* Geniş ve yüksek ekranda yazılar ana sayfayla aynı eşikte (1400 × 860) büyür; kart, yer açıldıkça içindekilerle
   birlikte orantılı büyür (900'den sonra biraz, 960'tan sonra tam) */
@media (min-width: 1400px) and (min-height: 860px) {
  .page-head.center .display.md { font-size: 52px; }
  .page-head.center .lede { font-size: 21px; }
}
@media (min-width: 1400px) and (min-height: 900px) { [data-page="projects"] .game-card, [data-page="contact"] .contact-wrap { zoom: 1.06; } }
@media (min-width: 1400px) and (min-height: 960px) { [data-page="projects"] .game-card, [data-page="contact"] .contact-wrap { zoom: 1.12; } }

/* Telefon çerçevesi */
.phone {
  position: absolute; z-index: 1; padding: 7px; border-radius: 38px; background: #0a0a0b;
  border: 1px solid var(--line-3); box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .9), 0 0 0 6px rgba(255, 255, 255, .02);
}
.phone img { border-radius: 31px; }
/* İki telefon: arkada ev gezdirme (soluk, daha eğik), önde pazarlık */
/* Konumlar ortadan sabit uzaklıkla verilir ki kart genişleyince ikili ortada kalsın */
.gc-visual .phone { width: 220px; left: calc(50% + 62px); top: 40px; transform: translateX(-50%) rotate(-3deg); }
.gc-visual .ph-back { z-index: 0; width: 190px; left: calc(50% - 80px); top: 92px; transform: translateX(-50%) rotate(-8deg); opacity: .75; }

/* Proje sayfası */
/* Proje sayfasının üstü: projenin yan yana logosu (simge + yazı tek parça; kullanıcı üç örnekten bunu seçti), sonra
   mağaza etiketi, tanıtım cümlesi ve aşamalar. Logo sayfanın başlığıdır (h1; adı görselin açıklamasında yazar):
   telefonda genişliğe, masaüstünde ekran yüksekliğine göre ölçeklenir. Başlığın üstündeki boşluk öbür sayfalarla
   aynı ortak kuraldan gelir (.page-head.center). Logosu olmayan proje için düz yazı başlık kuralı duruyor. */
.g-top { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.g-word { display: block; width: min(86vw, 350px); height: auto; margin-inline: auto; }
.page-head.center .g-top .display.md { max-width: none; margin: 0; font-size: clamp(30px, 9.6vw, 52px); white-space: nowrap; }
.g-pill { margin-top: 20px; }
.g-sub { margin-top: 14px; font-family: var(--mono); font-size: 13px; color: var(--text-3); }
.page-head.center.g-head .lede { margin-top: 22px; }
.g-steps { max-width: 560px; margin: 30px auto 0; }
.g-steps li { font-size: 13px; }
/* Masaüstünde üst kısımdaki aralıklar ve simge ekran yüksekliğiyle ölçeklenir (öbür sayfalardaki gibi): MacBook'ta (820)
   logo 135 yüksek, aralıklar 20 / 22 / 30; alçak dizüstünde (650) logo 107, aralıklar 14 / 14 / 18; yüksek ekranda
   24 / 24 / 28 / 40. Telefonlarla arası ortak "cümle ile kutu arası" ölçüsüdür (25–64, MacBook'ta 44). */
@media (min-width: 820px) {
  .g-top { gap: clamp(14px, calc(20px + (100vh - 820px) * .035), 24px); }
  .g-word { width: auto; height: clamp(104px, 16.5vh, 140px); }
  .page-head.center .g-top .display.md { font-size: clamp(48px, 7.8vh, 64px); }
  .g-pill { margin-top: clamp(14px, calc(20px + (100vh - 820px) * .035), 24px); }
  .page-head.center.g-head .lede { margin-top: clamp(14px, calc(22px + (100vh - 820px) * .047), 28px); }
  .g-steps { margin-top: clamp(18px, calc(30px + (100vh - 820px) * .07), 40px); }
}
@media (min-width: 1400px) and (min-height: 860px) {
  .page-head.center .g-top .display.md { font-size: 72px; }
}
.phones { position: relative; height: 470px; margin-top: 44px; overflow: hidden; }
@media (min-width: 820px) { .phones { height: 600px; margin-top: clamp(20px, calc(11vh - 46px), 64px); } }
.phones::before {
  content: ""; position: absolute; left: 50%; top: 6%; width: min(760px, 100%); height: 70%; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255, 122, 61, .32), rgba(139, 124, 255, .16) 55%, transparent); filter: blur(24px);
}
/* Alttaki kararma yalnız görüntüdür: tıklamayı kesmez, altındaki telefona geçirir (yoksa telefonların alt yarısı tıklanmıyordu) */
.phones::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: 160px; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
.phones .phone { left: 50%; top: 0; width: 236px; }
@media (min-width: 820px) { .phones .phone { width: 272px; } }
/* Üç telefon sırayla öne gelir (site.js sınıfları değiştirir); geçiş yumuşak olsun diye konum ve parlaklık kayar */
.phones .phone { transition: transform .8s cubic-bezier(.2, .8, .2, 1), filter .8s; }
.ph-c { transform: translateX(-50%); z-index: 3; }
.ph-l, .ph-r { display: none; }
@media (min-width: 820px) {
  .ph-l, .ph-r { display: block; filter: brightness(.62) saturate(.9); }
  .ph-l { transform: translateX(calc(-50% - 252px)) translateY(60px) rotate(-6deg) scale(.9); }
  .ph-r { transform: translateX(calc(-50% + 252px)) translateY(60px) rotate(6deg) scale(.9); }
}
.ph-l, .ph-r { cursor: pointer; }
/* Telefonların altındaki üç ad; tıklanınca o ekran öne gelir. Öndeki ekranın adı canlıdır: içi soldan sağa turuncu-mor
   dolar, dolunca sıradaki ekran öne gelir (site.js dolmanın bitişini dinler). Dolan katman adı koyu yazıyla yeniden
   yazar, böylece yazı dolan yerde koyu, dolmayan yerde açık okunur. Dolma fare üstündeyken de durmaz (kullanıcı
   durmasını istemedi). Hareket azaltma açıkken dolma olmaz: öndeki ad baştan dolu görünür ve ekranlar kendi kendine
   değişmez.
   Çerçeve, dolan katman üstünü örtebilsin diye iç gölgeyle çizilir. */
.g-tabs { position: relative; z-index: 6; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: -58px; pointer-events: none; }
.g-tabs button { pointer-events: auto; }   /* sıranın boş yerleri tıklamayı alttaki telefona bırakır */
.g-tabs button {
  position: relative; overflow: hidden; padding: 7px 14px; border: 0; border-radius: 999px; background: rgba(17, 18, 20, .82); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px var(--line-2); font: inherit; font-size: 13px; color: var(--text-3); cursor: pointer; transition: color .2s;
}
.g-tabs button:hover, .g-tabs button.on { color: var(--text); }
.g-tabs button.on::after {
  content: attr(data-label); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #0b0c0e; background: linear-gradient(90deg, var(--accent), var(--violet)); clip-path: inset(0);
  animation: tab-fill 3.2s linear forwards;
}
@keyframes tab-fill { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 64px; }
/* Telefonlarla kutular arası da ekranla ölçeklenir: alçak dizüstünde 51, MacBook'ta 64, büyük ekranda 84 */
@media (min-width: 820px) { .bento { margin-top: clamp(48px, 7.8vh, 84px); } }
/* Özellik kutuları: içerik ortalı (sitedeki öbür kutular gibi); üstte kutunun konusunu söyleyen turuncu küçük kelime */
.b { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; padding: 28px 24px 24px; text-align: center; }
@media (min-width: 880px) { .b-4 { grid-column: span 4; } .b-3 { grid-column: span 3; } .b-2 { grid-column: span 2; } }
.b-label { font-family: var(--mono); font-size: 11.5px; color: var(--accent); text-transform: uppercase; letter-spacing: .07em; }
.b h2 { margin-top: 12px; font-size: 20px; font-weight: 550; letter-spacing: -.02em; color: var(--text); }
.b p { margin-top: 6px; max-width: 30em; font-size: 15px; color: var(--text-3); text-wrap: balance; }
.b-shot { position: relative; align-self: center; width: min(380px, 100%); aspect-ratio: 720 / 460; margin: 26px 0 -25px; overflow: hidden; border: 1px solid var(--line-2); border-bottom: 0; border-radius: 16px 16px 0 0; box-shadow: 0 -20px 60px -20px rgba(255, 122, 61, .25); }
.b-shot img { width: 100%; height: 100%; object-fit: cover; }
.b-shot::after { content: ""; position: absolute; inset: auto 0 0 0; height: 56px; background: linear-gradient(transparent, rgba(8, 9, 10, .85)); }
/* Reklam kutusu: büyük sıfır kutunun görselidir; altında başlık ve cümle. Etiket üstte kalır (yandaki kutunun etiketiyle
   aynı hizada), sıfır ve yazılar kalan alanda dikeyde ortalanır. Renkli yazı sağdan kesilmesin diye harf aralığı
   daraltılmaz ve iki yanında küçük bir pay bırakılır. */
.b-ad .b-label { margin-bottom: 12px; }
.big-num {
  margin-top: auto; padding: 0 .05em .05em; font-size: 136px; font-weight: 600; line-height: .9;
  background: linear-gradient(135deg, var(--accent), var(--violet)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.b-ad h2 { margin-top: 18px; }
.b-ad p { margin-bottom: auto; }
/* Bölgeler: üç görsel yan yana; her birinin altında bölgenin adı ve orada yapılan iş (yazı görselin üstünde değil) */
.regions { display: grid; grid-template-columns: repeat(3, 1fr); align-self: stretch; gap: 12px; margin-top: 22px; }
.regions figure { display: grid; align-content: start; gap: 12px; }
.rg-img { aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line-2); border-radius: 12px; }
.rg-img img { width: 100%; height: 100%; object-fit: cover; }
.regions figcaption { display: grid; gap: 2px; text-align: center; }
.regions figcaption b { font-size: 15.5px; font-weight: 550; letter-spacing: -.01em; color: var(--text); }
.regions figcaption span { font-size: 13.5px; line-height: 1.35; color: var(--text-3); }
@media (max-width: 480px) { .regions { gap: 8px; } .regions figcaption b { font-size: 14.5px; } .regions figcaption span { font-size: 12.5px; } }
.specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--line); }
/* Künye: dört hücre (tür, dil, cihaz, fiyat), yazılar ortalı. Durum burada yazmaz; sayfanın üstünde etiket ve aşama çubuğu var. */
@media (min-width: 880px) { .specs { grid-template-columns: repeat(5, 1fr); } .specs.c4 { grid-template-columns: repeat(4, 1fr); } }
.specs div { padding: 18px; text-align: center; background: #0b0c0e; }
.specs dt { font-family: var(--mono); font-size: 11px; color: var(--text-4); text-transform: uppercase; letter-spacing: .07em; }
.specs dd { margin-top: 4px; font-size: 14px; color: var(--text-2); }
/* Belge sayfalarının üstü (gizlilik, koşullar, destek): proje belgelerinde başlığın üstünde projenin yan yana logosu
   durur; tıklanınca projenin sayfasına döner */
.doc-app { display: inline-flex; }
.doc-app .doc-logo { width: auto; height: 56px; }
@media (max-width: 819.98px) { .doc-app .doc-logo { height: 50px; } }
.page-head.center .doc-app + .display { margin-top: 18px; }
.page-head.center .doc-meta { margin-top: 18px; }
/* Belge sayfalarının üst kısmındaki aralıklar da öbür sayfalardaki gibi ekran yüksekliğiyle ölçeklenir (proje sayfasının
   üstündeki oranlarla): simge-başlık ve başlık-tarih 650'de 13, MacBook'ta (820) 18, 1080'de 22; şeritsiz sayfada
   (sitenin gizlilik sayfası) tarih-metin 34 / 48 / 64. MacBook'taki görünüş aynen kalır. Telefonda sabit değerler. */
@media (min-width: 820px) {
  .page-head.center .doc-app + .display, .page-head.center .doc-meta { margin-top: clamp(13px, calc(18px + (100vh - 820px) * .03), 22px); }
  .page-head.center .legal { margin-top: clamp(18px, calc(26px + (100vh - 820px) * .047), 34px); }
  .doc-body > .doc, .doc-body > .faq { margin-top: clamp(34px, calc(48px + (100vh - 820px) * .083), 64px); }
}
/* Proje belgelerinde (.tabbed) şerit başlığın hemen altındadır; tarih ya da giriş cümlesi şeridin altına iner. Böylece
   şerit üç sayfada ve her ekranda aynı yerde durur (giriş cümlesi tarihten uzun olduğu için Destek'te aşağı kayıyordu).
   Aralıklar: başlık-şerit telefonda 24 (geniş ekranda 18 / 26 / 34), şerit-tarih 22 (16 / 22 / 28), tarih-metin 30
   (24 / 34 / 46). */
.page-head.center .legal + .doc-meta, .page-head.center .legal + .lede { margin-top: 22px; }
.page-head.tabbed + .doc-body > .doc, .page-head.tabbed + .doc-body > .faq { margin-top: 30px; }
@media (min-width: 820px) {
  .page-head.center .legal + .doc-meta, .page-head.center .legal + .lede { margin-top: clamp(16px, calc(22px + (100vh - 820px) * .04), 28px); }
  .page-head.tabbed + .doc-body > .doc, .page-head.tabbed + .doc-body > .faq { margin-top: clamp(24px, calc(34px + (100vh - 820px) * .06), 46px); }
}
/* Üç belge arasındaki geçiş: üstteki menü kapsülünün küçüğü. Tek çerçevede kısa adlar; telefonda da tek satır. Açık olanın
   vurgusu üst menüdeki kayan vurgunun aynısıdır (.nav-glider; konumunu site.js belirler): fareyle üstüne gelinen ada
   kayar, belge değişince yeni yerine kayarak geçer. Betik yoksa açık olan sabit dolguyla gösterilir. */
.legal { position: relative; display: inline-flex; gap: 2px; margin-top: 24px; padding: 4px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(17, 18, 20, .78); view-transition-name: doc-tabs; }
.legal a { position: relative; z-index: 1; padding: 6px 16px; border-radius: 999px; font-size: 14px; color: var(--text-3); transition: color .2s; }
.legal a[aria-current="page"], .legal a.is-go { color: var(--text); }
.legal.going a[aria-current="page"]:not(.is-go) { color: var(--text-3); }
@media (hover: hover) { .legal a:hover { color: var(--text); } }
.legal .nav-glider { top: 4px; bottom: 4px; }
.legal .nav-glider.is-on { view-transition-name: doc-glider; }

/* Hakkımda */
/* Başlığın altında tek kart: solda fotoğraf, sağda yazı (Projeler'deki kartın düzeni). 1000 pikselden dar pencerede
   fotoğraf üstte durur ve kart dar bir sütun olur (fotoğraf dev gibi büyümesin diye). */
.about-card { display: grid; margin-top: 44px; }
@media (max-width: 999.98px) { .about-card { max-width: 560px; margin-inline: auto; } }
@media (min-width: 1000px) { .about-card { grid-template-columns: minmax(300px, 35%) 1fr; } }
.about-photo { position: relative; aspect-ratio: 5 / 4; }
.about-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
/* Yan yana düzende bölme yazının boyuna uzar. Yazı uzadıkça fotoğraf bölmeyi doldurmak için yüzü büyütmesin diye en çok
   3:5 oranına kadar uzar; bölme daha uzunsa fotoğrafın altı karta karışarak biter. */
@media (min-width: 1000px) {
  .about-photo { aspect-ratio: auto; container-type: size; }
  @container (max-aspect-ratio: 3 / 5) {
    .about-photo img { inset: 0 0 auto; height: auto; aspect-ratio: 3 / 5; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
  }
}
.about-text { align-self: center; padding: 28px 24px; }
/* Her paragrafın ilk cümlesi kendi satırında, küçük bir başlık gibi durur. Yazı sola dayalıdır: iki yana yaslı hâli
   denendi (hecelemeyle birlikte), kullanıcı kötü buldu. */
.about-text p { font-size: 16px; line-height: 1.65; color: var(--text-2); text-wrap: pretty; }
.about-text p + p { margin-top: 22px; }
.about-text b { display: block; margin-bottom: 6px; font-size: 18px; line-height: 1.4; font-weight: 550; letter-spacing: -.015em; color: var(--text); text-wrap: balance; }
@media (min-width: 1000px) { .about-text { padding: 36px; } }
@media (min-width: 1400px) { .about-text { padding: 44px 48px; } .about-text p { font-size: 17px; line-height: 1.7; } .about-text b { font-size: 19px; } }
.cards3 { display: grid; gap: 12px; }
@media (min-width: 880px) { .cards3 { grid-template-columns: repeat(3, 1fr); } }
/* İlke kutuları: ana sayfadaki kutular gibi ortalı; başlığın üstünde aşama çubuğunun rengiyle küçük bir çizgi */
.card { padding: 28px 26px; text-align: center; }
.card h3 { font-size: 20px; font-weight: 550; letter-spacing: -.02em; color: var(--text); }
.cards3 .card h3::before {
  content: ""; display: block; width: 36px; height: 4px; margin: 0 auto 18px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--violet)); box-shadow: 0 0 10px rgba(255, 122, 61, .45);
}
.card p { max-width: 26em; margin: 10px auto 0; font-size: 15px; color: var(--text-3); text-wrap: balance; }
/* Üç ilke kutusunun altındaki tek satırlık not (kutular eşit boyda kalsın diye ilk kutudan buraya alındı) */
.cards-note { max-width: 52em; margin: 22px auto 0; text-align: center; font-size: 15px; color: var(--text-3); text-wrap: balance; }
/* Yol: küçük bir iş planı (kullanıcı üç biçimden bunu seçti). Bir kutunun içinde şeritler alt alta (Eğitim, İş, Kendi
   ürünlerim, Ayrıca); çubuklar yıllara göre ölçekli yerleşir, sağ kenar "bugün". Süren işler renkli ve ucunda beyaz bir
   nokta taşır. Sütunlar: şerit adı, 2018–19, 2019–22, 2022–24, 2024–26, 2026–bugün (genişlikler yıl sayısıyla orantılı;
   son sütun görünür kalsın diye biraz geniş). Yeni bir yıl girerse buraya sütunu ve s/e sınıfı eklenmeli. */
.plan { --cols: 150px 1fr 3fr 2fr 2fr 1.1fr; position: relative; padding: 26px 34px 12px 30px; text-align: left; }
.plan-axis, .plan-row { display: grid; grid-template-columns: var(--cols); column-gap: 6px; }
.plan-axis { margin-bottom: 6px; font-family: var(--mono); font-size: 12px; color: var(--text-4); }
.plan-today { position: absolute; right: 34px; color: var(--accent); transform: translateX(50%); }
.plan-row { align-items: start; padding-block: 16px; border-top: 1px solid var(--line); }
.plan-lane { grid-column: 1; grid-row: 1 / 3; padding-top: 13px; font-size: 14.5px; font-weight: 400; color: var(--text-3); }
.plan-bar { position: relative; grid-row: 1; height: 4px; margin-bottom: 9px; border-radius: 2px; background: var(--text-2); }
.plan-bar.now { background: linear-gradient(90deg, var(--accent), var(--violet)); box-shadow: 0 0 10px rgba(255, 122, 61, .5); }
.plan-bar.now::after {
  content: ""; position: absolute; right: 0; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: #fff;
  transform: translate(50%, -50%); box-shadow: 0 0 0 3px #0c0d0f, 0 0 12px rgba(255, 255, 255, .7);
}
.plan-t { grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 3px; min-width: 0; padding-right: 14px; }
.plan-t b { font-size: 16px; font-weight: 550; letter-spacing: -.015em; line-height: 1.3; color: var(--text); }
/* Yazı üç kademeli: ne (beyaz), nerede (açık gri), varsa ayrıntı (gri) */
.plan-t em { font-style: normal; font-size: 14px; color: var(--text-2); }
.plan-t > span { font-size: 14px; color: var(--text-3); }
/* Projeye bağlı çubuk: ad tıklanır, proje sayfasına gider */
.plan-t a:hover b { text-decoration: underline; text-underline-offset: 3px; }
/* Son (dar) sütunda başlayan çubuğun yazısı sağa dayanır ve sola doğru taşar */
.plan-t.r { justify-items: end; padding-right: 0; text-align: right; white-space: nowrap; }
.plan-y { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.plan .s2018 { grid-column-start: 2; } .plan .s2019 { grid-column-start: 3; } .plan .s2022 { grid-column-start: 4; }
.plan .s2024 { grid-column-start: 5; } .plan .s2026 { grid-column-start: 6; }
.plan .e2022 { grid-column-end: 4; } .plan .e2024 { grid-column-end: 5; } .plan .e2026 { grid-column-end: 6; } .plan .enow { grid-column-end: 7; }
/* Dar ekranda yazılar çubukların altına sığmaz: şerit adı üstte, altında ölçekli çubuklar, onun altında yazılar yıl
   aralığıyla birlikte alt alta */
@media (max-width: 879.98px) {
  .plan { --cols: 0 1fr 3fr 2fr 2fr 1.1fr; padding: 20px 18px 6px; }
  .plan-axis, .plan-row { column-gap: 0; }
  .plan-axis .s2026 { display: none; }
  .plan-today { right: 18px; transform: none; }
  .plan-lane { grid-column: 1 / -1; grid-row: 1; padding: 0 0 12px; }
  .plan-bar { grid-row: 2; margin-bottom: 12px; }
  .plan-bar.done { margin-right: 4px; }
  .plan .plan-t { grid-column: 1 / -1; grid-row: auto; justify-items: start; padding-right: 0; text-align: left; white-space: normal; }
  .plan .plan-t + .plan-t { margin-top: 12px; }
  .plan-y { position: static; width: auto; height: auto; overflow: visible; clip-path: none; font-family: var(--mono); font-size: 12px !important; color: var(--text-3); }
}

/* İletişim: ortada tek kart (soru, konular, düğme, not; içi ortalı), altında dört iletişim yolu simgeli haplar olarak */
.cc-q { font-size: 19px; font-weight: 550; letter-spacing: -.02em; color: var(--text); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chip {
  height: 36px; padding: 0 14px; cursor: pointer; border: 1px solid var(--line-2); border-radius: 999px;
  background: rgba(255, 255, 255, .03); font-size: 14px; color: var(--text-2); transition: color .2s, border-color .2s, background .2s;
}
.chip:hover { color: var(--text); border-color: var(--line-3); }
.chip[aria-pressed="true"] { color: #0b0c0e; background: var(--text); border-color: var(--text); }
/* Telefonda dört konu tek sıraya sığmaz ve "üçü üstte, biri altta" kırılıyordu: iki sıra, iki eşit sütun; düğmeler
   kartı doldurur, kenarları altındaki mesaj kutusuyla aynı hizadadır. 500 ve üstünde iki dilde de tek sıraya sığar. */
@media (max-width: 499.98px) {
  .chips { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; }
  .chip { padding-inline: 8px; }
}
.topics-note { margin-top: 2px; font-size: 14.5px; color: var(--text-3); }
.contact-wrap { margin-top: 44px; }
.contact-card { display: grid; grid-template: 1fr / 1fr; justify-items: center; gap: 16px; padding: 32px 24px; text-align: center; }
/* Kartın iki hâli aynı yerde üst üste durur: yazma hâli (soru, konular, mesaj kutusu, düğme, not) ve düğmeye basınca
   görünen onay. Kart ikisinden uzun olanın boyundadır, geçişte boyu oynamaz. */
.cc-form, .cc-done { grid-area: 1 / 1; display: grid; justify-items: center; align-content: center; gap: inherit; width: 100%; transition: opacity .3s, visibility 0s .3s; }
.cc-done, .contact-card.sent .cc-form { visibility: hidden; opacity: 0; }
.contact-card.sent .cc-done { visibility: visible; opacity: 1; transition-delay: 0s; }
.contact-card:not(.sent) .cc-form { transition-delay: 0s; }
.cc-in {
  width: min(520px, 100%); height: 96px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 12px; background: rgba(255, 255, 255, .03);
  font: inherit; font-size: 15px; line-height: 1.5; color: var(--text); resize: none; transition: border-color .2s, background .2s;
}
.cc-in::placeholder { color: var(--text-4); }
.cc-in:focus { outline: none; border-color: var(--line-3); background: rgba(255, 255, 255, .05); }
@media (hover: none) { .cc-in { font-size: 16px; } }   /* telefonda 16'dan küçük yazı, kutuya dokununca sayfayı büyütür */
.cc-ok { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, rgba(255, 122, 61, .22), rgba(139, 124, 255, .22)); box-shadow: inset 0 0 0 1px var(--line-2); }
.cc-ok .cc-ic { width: 20px; height: 20px; color: var(--text); }
.cc-done .cc-q:focus { outline: none; }
.cc-done-p { max-width: 30em; font-size: 15.5px; color: var(--text-2); text-wrap: balance; }
/* Uzun mesajda onay yazısı değişir: mesaj kopyalandı, e-postaya yapıştırılacak (site.js) */
.cc-long, .contact-card.long .cc-done-p:not(.cc-long) { display: none; }
.contact-card.long .cc-long { display: block; }
@media (min-width: 880px) { .contact-card { padding: 48px 40px; } }
.cc-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.cc-links .tile-mail { gap: 9px; padding: 7px 14px 7px 11px; font-size: 14px; }
.cc-links a.tile-mail { cursor: pointer; }
/* Boşluklar. Karta mesaj kutusu eklenince içerik uzadı; sayfa yine tek ekrana sığsın ve üstteki ve alttaki boşluk
   Projeler sayfasıyla aynı düzeyde kalsın diye kartın iç boşluğu, içindeki aralıklar, mesaj kutusunun boyu ve hapların
   üstü ekran yüksekliğiyle birlikte daralıp açılır (650'de iç boşluk 20, aralık 12, kutu 72; MacBook'ta 36, 16, 96). */
@media (min-width: 820px) {
  [data-page="contact"] .contact-card { padding-block: clamp(20px, calc(20px + (100vh - 650px) * .094), 40px); gap: clamp(12px, calc(12px + (100vh - 650px) * .024), 16px); }
  [data-page="contact"] .cc-in { height: clamp(72px, calc(72px + (100vh - 720px) * .24), 96px); }
  [data-page="contact"] .cc-links { margin-top: clamp(14px, calc(14px + (100vh - 650px) * .06), 24px); }
}
/* 820'den dar ekranda içerik ekrana sığıyorsa (büyük telefon, küçük tablet) dikeyde ortalanır; sığmıyorsa Projeler ve
   Hakkımda'daki gibi üstte 56, altta 96 piksel kalır. Üstteki boşluk alttakinden 40 az olduğu için artan yerin ilk 40
   pikseli üste gider, kalanı iki yana eşit dağılır. */
@media (max-width: 819.98px) {
  [data-page="contact"] main { flex: 1; display: flex; flex-direction: column; justify-content: center; }
  [data-page="contact"] main::before { content: ""; flex: 1 1 0; max-height: 40px; }
}
/* Dört simge de beyazdır: LinkedIn ve Instagram logoları marka kuralları gereği yalnız kendi renginde, siyah ya da
   beyaz kullanılır; öbür iki simge onlarla aynı renkte tutulur */
.tile-mail .cc-ic { width: 17px; height: 17px; color: var(--text); }
.tile-mail .cc-brand { width: 15px; }
.tile-mail .ext { margin-left: 0; }
.ext { margin-left: 6px; color: var(--text-4); font-family: var(--mono); font-size: 13px; }

/* Belgeler: gizlilik, koşullar, destek */
.doc { max-width: 760px; margin: 48px auto 0; font-size: 16.5px; line-height: 1.7; color: var(--text-2); }
.doc h2 { margin: 44px 0 10px; font-size: 21px; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
.doc h2:first-child { margin-top: 0; }
.doc p + p, .doc ul + p, .doc ol + p, .doc p + ul, .doc p + ol, .doc .table-wrap + p { margin-top: 12px; }
.doc ul, .doc ol { display: grid; gap: 8px; padding-left: 20px; }
.doc ul { list-style: disc; }
.doc ol { list-style: decimal; }
.doc li::marker { color: var(--text-4); }
.doc a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.doc a:hover { text-decoration-color: var(--accent); }
/* Uzun e-posta adresi dar telefonda satıra sığmazsa bölünebilir (taşıp sayfayı yana kaydırmasın) */
.doc a, .faq .answer a { overflow-wrap: anywhere; }
.doc strong { font-weight: 600; color: var(--text); }
/* Belgenin en önemli cümlesi üstte, ortalı bir kutuda (ana sayfadaki kutuların biçiminde); altı düz metin olarak sürer */
.doc-sum { display: grid; gap: 8px; margin-bottom: 28px; padding: 22px 26px; text-align: center; font-size: 17px; line-height: 1.55; color: var(--text-2); text-wrap: balance; }
.doc-sum-k { font-family: var(--mono); font-size: 11.5px; color: var(--accent); text-transform: uppercase; letter-spacing: .07em; }
/* Kısa bölümler iki sütunlu satırlar olarak (sitenin gizlilik sayfası): başlık solda, metni sağında, aralarında ince
   çizgi; dar ekranda başlık metnin üstüne geçer */
.doc-rows { margin-top: 28px; border-top: 1px solid var(--line); }
.doc-rows > div { display: grid; gap: 6px 28px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.doc-rows dt { font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
@media (min-width: 700px) { .doc-rows > div { grid-template-columns: 170px 1fr; } }
.doc-meta { margin-top: 16px; font-family: var(--mono); font-size: 12px; color: var(--text-4); }
.table-wrap { margin-top: 14px; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.doc table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.doc th, .doc td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.doc tr:last-child td { border-bottom: 0; }
.doc th { font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--text-4); text-transform: uppercase; letter-spacing: .07em; background: rgba(255, 255, 255, .02); }
@media (max-width: 680px) {
  .table-wrap { border: 0; overflow: visible; }
  .doc table, .doc tbody, .doc tr, .doc td { display: block; min-width: 0; width: auto; }
  .doc thead { display: none; }
  .doc tr { margin-top: 10px; padding: 6px 0; border: 1px solid var(--line); border-radius: 14px; }
  .doc td { padding: 8px 14px; border-bottom: 0; }
  .doc td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-family: var(--mono); font-size: 10.5px; color: var(--text-4); text-transform: uppercase; letter-spacing: .07em; }
  .doc td:first-child { font-weight: 500; color: var(--text); }
}
.faq { display: grid; gap: 10px; max-width: 760px; margin: 48px auto 0; }
.faq details { border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; cursor: pointer; list-style: none; font-size: 16.5px; font-weight: 500; color: var(--text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); font-size: 18px; color: var(--text-3); transition: transform .2s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 18px 18px; font-size: 15.5px; line-height: 1.65; color: var(--text-3); }
.faq .answer p + p { margin-top: 10px; }
.faq .answer a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.faq .answer strong { font-weight: 500; color: var(--text-2); }
/* Destek sayfasının sonundaki not: kısa satırlarla, düğmenin altında */
.doc-end .cards-note { max-width: 34em; }

/* Sayfa bulunamadı */
.notfound { text-align: center; }
.notfound .display { margin-top: 0; font-size: clamp(96px, 22vw, 200px); line-height: .95; letter-spacing: -.06em; }
.nf-say { margin-top: 10px; font-family: var(--mono); font-weight: 500; font-size: clamp(16px, 2.6vw, 22px); letter-spacing: -.01em; color: var(--text-2); }
.nf-say b { font-weight: 600; color: var(--text); }
.notfound .btn-row { margin-top: 34px; }
@media (hover: none), (max-width: 819.98px) { .notfound .btn kbd { display: none; } }
/* 404 her ekranda ortada durur (telefonda da): içerik kısa olduğu için üst kapsül ile alt satırın arasında ortalanır */
[data-page="notfound"] main { flex: 1; display: flex; flex-direction: column; justify-content: center; }
/* Telefonda da tam ortada: genel alt boşluk (96) burada yoktur, üstte ve altta eşit küçük pay kalır */
@media (max-width: 819.98px) { [data-page="notfound"] main { padding-block: 24px; } }

/* Başa dön: sayfa kaydırılır kaydırılmaz sağ altta belirir (site.js). Çevresindeki halka sayfanın ne kadarının
   okunduğunu gösterir (--p, yüzde). Sarmalayıcı yapışkandır ve yüksekliği sıfırdır: düğme ekranın altında yüzer, sayfanın
   sonunda ise alt satırın üstünde kalır, onu kapatmaz. */
.totop-wrap { position: sticky; bottom: 22px; z-index: 30; display: flex; justify-content: flex-end; align-items: flex-end; height: 0; padding-inline: 22px; pointer-events: none; }
.totop {
  --p: 0; position: relative; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: var(--text);
  background: conic-gradient(var(--accent), var(--violet) calc(var(--p) * 1%), rgba(255, 255, 255, .16) 0);
  box-shadow: 0 18px 44px -16px rgba(0, 0, 0, .85); opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s, transform .3s var(--ease), visibility 0s .3s;
}
.totop::before { content: ""; position: absolute; inset: 2.5px; border-radius: 50%; background: #111214; transition: background .2s; }
.totop svg { position: relative; width: 15px; height: 15px; transition: transform .2s var(--ease); }
.totop.on { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
.totop:hover::before { background: #191a1d; }
.totop:hover svg { transform: translateY(-2px); }
@media (max-width: 480px) { .totop-wrap { bottom: 16px; padding-inline: 16px; } }

/* Alt bilgi */
.site-footer { margin-top: auto; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding-block: 26px 30px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: var(--text-4); }
.footer-inner a { transition: color .2s; }
.footer-inner a:hover { color: var(--text); }
/* Sağdaki üç bağlantı yalnız simge (LinkedIn, Instagram, gizlilik). Dokunma alanı 32 piksel; satırın boyu değişmesin
   diye alan dışa taşar. Logolar marka kuralı gereği beyaz. Adı, fareyle üstüne gelince ya da klavyeyle odaklanınca
   simgenin üstünde küçük bir kutuda hemen çıkar (tarayıcının kendi ipucu bir saniye bekletiyor, kimi yerde hiç
   çıkmıyor; o yüzden `title` yok, ad `aria-label`'dan okunur). */
.footer-end { display: flex; gap: 4px; margin: -8px; }
.f-rights { white-space: nowrap; }
/* Telefonda telif satırı ile simgeler tek satıra sığmaz, alt alta gelir; ikisi de ortalanır. "Tüm hakları saklıdır."
   bütün telefonlarda kendi satırındadır (kullanıcı istedi), böylece her telefonda aynı üç satır görünür. */
@media (max-width: 540px) {
  .footer-inner { flex-direction: column; justify-content: center; gap: 14px; text-align: center; }
  .footer-end { margin: -8px 0; }
  .f-rights { display: block; }
}
.f-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--text); opacity: .72; transition: opacity .2s, background .2s; }
.f-ic:hover { opacity: 1; background: rgba(255, 255, 255, .06); }
.f-ic svg { width: auto; height: 16px; }
.f-ic { position: relative; }
.f-ic::after {
  content: attr(aria-label); position: absolute; left: 50%; bottom: calc(100% + 6px); padding: 4px 9px; pointer-events: none;
  border: 1px solid var(--line-2); border-radius: 8px; background: #111214; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .85);
  font-family: var(--mono); font-size: 11.5px; line-height: 1.4; white-space: nowrap; color: var(--text);
  opacity: 0; visibility: hidden; transform: translate(-50%, 4px); transition: opacity .15s, transform .2s var(--ease), visibility 0s .2s;
}
@media (hover: hover) {
  .f-ic:hover::after, .f-ic:focus-visible::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
}

/* Hızlı menü (⌘K) */
.cmdk { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; }
.cmdk[open] { display: flex; justify-content: center; align-items: flex-start; }
.cmdk::backdrop { background: rgba(4, 5, 6, .6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
/* Kutu ekranın üstünden biraz aşağıda durur ve ekrana sığacak kadar uzar; sığmayan kısım listenin içinde kaydırılır
   (dvh: telefonda tarayıcı çubukları açıkken de alt kenar görünür kalsın) */
.cmdk-box {
  --top: clamp(16px, 11vh, 120px);
  display: flex; flex-direction: column; max-height: calc(100vh - var(--top) - 16px); max-height: calc(100dvh - var(--top) - 16px);
  width: min(620px, calc(100% - 32px)); margin-top: var(--top); overflow: hidden; border: 1px solid var(--line-2); border-radius: 16px;
  background: rgba(17, 18, 20, .97); box-shadow: 0 40px 120px -20px rgba(0, 0, 0, .8); animation: pop .18s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: scale(.98) translateY(-6px); } }
.cmdk-search { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--line); color: var(--text-3); }
.cmdk-input { flex: 1; min-width: 0; height: 56px; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 16px; }
.cmdk-input::placeholder { color: var(--text-4); }
/* Liste: üç grup (küçük başlıklı) ve her satırın solunda simge; on bir satırın hepsi 768 ve daha yüksek ekranda kaydırmadan görünür */
.cmdk-list { flex: 1; min-height: 0; overflow: auto; padding: 8px; }
.cmdk-list li { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 10px; font-size: 15px; color: var(--text-2); cursor: pointer; }
.cmdk-t { flex: 1; min-width: 0; }
.cmdk-list li.cmdk-g { height: 30px; align-items: flex-end; padding-bottom: 7px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-4); cursor: default; }
.cmdk-list li.cmdk-g:not(:first-child) { height: 38px; }
.cmdk-ic { display: grid; place-items: center; flex: none; width: 18px; height: 18px; color: var(--text-3); }
.cmdk-ic svg { width: 15px; height: 15px; }
.cmdk-mag { display: grid; place-items: center; flex: none; }
.cmdk-mag svg { width: 15px; height: 15px; }
.cmdk-ic img { width: 18px; height: 18px; border-radius: 5px; }
.cmdk-list li[aria-selected="true"] .cmdk-ic { color: var(--text); }
/* Kopyalama satırı kopyalayınca: yazı "Kopyalandı", simge turuncu tik (e-posta haplarındaki gibi) */
.cmdk-list li.is-done .cmdk-t { color: var(--text); }
.cmdk-list li.is-done .cmdk-ic { color: var(--accent); }
.cmdk-list li[aria-selected="true"] { background: rgba(255, 255, 255, .06); color: var(--text); }
.cmdk-list li.empty { color: var(--text-4); cursor: default; }
.cmdk-k { font-family: var(--mono); font-size: 11.5px; color: var(--text-4); }
.cmdk-foot { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11.5px; color: var(--text-4); }
/* Telefonda (ve dar pencerede) klavye ipuçları yerine görünür bir "Kapat" düğmesi; menü açılınca odak kutunun kendisindedir */
.cmdk-box:focus, .cmdk-box:focus-visible { outline: 0; }
.cmdk-x { display: none; flex: none; height: 30px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(255, 255, 255, .04); font: inherit; font-size: 13px; color: var(--text-2); cursor: pointer; }
@media (hover: none), (max-width: 819.98px) { .cmdk-x { display: block; } .cmdk-foot, .cmdk-search kbd { display: none; } }

.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 50; max-width: calc(100% - 32px); padding: 10px 16px; border: 1px solid var(--line-2); border-radius: 999px;
  background: rgba(24, 25, 28, .96); font-size: 13.5px; color: var(--text); opacity: 0; pointer-events: none;
  transform: translate(-50%, 12px); transition: opacity .25s, transform .25s var(--ease);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }
/* Kopyalamanın eski yolunda kullanılan görünmez yazı kutusu (site.js: putOld); 16 piksel yazı telefonun yakınlaştırmasını önler */
.copy-src { position: fixed; top: 0; left: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; font-size: 16px; pointer-events: none; }

/* Sayfalar arası yumuşak geçiş */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .16s ease both vt-out; }
::view-transition-new(root) { animation: .32s var(--ease) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
}