@font-face {
  font-family: "Big Shoulders";
  src: url("/assets/fonts/bigshoulders-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Big Shoulders";
  src: url("/assets/fonts/bigshoulders-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  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: "Cairo";
  src: url("/assets/fonts/cairo-arabic.woff2") format("woff2");
  font-weight: 200 1000;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/hanken-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/hanken-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  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 {
  --gece: #0a1526;
  --lacivert: #12233a;
  --hat: #24384f;
  --altin: #d9a441;
  --altin-acik: #f2d08a;
  --fildisi: #f4f0e6;
  --sis: #93a1b5;
  --celik: #e8ecf1;
  --murekkep: #16202e;

  --baslik: "Big Shoulders", "Arial Narrow", Impact, sans-serif;
  --govde: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;

  --genislik: 1240px;
  --kenar: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(.77, 0, .175, 1);
  --ease-cik: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--gece);
  color: var(--fildisi);
  font-family: var(--govde);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0 0 1.1em; max-width: 64ch; }
h1, h2, h3 {
  font-family: var(--baslik);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.005em;
  margin: 0;
}
::selection { background: var(--altin); color: var(--gece); }
:focus-visible { outline: 2px solid var(--altin); outline-offset: 4px; }

.kap { max-width: var(--genislik); margin: 0 auto; padding: 0 var(--kenar); }
.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Sayfa geçişi (altın perde) ---------- */
.perde {
  position: fixed; inset: 0; z-index: 100; pointer-events: none;
  background: var(--altin);
  transform-origin: top;
  animation: perde-kalk 1s var(--ease) .05s both;
}
.perde::after {
  content: ""; position: absolute; inset: 0;
  background: var(--gece);
  transform-origin: top;
  animation: perde-kalk .9s var(--ease) both;
}
@keyframes perde-kalk { from { transform: scaleY(1); } to { transform: scaleY(0); } }
.cikiyor .perde, .cikiyor .perde::after { transform-origin: bottom; animation: perde-in .6s var(--ease) both; }
.cikiyor .perde::after { animation-delay: .12s; }
@keyframes perde-in { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---------- Üst menü ---------- */
.ust {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: border-color .4s;
  border-bottom: 1px solid transparent;
}
/* Bulanık zemin ayrı katmanda: backdrop-filter doğrudan .ust'e verilirse içindeki
   tam ekran mobil menü ekran yerine bu çubuğa göre konumlanır ve çubuğa sıkışır. */
.ust::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(10, 21, 38, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity .4s;
}
.ust.dolu { border-bottom-color: var(--hat); }
.ust.dolu::before { opacity: 1; }
.menu-acik { overflow: hidden; }
.ust .kap { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.logo { position: relative; z-index: 3; }
.logo img { height: 44px; width: auto; }
.menu { display: flex; gap: clamp(20px, 3vw, 44px); list-style: none; margin: 0; padding: 0; }
.menu a {
  position: relative;
  text-decoration: none;
  font-weight: 500;
  font-size: .98rem;
  color: var(--fildisi);
  padding: 6px 0;
}
.menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--altin);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.menu a:hover::after, .menu a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.menu-buton { display: none; }

/* ---------- Butonlar ---------- */
.butonlar { display: flex; flex-wrap: wrap; gap: 14px; }
.buton {
  --bx: 0px; --by: 0px;
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  padding: 18px 30px;
  font-family: var(--govde); font-weight: 600; font-size: 1rem;
  text-decoration: none;
  color: var(--gece);
  background: var(--altin);
  border: 0; border-radius: 999px;
  overflow: hidden; isolation: isolate;
  transform: translate(var(--bx), var(--by));
  transition: transform .35s var(--ease-cik), color .35s;
  cursor: pointer;
}
.buton::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--fildisi);
  border-radius: inherit;
  transform: translateY(101%);
  transition: transform .5s var(--ease);
}
.buton:hover::before { transform: translateY(0); }
.buton.hayalet { background: transparent; color: var(--fildisi); box-shadow: inset 0 0 0 1.5px rgba(244, 240, 230, .35); }
.buton.hayalet::before { background: var(--fildisi); }
.buton.hayalet:hover { color: var(--gece); }

/* ---------- Giriş (küre) ---------- */
.giris {
  position: relative;
  min-height: 100svh;
  display: grid; align-items: end;
  padding: 140px 0 clamp(48px, 8vh, 96px);
  overflow: hidden;
  background:
    radial-gradient(60vw 60vw at 78% 42%, rgba(217, 164, 65, .10), transparent 60%),
    linear-gradient(180deg, var(--gece) 0%, #0c1a2f 100%);
}
#kure {
  position: absolute;
  top: 50%; right: -8vw;
  width: min(92vh, 74vw); height: min(92vh, 74vw);
  transform: translateY(-52%);
}
.giris .kap { position: relative; z-index: 2; width: 100%; }
.giris h1 {
  font-size: clamp(3.2rem, min(9vw, 12.5vh), 9rem);
  max-width: 9.5em;
  text-wrap: balance;
}
.satir { display: block; overflow: hidden; padding-bottom: .04em; }
.satir > span { display: block; transform: translateY(105%); animation: satir-cik 1.1s var(--ease-cik) both; }
.satir:nth-child(1) > span { animation-delay: .55s; }
.satir:nth-child(2) > span { animation-delay: .67s; }
.satir:nth-child(3) > span { animation-delay: .79s; }
.satir:nth-child(4) > span { animation-delay: .91s; }
@keyframes satir-cik { to { transform: translateY(0); } }
.giris h1 .altin { color: var(--altin); }

.giris-alt {
  display: grid; grid-template-columns: minmax(0, 34em) auto; gap: 40px;
  align-items: end; justify-content: space-between;
  margin-top: clamp(28px, 5vh, 56px);
  opacity: 0; animation: belir 1s var(--ease-cik) 1.15s both;
}
.giris-alt p { color: #c7cfdb; font-size: 1.13rem; margin: 0; }
@keyframes belir { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

.kaydir {
  position: absolute; left: 50%; bottom: 22px; z-index: 2;
  width: 1px; height: 56px; overflow: hidden;
  background: rgba(244, 240, 230, .15);
}
.kaydir::after {
  content: ""; position: absolute; left: 0; top: -50%; width: 1px; height: 50%;
  background: var(--altin);
  animation: kaydir 2.2s var(--ease) infinite 2s;
}
@keyframes kaydir { to { top: 110%; } }

/* ---------- Kayan sektör şeridi ---------- */
.serit {
  border-block: 1px solid var(--hat);
  overflow: hidden;
  padding: 26px 0;
  background: var(--gece);
}
.serit-ic { display: flex; width: max-content; animation: serit 38s linear infinite; }
.serit:hover .serit-ic { animation-play-state: paused; }
.serit span {
  font-family: var(--baslik); font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  line-height: 1;
  padding-right: .7em;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(244, 240, 230, .4);
  white-space: nowrap;
}
.serit span::after {
  content: ""; display: inline-block;
  width: .28em; height: .28em; margin-left: .7em; vertical-align: middle;
  background: var(--altin); border-radius: 50%;
}
@keyframes serit { to { transform: translateX(-50%); } }

/* ---------- Genel bölümler ---------- */
.bolum { padding: clamp(80px, 13vw, 170px) 0; position: relative; }
.bolum.celik { background: var(--celik); color: var(--murekkep); }
.bolum.lacivert { background: var(--lacivert); }
.bolum-baslik { font-size: clamp(2.6rem, 6.4vw, 5.6rem); max-width: 12em; text-wrap: balance; margin-bottom: .5em; }
.giris-metni { font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.55; color: #c7cfdb; }
.celik .giris-metni { color: #3c4859; }

/* ---------- Kurucu ---------- */
.kurucu { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.kurucu-gorsel { position: relative; margin: 0; }
.ag-kutu canvas { display: block; width: 100%; aspect-ratio: 1 / 1; }
.kurucu-gorsel img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.kurucu-gorsel figcaption { margin-top: 14px; font-size: .92rem; color: #5a6676; }
.yil {
  display: flex; align-items: baseline; gap: .12em; margin-top: 20px;
  font-family: var(--baslik); font-weight: 800;
  font-size: clamp(5rem, 8vw, 7.5rem); line-height: .8;
  color: var(--altin);
  pointer-events: none;
}
.yil small { font-family: var(--govde); font-weight: 500; font-size: 1.05rem; color: var(--murekkep); }
.kurucu blockquote {
  margin: 0 0 1.2em;
  font-family: var(--baslik); font-weight: 500;
  font-size: clamp(2rem, 3.8vw, 3.3rem); line-height: 1.02;
  color: var(--murekkep);
}
.imza { font-weight: 600; margin-top: 1.8em; }
.imza span { display: block; font-weight: 400; color: #5a6676; }

/* ---------- Hizmet dizini ---------- */
.dizin { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(30px, 5vw, 80px); margin-top: clamp(40px, 6vw, 80px); }
.dizin-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hat); }
.dizin-liste li { border-bottom: 1px solid var(--hat); }
.dizin-oge {
  all: unset; box-sizing: border-box;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px;
  width: 100%; padding: 22px 0;
  cursor: pointer;
}
.dizin-oge h3 {
  font-size: clamp(2rem, 4.4vw, 3.8rem);
  color: rgba(244, 240, 230, .38);
  transition: color .45s, transform .6s var(--ease-cik);
}
.dizin-oge .ok {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px var(--hat);
  color: var(--altin);
  transition: background .4s, color .4s, transform .6s var(--ease-cik);
}
.dizin-oge .ok svg { width: 18px; height: 18px; }
.dizin-oge:hover h3, .dizin-oge:focus-visible h3, li.aktif .dizin-oge h3 { color: var(--fildisi); transform: translateX(14px); }
li.aktif .dizin-oge .ok { background: var(--altin); color: var(--gece); transform: rotate(-45deg); }
.dizin-acik { display: none; }

.dizin-pano { position: sticky; top: 110px; align-self: start; }
.pano-gorseller { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--lacivert); }
.pano-gorseller > .slayt {
  position: absolute; inset: 0;
  clip-path: inset(0 0 100% 0);
  transform: scale(1.18);
  transition: clip-path .9s var(--ease), transform 1.4s var(--ease-cik);
}
.pano-gorseller > .slayt.secili { clip-path: inset(0 0 0 0); transform: scale(1); z-index: 2; }
.pano-gorseller > .slayt.onceki { clip-path: inset(0 0 0 0); transform: scale(1); z-index: 1; }

/* ---------- Slayt: yavaşça yakınlaşan, yumuşak geçişli fotoğraflar ---------- */
.slayt { position: relative; overflow: hidden; background: var(--lacivert); }
.slayt img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.slayt img.aktif { opacity: 1; z-index: 1; animation: ken-burns 7.5s linear both; }
.slayt img:nth-child(odd) { --kx: -3%; --ky: 2%; transform-origin: 30% 40%; }
.slayt img:nth-child(even) { --kx: 3%; --ky: -2%; transform-origin: 70% 60%; }
@keyframes ken-burns {
  from { transform: scale(1.16) translate(var(--kx), var(--ky)); }
  to { transform: scale(1.02) translate(0, 0); }
}
.slayt-cubuk {
  position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 4;
  display: flex; gap: 6px; pointer-events: none;
}
.slayt-cubuk span { flex: 1; height: 2px; background: rgba(244, 240, 230, .28); overflow: hidden; }
.slayt-cubuk span::after { content: ""; display: block; height: 100%; background: var(--altin); transform: scaleX(0); transform-origin: left; }
[dir="rtl"] .slayt-cubuk span::after { transform-origin: right; }
.slayt-cubuk span.gecti::after { transform: scaleX(1); }
.slayt-cubuk span.su-an::after { animation: cubuk-dol var(--sure, 5s) linear both; }
@keyframes cubuk-dol { to { transform: scaleX(1); } }
.pano-gorseller::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(200deg, transparent 40%, rgba(10, 21, 38, .55));
}
.pano-metin { margin-top: 22px; min-height: 9.5em; color: #c7cfdb; }
.pano-metin p { animation: belir .7s var(--ease-cik) both; }

/* ---------- Yaklaşım (misyon/vizyon/kalite) ---------- */
.ilkeler { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: clamp(40px, 6vw, 80px); }
.ilke { padding: 0 clamp(20px, 3vw, 44px); border-inline-start: 1px solid var(--hat); }
.ilke:first-child { padding-inline-start: 0; border-inline-start: 0; }
.ilke h3, .ilke-baslik { font-size: clamp(2rem, 3.2vw, 2.8rem); color: var(--altin); margin-bottom: .6em; }
.ilke ul { list-style: none; margin: 0 0 1.1em; padding: 0; }
.ilke li { position: relative; padding-inline-start: 22px; margin-bottom: .7em; color: #c7cfdb; }
.ilke li::before { content: ""; position: absolute; inset-inline-start: 0; top: .72em; width: 10px; height: 2px; background: var(--altin); }
.ilke p { color: #c7cfdb; }

/* ---------- Kapanış / iletişim çağrısı ---------- */
.kapanis { text-align: start; overflow: hidden; }
.kapanis canvas {
  position: absolute; right: -12vw; top: 50%; transform: translateY(-50%);
  width: min(80vh, 60vw); height: min(80vh, 60vw); opacity: .45; pointer-events: none;
}
.kapanis .kap { position: relative; z-index: 1; }
.kapanis h2 { font-size: clamp(3rem, 11vw, 10.5rem); line-height: .88; max-width: 8em; }
.kapanis .tel {
  display: inline-block; margin-top: .35em;
  font-family: var(--baslik); font-weight: 800;
  font-size: clamp(2.4rem, 6.5vw, 6rem); line-height: 1;
  color: var(--altin); text-decoration: none;
  background: linear-gradient(var(--altin), var(--altin)) left bottom / 0 3px no-repeat;
  transition: background-size .6s var(--ease);
}
.kapanis .tel:hover { background-size: 100% 3px; }
.kapanis-alt { display: flex; flex-wrap: wrap; gap: 30px 60px; margin-top: 50px; color: #c7cfdb; }
.kapanis-alt strong { display: block; color: var(--fildisi); font-weight: 600; }
.kapanis-alt a { text-decoration: none; }
.kapanis-alt a:hover { color: var(--altin); }

/* ---------- Alt sayfa başlığı ---------- */
.sayfa-ust {
  position: relative; overflow: hidden;
  padding: 190px 0 clamp(60px, 9vw, 110px);
  border-bottom: 1px solid var(--hat);
}
.sayfa-ust h1 { font-size: clamp(3.6rem, 12vw, 11rem); }
.sayfa-ust p { margin-top: 1.6em; font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: #c7cfdb; }
.sayfa-ust canvas {
  position: absolute; right: -14vw; top: 50%; transform: translateY(-50%);
  width: min(70vh, 56vw); height: min(70vh, 56vw);
  opacity: .55;
}
.sayfa-ust .kap { position: relative; z-index: 1; }

/* ---------- Hizmetler sayfası ---------- */
.hizmetler { list-style: none; margin: 0; padding: 0; }
.hizmet {
  display: grid; grid-template-columns: 5fr 7fr; gap: clamp(30px, 6vw, 90px);
  align-items: center;
  padding: clamp(50px, 8vw, 110px) 0;
  border-bottom: 1px solid var(--hat);
}
.hizmet:nth-child(even) .hizmet-gorsel { order: 2; }
.hizmet-gorsel { overflow: hidden; aspect-ratio: 5 / 4; }
.hizmet-gorsel::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(10, 21, 38, .6));
}
.hizmet h2 { font-size: clamp(2.6rem, 5.4vw, 4.8rem); margin-bottom: .45em; }
.hizmet p { color: #c7cfdb; font-size: 1.12rem; }

/* ---------- Hakkımızda ---------- */
.hikaye { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(40px, 7vw, 110px); align-items: start; }
.hikaye .giris-metni:first-child { font-size: clamp(1.4rem, 2.2vw, 1.85rem); color: var(--murekkep); line-height: 1.4; }

/* ---------- İletişim ---------- */
.iletisim { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(40px, 6vw, 90px); }
.bilgi { list-style: none; margin: 0; padding: 0; }
.bilgi li { padding: 26px 0; border-bottom: 1px solid var(--hat); }
.bilgi li:first-child { padding-top: 0; }
.bilgi strong { display: block; color: var(--sis); font-weight: 500; font-size: .95rem; margin-bottom: 6px; }
.bilgi a, .bilgi span { overflow-wrap: anywhere; font-family: var(--baslik); font-weight: 800; font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.05; text-decoration: none; }
.bilgi a:hover { color: var(--altin); }
.bilgi address { font-style: normal; font-size: 1.15rem; color: #c7cfdb; }
.harita { position: relative; min-height: 460px; background: var(--lacivert); }
.harita iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(.92) hue-rotate(185deg) contrast(.9); }

/* ---------- Alt bilgi ---------- */
.alt { border-top: 1px solid var(--hat); padding: 60px 0 36px; color: var(--sis); font-size: .95rem; }
.alt-ic { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.alt img { height: 40px; width: auto; margin-bottom: 18px; }
.alt h2 { font-family: var(--govde); font-weight: 600; font-size: .95rem; color: var(--fildisi); margin-bottom: 14px; }
.alt ul { list-style: none; margin: 0; padding: 0; }
.alt li { margin-bottom: 8px; }
.alt a { text-decoration: none; }
.alt a:hover { color: var(--altin); }
.telif { margin-top: 50px; padding-top: 24px; border-top: 1px solid var(--hat); font-size: .85rem; }

/* ---------- Kaydırınca beliren öğeler ---------- */
.js [data-belir] { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease-cik), transform 1.1s var(--ease-cik); }
.js [data-belir].gorundu { opacity: 1; transform: none; }
[data-perde] { overflow: hidden; }
.js [data-perde] img { clip-path: inset(0 0 100% 0); transform: scale(1.25); transition: clip-path 1.3s var(--ease), transform 1.8s var(--ease-cik); }
.js [data-perde].gorundu img { clip-path: inset(0 0 0 0); transform: scale(1); }
.js .slayt[data-perde] img { transition: clip-path 1.3s var(--ease), opacity 1.6s ease; }
.js .bolum-baslik[data-belir] { transform: translateY(70px) skewY(3deg); transform-origin: left; }
.js .bolum-baslik[data-belir].gorundu { transform: none; }

/* ---------- Dil bayrakları ---------- */
.ust-sag { display: flex; align-items: center; gap: clamp(24px, 3vw, 44px); }
.bayraklar { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.bayrak {
  position: relative; display: block; width: 26px; height: 18px;
  border-radius: 3px; overflow: hidden; text-decoration: none;
  opacity: .5;
  box-shadow: 0 0 0 1px rgba(244, 240, 230, .18);
  transition: opacity .3s, transform .45s var(--ease-cik), box-shadow .3s;
}
.bayrak svg { display: block; width: 100%; height: 100%; }
.ust-bayrak .bayrak span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.bayrak:hover, .bayrak:focus-visible { opacity: 1; transform: translateY(-3px); }
.bayrak[aria-current] { opacity: 1; box-shadow: 0 0 0 2px var(--altin); }
.menu-dil { display: none; }
.bayraklar.buyuk { flex-wrap: wrap; gap: 10px; }
.buyuk .bayrak {
  display: flex; align-items: center; gap: 10px;
  width: auto; height: auto; padding: 8px 16px 8px 10px;
  border-radius: 999px; opacity: 1; font-size: .95rem; font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--hat);
}
.buyuk .bayrak svg { width: 24px; height: 16px; border-radius: 2px; }
.buyuk .bayrak[aria-current] { color: var(--altin); box-shadow: inset 0 0 0 1.5px var(--altin); }

/* ---------- Arapça ve sağdan sola ---------- */
html[lang="ar"] { --baslik: "Big Shoulders", "Cairo", sans-serif; --govde: "Hanken Grotesk", "Cairo", sans-serif; }
html[lang="ar"] body { line-height: 1.9; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] blockquote { line-height: 1.35; letter-spacing: 0; }
html[lang="ar"] .giris h1 { font-size: clamp(2.4rem, min(6.4vw, 9.5vh), 6rem); }
html[lang="ar"] .sayfa-ust h1 { font-size: clamp(3rem, 8vw, 7rem); }
html[lang="ar"] .kapanis h2 { font-size: clamp(2.4rem, 7vw, 6.5rem); line-height: 1.25; }
html[lang="ar"] .bolum-baslik { font-size: clamp(2.2rem, 5vw, 4.4rem); }
html[lang="ar"] .dizin-oge h3 { font-size: clamp(1.7rem, 3.4vw, 3rem); }
html[lang="ar"] .serit span { font-size: clamp(1.8rem, 3.6vw, 3.2rem); }
html[lang="de"] h1, html[lang="de"] h2, html[lang="fr"] h1, html[lang="fr"] h2 { hyphens: auto; overflow-wrap: break-word; }

[dir="rtl"] .giris { background: radial-gradient(60vw 60vw at 22% 42%, rgba(217, 164, 65, .10), transparent 60%), linear-gradient(180deg, var(--gece) 0%, #0c1a2f 100%); }
[dir="rtl"] #kure { right: auto; left: -8vw; }
[dir="rtl"] .sayfa-ust canvas { right: auto; left: -14vw; }
[dir="rtl"] .kapanis canvas { right: auto; left: -12vw; }
[dir="rtl"] .serit-ic { animation-name: serit-rtl; }
@keyframes serit-rtl { to { transform: translateX(50%); } }
[dir="rtl"] .ok svg { transform: scaleX(-1); }
[dir="rtl"] .dizin-oge:hover h3, [dir="rtl"] .dizin-oge:focus-visible h3, [dir="rtl"] li.aktif .dizin-oge h3 { transform: translateX(-14px); }
[dir="rtl"] li.aktif .dizin-oge .ok { transform: rotate(45deg); }
[dir="rtl"] .menu a::after { transform-origin: left; }
[dir="rtl"] .menu a:hover::after, [dir="rtl"] .menu a[aria-current="page"]::after { transform-origin: right; }

.ilke-buton { margin-top: 60px; }
.bulunamadi { min-height: 100svh; display: flex; align-items: center; border: 0; padding: 120px 0; }
.bulunamadi img { height: 44px; width: auto; margin-bottom: 50px; }
.bulunamadi ul { list-style: none; margin: 30px 0 0; padding: 0; max-width: 560px; }
.bulunamadi li { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--hat); font-size: 1.1rem; }
.bulunamadi li a { color: var(--altin); text-decoration: none; }

/* ---------- Mobil ---------- */
@media (max-width: 980px) {
  .kurucu, .hikaye, .iletisim, .dizin, .hizmet { grid-template-columns: 1fr; }
  .hizmet:nth-child(even) .hizmet-gorsel { order: 0; }
  .ilkeler { grid-template-columns: 1fr; gap: 50px; }
  .ilke, .ilke:first-child { padding: 0; border-inline-start: 0; }
  .alt-ic { grid-template-columns: 1fr 1fr; }
  .alt-ic > div:first-child { grid-column: 1 / -1; }

  .dizin-pano { display: none; }
  .dizin-acik {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .6s var(--ease);
  }
  .dizin-acik > div { overflow: hidden; }
  .dizin-acik .slayt { aspect-ratio: 16 / 10; margin-bottom: 16px; }
  .dizin-acik p { color: #c7cfdb; padding-bottom: 26px; margin: 0; }
  li.aktif .dizin-acik { grid-template-rows: 1fr; }
  .dizin-oge h3 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  li.aktif .dizin-oge h3 { transform: none; }
  li.aktif .dizin-oge .ok { transform: rotate(90deg); }
  [dir="rtl"] li.aktif .dizin-oge h3 { transform: none; }
  [dir="rtl"] li.aktif .dizin-oge .ok { transform: rotate(-90deg); }
}

@media (max-width: 1080px) {
  .menu-buton {
    all: unset; position: relative; z-index: 3; display: grid; place-items: center;
    width: 46px; height: 46px; cursor: pointer;
  }
  .cubuk, .cubuk::before {
    content: ""; display: block; width: 26px; height: 2px; background: var(--fildisi);
    transition: transform .5s var(--ease);
  }
  .cubuk { position: relative; transform: translateY(-4px); }
  .cubuk::before { position: absolute; top: 8px; }
  .menu-acik .cubuk { transform: rotate(45deg); }
  .menu-acik .cubuk::before { transform: translateY(-8px) rotate(-90deg); }

  .menu {
    position: fixed; inset: 0; z-index: 2;
    flex-direction: column; justify-content: center; gap: 4px;
    padding: 0 var(--kenar);
    background: var(--gece);
    clip-path: circle(0 at calc(100% - 44px) 36px);
    transition: clip-path .8s var(--ease);
    visibility: hidden;
  }
  .menu-acik .menu { clip-path: circle(150% at calc(100% - 44px) 36px); visibility: visible; }
  .menu li { overflow: hidden; }
  .menu > li > a {
    display: block;
    font-family: var(--baslik); font-weight: 800; font-size: 3.4rem; line-height: 1.15;
    transform: translateY(110%);
    transition: transform .7s var(--ease-cik);
  }
  .menu > li > a::after { display: none; }
  .menu > li > a[aria-current="page"] { color: var(--altin); }
  .menu-acik .menu > li > a { transform: none; }
  .menu-acik .menu > li:nth-child(1) > a { transition-delay: .25s; }
  .menu-acik .menu > li:nth-child(2) > a { transition-delay: .32s; }
  .menu-acik .menu > li:nth-child(3) > a { transition-delay: .39s; }
  .menu-acik .menu > li:nth-child(4) > a { transition-delay: .46s; }

  .ust-bayrak { display: none; }
  /* Kapanırken diller hemen kaybolur; açılırken menü yazılarından sonra belirir. */
  .menu-dil { display: block; overflow: visible !important; margin-top: 36px; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .15s, visibility 0s .15s, transform 0s .15s; }
  .menu-acik .menu-dil { opacity: 1; visibility: visible; transform: none; transition: opacity .6s .5s, visibility 0s, transform .7s var(--ease-cik) .5s; }
  .gecissiz .menu, .gecissiz .menu * { transition: none !important; }
  [dir="rtl"] .menu { clip-path: circle(0 at 44px 36px); }
  [dir="rtl"] .menu-acik .menu { clip-path: circle(150% at 44px 36px); }
}

@media (max-width: 760px) {
  body { font-size: 1rem; }
  .ust .kap { height: 72px; }
  .logo img { height: 36px; }
  #kure { right: auto; left: 50%; top: 34%; width: 118vw; height: 118vw; transform: translate(-50%, -50%); opacity: .7; }
  .giris { align-items: end; }
  .giris-alt { grid-template-columns: 1fr; gap: 28px; }
  .kaydir { display: none; }
  .sayfa-ust { padding-top: 150px; }
  .kapanis canvas { right: -45vw; width: 100vw; height: 100vw; opacity: .25; }
  .sayfa-ust canvas { right: -40vw; width: 90vw; height: 90vw; opacity: .35; }
  .alt-ic { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .perde { display: none; }
  .js [data-belir], .js [data-perde] img { opacity: 1; transform: none; clip-path: none; }
  .serit-ic { animation: none; }
}