/* ==========================================================================
   Mesut Akatay — Akademik Profil & Yönlendirme Koçluğu
   Site tasarım sistemi. Mimari flockenhaus-gip.de ölçümlerinden türetildi;
   palet ve tipografi bu markanın kilitli kimliğidir (CLAUDE.md).

   Referanstan alınan dört taşıyıcı karar:
   1. DÖRT ZEMİN. Aksan bir süs değil; beyaz/krem/koyu ile eşit statüde bir
      zemindir. Bölümler bu dördü arasında dönüşümlü ilerler.
   2. AKIŞKAN KÖK. Tüm ölçüler rem; kök yazı boyu vw ile ölçeklenir, böylece
      1600px ile 991px arasında bütün tasarım kesintisiz büyür ve küçülür.
   3. SIFIR YÜKSELTİ. Gölge yok. Ayrım düz renk blokları, kalın kenarlıklar ve
      kılcal çizgilerle kurulur.
   4. HOVER = RENK TERSİNMESİ. Hiçbir şey soluklaşmaz; dolgu ile yazı yer değiştirir.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Token katmanı — ham renk yalnız burada yazılır
   -------------------------------------------------------------------------- */

:root {
  /* Dört zemin */
  --zemin-beyaz:  #FFFFFF;
  --zemin-krem:   #FAF7F0;
  --zemin-koyu:   #14100D;
  --zemin-aksan:  #DE7A45;

  /* KURUMSAL ZEMIN — soldan saga sicaktan soguga, aciktan koyuya.
     Hero eskiden bastan basa duz turuncuydu: aksan %90 alan kapliyordu ve
     bu, bu dosyanin kendi 70-20-10 kuralini cigniyordu. Artik turuncu
     ZEMIN degil VURGU; kicker, "Fark yarat", dugme ve tik isaretleri.

     ACI "to right" ve bu bilerek: renk yalniz x eksenine bagli olunca
     tam genislikteki iki oge (ust serit ve hero) BIREBIR ayni tonda
     bulusuyor. Aci verilseydi yukseklikleri farkli oldugu icin ust serit
     hero nun uzerinde gorunur bir bant birakirdi. */
  --kurumsal-1: #6B3A22;
  --kurumsal-2: #4A3A33;
  --kurumsal-3: #2C2C30;
  --kurumsal-4: #191A1D;
  --zemin-kurumsal: linear-gradient(to right,
    var(--kurumsal-1) 0%, var(--kurumsal-2) 34%,
    var(--kurumsal-3) 66%, var(--kurumsal-4) 100%);
  --cizgi-kurumsal: rgba(250, 247, 240, 0.16);

  /* KOYU YUZEY AILESI — kartlar, vurgulu teklif, koyu bloklar.
     Marka laciverdinin (--ink #122234) derinlestirilmis hali; yeni bir
     renk icat edilmedi, kilitli olan derinlestirildi.

     ILK DENEME BOYLE DEGILDI: kartlara hero gradyaninin duraklari
     (umber/grafit) verilmisti ve ekranda uc ayri camurlu kahve gibi
     durdu. Sebep suydu - o tonlar GENIS BIR YUZEYDE TEK BIR SUPURME
     olarak birbirine akmak icin secilmisti; uc ayri bloga bolununce
     aralarindaki akis kayboldu ve her biri tek basina kirli gorundu.
     Bir gradyanin duraklari, ayri nesnelere bolunmeye dayanmiyor.

     Sicak gradyan artik yalniz hero da: orada tek ve genis bir yuzey,
     yani imza. Kalan butun koyu yuzeyler bu lacivert aileden. */
  --yuzey-1: #1B2B3F;
  --yuzey-2: #16232F;
  --yuzey-3: #101A24;

  /* Mürekkep */
  --ink:          #122234;
  --ink-yumusak:  #3A4655;
  --muted:        #5A6577;
  --ink-acik:     #FAF7F0;
  --muted-acik:   #C9C2B8;

  /* Aksan ailesi */
  --aksan:        #DE7A45;
  --aksan-derin:  #A04E1E;
  --aksan-parlak: #E89B6E;

  /* Çizgi */
  --cizgi:        #E5DED2;
  --cizgi-koyu:   #2A241E;
  --cizgi-aksan:  #C96A38;

  /* Tipografi — kilitli çift */
  --font-baslik:  "Fraunces", Georgia, "Times New Roman", serif;
  --font-metin:   "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Başlık ölçeği */
  --b-xl: 6rem;
  --b-1:  5rem;
  --b-2:  4.5rem;
  --b-3:  3rem;
  --b-4:  2rem;
  --b-5:  1.4rem;
  --b-6:  1.1rem;

  /* Metin ölçeği */
  --m-buyuk: 1.5rem;
  --m-orta:  1.25rem;
  --m-kucuk: 1.05rem;
  --m-mini:  0.9rem;

  /* Boşluk ölçeği */
  --bos-xxs:   0.5rem;
  --bos-xs:    0.8rem;
  --bos-mini:  1.1rem;
  --bos-kucuk: 2.25rem;
  --bos-orta:  4.5rem;
  --bos-buyuk: 7.5rem;
  --sayfa-payi: 4rem;

  /* Kapsayıcı */
  --kap-hero:  140rem;
  --kap-buyuk: 100rem;
  --kap-orta:   80rem;
  --kap-dar:    50rem;
  --kap-mini:   32rem;

  /* Biçim */
  --yuvarlak-hap:   999rem;
  --yuvarlak-kart:  1rem;
  --yuvarlak-buyuk: 2rem;
  --yuvarlak-mini:  0.5rem;

  /* Hareket */
  --sure: 0.2s;
  --egri: cubic-bezier(0.25, 1, 0.5, 1);
}

/* Akışkan kök: 1600px altında tasarım kesintisiz ölçeklenir. */
@media (max-width: 1600px) { :root { font-size: calc(0.343rem + 0.657vw); } }
@media (max-width: 991px)  { :root { font-size: 0.75rem; } }
@media (max-width: 767px) {
  :root {
    font-size: 0.70rem;
    --b-xl: 3.5rem; --b-1: 3.5rem; --b-2: 2.8rem; --b-3: 2.5rem;
    --bos-buyuk: 6rem; --bos-orta: 4rem; --sayfa-payi: 6vw;
  }
}
@media (max-width: 479px) {
  :root { --b-2: 2.25rem; --b-3: 2rem; --b-4: 1.85rem; --sayfa-payi: 1.5rem; }
}

/* --------------------------------------------------------------------------
   2. Sıfırlama
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--zemin-beyaz);
  color: var(--ink);
  font-family: var(--font-metin);
  font-size: var(--m-kucuk);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

:focus-visible { outline: 3px solid var(--aksan-derin); outline-offset: 3px; border-radius: 2px; }
.koyu-alan :focus-visible, .aksan-alan :focus-visible { outline-color: var(--ink-acik); }

.gizli-erisim {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* Klavye odağında atlama bağlantısı GÖRÜNÜR olmalı (WCAG 2.4.7): clip-path
   odak halkası dahil her şeyi kırptığı için burada tamamen geri açılır. */
.gizli-erisim:focus-visible {
  position: fixed; inset: 1rem auto auto 1rem; z-index: 100;
  width: auto; height: auto; margin: 0; padding: 0.8rem 1.4rem;
  overflow: visible; clip-path: none;
  background: var(--ink); color: var(--zemin-krem);
  border-radius: 999px; font-weight: 600;
}

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

/* --------------------------------------------------------------------------
   3. Tipografi
   Display satır yüksekliği 1 ya da altı, negatif harf aralığı; metin 1.35-1.6.
   Büyük harf kullanılmaz — TEK istisna çevrilen kart başlığı.
   -------------------------------------------------------------------------- */

.baslik-xl, .baslik-1, .baslik-2, .baslik-3, .baslik-4 {
  font-family: var(--font-baslik);
  font-weight: 600;
  text-transform: none;
  text-wrap: balance;
}

/* HARF ARASI NEDEN -0.035 DEGIL
   "Projeler" basliginda o ile j BIRBIRINE DEGIYORDU: Fraunces in j si
   sola savrulan uzun bir kuyruk tasiyor ve -0.035em de j nin govdesi
   o nun sag omzuyla tek leke haline geliyordu.

   Olculdu, goz karariyla secilmedi: sayfa bassiz tarayiciyla cizdirilip
   ikili goruntude BAGLI BILESEN sayildi. "Projeler" saglikliyken 9 ayri
   leke; -0.034 ve -0.035 te 8, yani iki harf birlesmis. Esik -0.034 ile
   -0.033 arasinda. -0.024 esikten on adim uzakta, gozle de acik bosluk.

   Optik boyu sabitlemek de denendi ve BIRAKILDI: cakisma opsz 84-120
   bandinda ve 6rem de tarayici otomatik 96 seciyor. opsz 144 e sabitleyince
   cakisma bitiyor ama leke sayisi 10 a cikiyor - j nin bir parcasi kopuyor,
   yani baska bir bozukluk. Ustelik dar bir bandin kenarina yaslanmak yazi
   tipi guncellenince sessizce geri gelirdi.

   baslik-1 de ayni degere cekildi: 5rem de otomatik opsz 80 oluyor, yani
   riskli bandin hemen kenari. Merdiven de tersine donmesin diye. */
.baslik-xl { font-size: var(--b-xl); line-height: 0.95; letter-spacing: -0.024em; font-weight: 700; }
.baslik-1  { font-size: var(--b-1);  line-height: 1;    letter-spacing: -0.024em; font-weight: 700; }
.baslik-2  { font-size: var(--b-2);  line-height: 1;    letter-spacing: -0.022em; }
.baslik-3  { font-size: var(--b-3);  line-height: 1.05; letter-spacing: -0.015em; }
.baslik-4  { font-size: var(--b-4);  line-height: 1.1;  letter-spacing: -0.01em; }

/* Başlığın ikinci yarısı aksana döner — referansın iki tonlu başlık deseni */
.baslik-vurgu { color: var(--aksan-derin); }
.koyu-alan .baslik-vurgu { color: var(--aksan-parlak); }
.aksan-alan .baslik-vurgu { color: var(--ink); opacity: 0.62; }

.kicker {
  display: inline-block;
  font-family: var(--font-metin);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aksan-derin);
  margin-bottom: var(--bos-xs);
}
.koyu-alan .kicker { color: var(--aksan-parlak); }
.aksan-alan .kicker { color: var(--ink); opacity: 0.7; }

.metin-buyuk { font-size: var(--m-buyuk); line-height: 1.35; }
.metin-orta  { font-size: var(--m-orta);  line-height: 1.45; }
.metin-kucuk { font-size: var(--m-kucuk); line-height: 1.55; }
.metin-mini  { font-size: var(--m-mini);  line-height: 1.5; }

.yumusak { color: var(--ink-yumusak); }
.soluk   { color: var(--muted); }
.koyu-alan .yumusak, .koyu-alan .soluk { color: var(--muted-acik); }

.olcu-dar  { max-width: var(--kap-dar); }
.olcu-orta { max-width: 65rem; }
.olcu-mini { max-width: var(--kap-mini); }

/* --------------------------------------------------------------------------
   4. Düzen — bölüm ve kapsayıcı
   -------------------------------------------------------------------------- */

.bolum { padding-block: var(--bos-buyuk); }
.bolum--ferah { padding-block: 12rem; }
@media (max-width: 479px) { .bolum--ferah { padding-block: 7rem; } }

.bolum--krem  { background: var(--zemin-krem); }
.bolum--koyu  { background: var(--zemin-koyu); color: var(--ink-acik); }
.bolum--aksan { background: var(--zemin-aksan); color: var(--ink); }
.bolum--cizgi { border-top: 1px solid var(--cizgi); }

.kapsayici { width: 100%; max-width: var(--kap-buyuk); margin-inline: auto; padding-inline: var(--sayfa-payi); }
.kapsayici--orta { max-width: var(--kap-orta); }
.kapsayici--hero { max-width: var(--kap-hero); }

.bolum-basi { margin-bottom: var(--bos-orta); }
.bolum-basi .baslik-2 { margin-bottom: var(--bos-xs); }

.yigin > * + * { margin-top: var(--bos-mini); }

/* --------------------------------------------------------------------------
   5. Üst şerit — aksan bandı, sabit.
   Menüdeki TEK buton üst şerit CTA'sıdır; diğer her şey düz metindir.
   -------------------------------------------------------------------------- */

.ust-serit {
  position: fixed; inset: 0 0 auto; z-index: 100;
  min-height: 5.6rem;
  display: flex; align-items: center;
  /* Zemin gradyani bolum 14'te aciklandi. TEK YER burasi: asagida
     ikinci kez ezilseydi biri otekinden habersiz eskirdi. */
  background: var(--zemin-kurumsal);
  border-bottom: 1px solid var(--cizgi-koyu);
  padding-block: var(--bos-mini);
}

.ust-ic {
  width: 100%; max-width: var(--kap-hero); margin-inline: auto;
  padding-inline: var(--sayfa-payi);
  display: flex; align-items: center; justify-content: space-between; gap: var(--bos-mini);
}

.marka {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-baslik); font-weight: 700;
  font-size: var(--b-6); letter-spacing: -0.02em; color: var(--ink);
  transition: transform 0.3s var(--egri);
}
.marka:hover { transform: scale3d(0.97, 0.97, 1); }
.marka-isaret {
  width: 2.1rem; height: 2.1rem; flex: none;
  display: grid; place-items: center;
  background: var(--ink); color: var(--zemin-aksan);
  border-radius: var(--yuvarlak-hap);
  font-size: 0.95rem; font-weight: 700; font-family: var(--font-metin);
}

.menu { display: flex; align-items: center; gap: 2rem; }
.menu-bag {
  font-family: var(--font-metin); font-weight: 600; font-size: var(--b-6);
  color: var(--ink); padding-block: 0.2rem;
  border-bottom: 1px solid transparent;
  transition: border-color var(--sure) ease;
}

.ust-sag { display: flex; align-items: center; gap: var(--bos-xs); }

.hamburger {
  display: none;
  width: 2.8rem; height: 2.8rem;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; justify-content: center; gap: 0.32rem; padding: 0.5rem;
}
.hamburger span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.3s var(--egri), opacity 0.2s ease; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(0.54rem) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-0.54rem) rotate(-45deg); }

@media (max-width: 991px) {
  .hamburger { display: flex; }
  .menu {
    position: fixed; inset: 5.6rem 0 auto;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--zemin-aksan);
    border-block: 1px solid var(--cizgi-aksan);
    padding: var(--sayfa-payi);
    transform: translateY(-130%);
    /* visibility olmadan kapalı menünün 7 bağlantısı sekme sırasında kalır:
       klavye kullanıcısı görünmez bağlantılarda gezer ve tetikleyebilir. */
    visibility: hidden;
    transition: transform 0.35s var(--egri), visibility 0.35s;
  }
  .menu[data-acik="true"] { transform: translateY(0); visibility: visible; }
  .menu-bag { font-size: var(--m-orta); padding-block: 0.9rem; border-bottom: 1px solid var(--cizgi-aksan); }
  .menu .dugme { margin-top: var(--bos-xs); display: inline-flex; }
  .ust-sag .dugme { display: none; }
}
@media (min-width: 992px) { .menu .dugme { display: none; } }

/* --------------------------------------------------------------------------
   6. Butonlar — hover renk tersinmesidir
   -------------------------------------------------------------------------- */

.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-metin); font-weight: 700; font-size: var(--m-kucuk);
  letter-spacing: 0.01em;
  padding: 1.05em 1.7em;
  border: 2px solid var(--ink);
  border-radius: var(--yuvarlak-hap);
  background: var(--ink); color: var(--zemin-krem);
  cursor: pointer; text-align: center;
  transition: background var(--sure) ease, color var(--sure) ease, transform 0.12s ease;
}
.dugme:hover { background: transparent; color: var(--ink); }
.dugme:active { transform: scale(0.96); }

.dugme--aksan { background: var(--zemin-aksan); border-color: var(--ink); color: var(--ink); }
.dugme--aksan:hover { background: var(--ink); color: var(--zemin-aksan); }

.dugme--cizgi { background: transparent; color: var(--ink); }
.dugme--cizgi:hover { background: var(--ink); color: var(--zemin-krem); }

.dugme--buyuk { font-size: var(--m-orta); }
.dugme--kucuk { font-size: var(--m-mini); padding: 0.8em 1.3em; }

.koyu-alan .dugme { background: var(--zemin-aksan); border-color: var(--zemin-aksan); color: var(--ink); }
.koyu-alan .dugme:hover { background: transparent; color: var(--zemin-aksan); }
.koyu-alan .dugme--cizgi { background: transparent; border-color: var(--ink-acik); color: var(--ink-acik); }
.koyu-alan .dugme--cizgi:hover { background: var(--ink-acik); color: var(--ink); }

.aksan-alan .dugme { background: var(--ink); border-color: var(--ink); color: var(--zemin-aksan); }
.aksan-alan .dugme:hover { background: transparent; color: var(--ink); }
.aksan-alan .dugme--cizgi { background: transparent; color: var(--ink); }
.aksan-alan .dugme--cizgi:hover { background: var(--ink); color: var(--zemin-aksan); }

/* Yumuşak CTA: her hero'da bir sert bir yumuşak CTA bulunur, karışmazlar. */
.metin-bag {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-weight: 700; font-size: var(--m-kucuk);
  border-bottom: 2px solid currentColor; padding-bottom: 0.15rem;
  transition: gap var(--sure) var(--egri);
}
.metin-bag:hover { gap: 0.9rem; }

/* İmza öğe: koyu hap + aksan daire */
.ok-dugme {
  display: inline-flex; align-items: center; gap: 0.75rem;
  background: var(--ink); color: var(--zemin-krem);
  border: 0; border-radius: var(--yuvarlak-hap);
  padding: 0.55rem 0.55rem 0.55rem 1.5rem;
  font-family: var(--font-metin); font-weight: 700; font-size: var(--m-kucuk); cursor: pointer;
  transition: background var(--sure) ease;
}
.ok-dugme:hover { background: var(--aksan-derin); }
.ok-dugme-puk {
  width: 2.6rem; height: 2.6rem; flex: none;
  display: grid; place-items: center;
  background: var(--zemin-aksan); color: var(--ink);
  border-radius: var(--yuvarlak-hap);
  transition: transform var(--sure) var(--egri);
}
.ok-dugme:hover .ok-dugme-puk { transform: translateX(0.2rem); }

/* Koyu zeminde ok düğmesinin mürekkep dolgusu zemine karışıyordu; krem dolguya döner. */
.koyu-alan .ok-dugme { background: var(--zemin-krem); color: var(--ink); }
.koyu-alan .ok-dugme:hover { background: var(--zemin-aksan); }
.aksan-alan .ok-dugme { background: var(--ink); color: var(--zemin-krem); }
.aksan-alan .ok-dugme:hover { background: var(--zemin-koyu); }

/* --------------------------------------------------------------------------
   7. Hero — sabit şeridi temizler
   -------------------------------------------------------------------------- */

.hero { padding-top: 13rem; padding-bottom: var(--bos-buyuk); position: relative; overflow: clip; }
.hero--krem  { background: var(--zemin-krem); }

.hero-ic { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--bos-orta); }
.hero-metin { max-width: var(--kap-dar); flex: 1 1 auto; }
.hero-gorsel { flex: 0 0 auto; max-width: 32rem; }
/* height niteliği (640) kare ve yatay görselleri dikine uzatıyordu: yükseklik
   orandan hesaplanır, görsel 4:5 kutuya kırpılarak sığar, asla esnetilmez. */
.hero-gorsel img { border-radius: var(--yuvarlak-kart); width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border: 2px solid var(--ink); }

.hero .baslik-xl { margin-bottom: var(--bos-mini); }
.hero-alt { font-size: var(--m-buyuk); line-height: 1.35; max-width: 42rem; }
.hero-ctalar { display: flex; align-items: center; gap: var(--bos-mini); flex-wrap: wrap; margin-top: var(--bos-kucuk); }

@media (max-width: 991px) {
  .hero { padding-top: 11rem; }
  .hero-gorsel { display: none; }
}
@media (max-width: 479px) {
  .hero-ctalar { flex-direction: column; align-items: stretch; }
  .hero-ctalar .dugme { width: 100%; }
}

/* --------------------------------------------------------------------------
   8. Tik listesi — küçük punto değil, kalın gövde metni
   -------------------------------------------------------------------------- */

.tik-liste { display: flex; flex-direction: column; gap: 0.6rem; margin-top: var(--bos-kucuk); max-width: 43em; }
.tik { display: flex; align-items: flex-start; gap: 0.7rem; font-size: var(--m-orta); font-weight: 600; line-height: 1.35; }
.tik-isaret {
  flex: none; width: 1.5rem; height: 1.5rem; margin-top: 0.1rem;
  display: grid; place-items: center;
  border-radius: var(--yuvarlak-hap);
  background: var(--ink); color: var(--zemin-aksan);
}
.koyu-alan .tik-isaret { background: var(--zemin-aksan); color: var(--ink); }
.tik-isaret svg { width: 0.85rem; height: 0.85rem; }

/* --------------------------------------------------------------------------
   9. Program şeridi — müşteri logosu YOK, gerçekten çalışılan program adları
   -------------------------------------------------------------------------- */

.program-serit { border-block: 1px solid var(--cizgi); padding-block: var(--bos-kucuk); background: var(--zemin-beyaz); }
.program-izgara { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3rem; place-items: center; }
.program-oge {
  font-family: var(--font-baslik); font-weight: 600; font-size: var(--m-orta);
  letter-spacing: -0.01em; color: var(--ink); text-align: center; line-height: 1.2;
}
.program-oge span {
  display: block; font-family: var(--font-metin); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 0.25rem;
}
@media (max-width: 767px) { .program-izgara { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }

/* --------------------------------------------------------------------------
   10. Çevrilen kartlar — oyun kâğıdı motifi
   -------------------------------------------------------------------------- */

.kart-serisi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
@media (max-width: 991px) { .kart-serisi { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; } }

.cevir {
  perspective: 1400px; height: 30rem; cursor: pointer;
  background: none; border: 0; padding: 0; width: 100%; font: inherit; color: inherit; text-align: left;
}
.cevir-ic { display: block; position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.4, 0.1, 0.2, 1); }
.cevir[aria-expanded="true"] .cevir-ic { transform: rotateY(180deg); }

.cevir-yuz {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  transition: background-color var(--sure) ease, color var(--sure) ease, border-color var(--sure) ease;
  border-radius: var(--yuvarlak-buyuk);
  border: 2px solid var(--ink);
  padding: 1.6rem;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
}
/* Zemin, --kart-zemin degiskeninden okunuyor; degeri asagida nth-child ile
   veriliyor; taban turuncu kalsaydi dorduncu bir kart eklendigi gun
   sessizce turuncu cikardi - kural uc karta gore yazildigini kendi
   soylemiyor cunku. Varsayilan, dizinin son tonu. */
.cevir-on   { background: var(--kart-zemin, var(--yuzey-3)); color: var(--ink); }
.cevir-arka { background: var(--ink); color: var(--zemin-krem); transform: rotateY(180deg); }

.cevir-no { display: block; font-family: var(--font-metin); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.cevir-baslik {
  display: block;
  font-family: var(--font-baslik); font-weight: 700;
  font-size: 1.9rem; line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase;
}
.cevir-baslik span { display: block; opacity: 0.62; }
.cevir-taban {
  display: block;
  transform: rotate(180deg);
  font-family: var(--font-baslik); font-weight: 700; font-size: 1.9rem;
  line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase; opacity: 0.16;
}
.cevir-ipucu { display: flex; align-items: center; gap: 0.5rem; font-size: var(--m-mini); font-weight: 600; }
.cevir-daire { width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: var(--yuvarlak-hap); background: var(--ink); color: var(--zemin-aksan); flex: none; }
.cevir-arka .cevir-daire { background: var(--zemin-aksan); color: var(--ink); }
.cevir-metin { display: block; font-size: var(--m-kucuk); line-height: 1.55; }

/* --------------------------------------------------------------------------
   11. Yönlendirme kartları — ziyaretçiyi iki hedef kitleye çatallar.
   İmza öğe: kalın halkalı yuvarlak görsel kartın üst köşesine taşar.
   -------------------------------------------------------------------------- */

.giris-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
@media (max-width: 991px) { .giris-izgara { grid-template-columns: 1fr; gap: 9rem; } }

/* Metin + portre tanıtım blokları (index Hakkımda özeti, hakkimda manifesto).
   Satır içi grid-template-columns mobil tek sütun kuralını eziyordu; kolonlar
   tabandan gelir, bu varyant yalnız hizayı ve kart-dışı mobil boşluğu verir. */
.giris-izgara--tanitim { align-items: center; }
@media (max-width: 991px) { .giris-izgara--tanitim { gap: var(--bos-orta); } }

.giris-kart {
  position: relative;
  background: var(--zemin-krem);
  border: 2px solid var(--ink);
  border-radius: var(--yuvarlak-buyuk);
  padding: 8rem 2.25rem 2.25rem;
  display: flex; flex-direction: column; gap: var(--bos-xs);
  transition: background var(--sure) ease;
}
.giris-kart:hover { background: var(--zemin-aksan); }
.giris-gorsel {
  position: absolute; top: -4.5rem; left: 2.25rem;
  width: 10rem; height: 10rem;
  border-radius: var(--yuvarlak-hap);
  border: 0.35rem solid var(--ink);
  object-fit: cover; background: var(--zemin-aksan);
}
.giris-kart--sag .giris-gorsel { left: auto; right: 2.25rem; border-color: var(--aksan); }
.giris-kart .metin-bag { margin-top: auto; padding-top: var(--bos-mini); align-self: flex-start; }

/* --------------------------------------------------------------------------
   12. Problem ızgarası
   -------------------------------------------------------------------------- */

.problem-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 767px) { .problem-izgara { grid-template-columns: 1fr; } }
.problem-kart { border: 1px solid var(--cizgi); border-radius: var(--yuvarlak-kart); padding: 2rem; background: var(--zemin-beyaz); }
.koyu-alan .problem-kart { background: transparent; border-color: var(--cizgi-koyu); }
.problem-kart h3 { font-family: var(--font-baslik); font-size: var(--b-5); font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.5rem; }

/* --------------------------------------------------------------------------
   13. Dört adımlı yöntem — numaralar başlık boyunda
   -------------------------------------------------------------------------- */

.adim-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem; }
@media (max-width: 991px) { .adim-izgara { grid-template-columns: 1fr 1fr; gap: 3rem 2rem; } }
@media (max-width: 479px) { .adim-izgara { grid-template-columns: 1fr; } }

.adim { border-top: 2px solid currentColor; padding-top: var(--bos-xs); }
.adim-no { font-family: var(--font-baslik); font-size: var(--b-2); line-height: 1; font-weight: 700; letter-spacing: -0.03em; color: var(--aksan); display: block; margin-bottom: var(--bos-xs); }
.koyu-alan .adim-no { color: var(--aksan-parlak); }
.adim h3 { font-family: var(--font-metin); font-size: var(--m-orta); font-weight: 700; letter-spacing: -0.01em; margin-bottom: 0.4rem; }

/* --------------------------------------------------------------------------
   14. Teklif yığını — her teklif tam genişlik, kendi CTA'sı
   -------------------------------------------------------------------------- */

.teklif-yigin { display: flex; flex-direction: column; gap: 1.5rem; }
.teklif {
  border: 2px solid var(--ink); border-radius: var(--yuvarlak-buyuk);
  padding: 2.5rem; background: var(--zemin-beyaz);
  display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--bos-orta); align-items: start;
}
@media (max-width: 991px) { .teklif { grid-template-columns: 1fr; gap: var(--bos-mini); padding: 1.75rem; } }
/* Vurgulu teklif KOYU, turuncu degil. Ayni sayfada hem bu kart hem
   kapanis bolumu turuncuydu: "sayfa tek yerde yukselsin" kurali zaten
   bozuluyordu. Beyaz kartlarin arasinda koyu bir kart, turuncudan hem
   daha kurumsal duruyor hem de kapanis CTA siyla yarismiyor.
   Ic ogeler icin yeni kural yok: HTML de koyu-alan sinifi tasiyor. */
.teklif--vurgu {
  background: var(--yuzey-3);
  color: var(--ink-acik);
  border-color: var(--yuzey-3);
}
.teklif h3 { font-family: var(--font-baslik); font-size: var(--b-4); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.3rem; }
.teklif-etiket { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--aksan-derin); display: block; margin-bottom: var(--bos-xs); }
.teklif--vurgu .teklif-etiket { color: var(--muted-acik); opacity: 1; }
.teklif-kime { font-size: var(--m-kucuk); font-weight: 700; margin-top: var(--bos-xs); }
.teklif-ucret { font-size: var(--m-mini); color: var(--muted); border-top: 1px solid var(--cizgi); padding-top: var(--bos-xs); margin-top: var(--bos-xs); }
.teklif--vurgu .teklif-ucret { color: var(--muted-acik); border-color: var(--cizgi-kurumsal); }
.teklif .dugme { margin-top: var(--bos-mini); }

/* --------------------------------------------------------------------------
   15. Portal bloğu — referanstaki araç bölümünün karşılığı
   -------------------------------------------------------------------------- */

.portal-blok { text-align: center; }
.portal-blok .olcu-dar { margin-inline: auto; }
.cihaz {
  margin: var(--bos-orta) auto 0;
  max-width: 62rem;
  border: 0.7rem solid var(--ink);
  border-radius: var(--yuvarlak-buyuk);
  background: var(--ink);
  overflow: hidden;
}
.cihaz img { width: 100%; }
.cihaz-etiket { display: inline-block; margin-top: var(--bos-xs); font-size: var(--m-mini); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.koyu-alan .cihaz-etiket { color: var(--muted-acik); }

/* --------------------------------------------------------------------------
   16. Proje kartları
   -------------------------------------------------------------------------- */

.proje-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 991px) { .proje-izgara { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .proje-izgara { grid-template-columns: 1fr; } }

.proje-kart {
  border: 2px solid var(--ink); border-radius: var(--yuvarlak-buyuk);
  overflow: hidden; background: var(--zemin-beyaz);
  display: flex; flex-direction: column;
  transition: transform var(--sure) var(--egri);
}
.proje-kart:hover { transform: translateY(-0.4rem); }
.proje-kart img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-bottom: 2px solid var(--ink); }
.proje-govde { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.proje-etiket { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--aksan-derin); }
.proje-kart h3 { font-family: var(--font-baslik); font-size: var(--b-5); font-weight: 600; letter-spacing: -0.01em; }

/* --------------------------------------------------------------------------
   17. SSS akordeon
   -------------------------------------------------------------------------- */

.sss { border-top: 1px solid var(--cizgi); max-width: var(--kap-orta); }
.sss-oge { border-bottom: 1px solid var(--cizgi); }
.sss-soru {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--bos-mini);
  padding: 1.5rem 0; text-align: left;
  font-family: var(--font-baslik); font-size: var(--b-5); font-weight: 600; letter-spacing: -0.01em;
  color: inherit;
}
.sss-isaret {
  flex: none; width: 2.2rem; height: 2.2rem; display: grid; place-items: center;
  border-radius: var(--yuvarlak-hap); border: 2px solid currentColor;
  transition: transform 0.3s var(--egri), background var(--sure) ease;
}
.sss-soru[aria-expanded="true"] .sss-isaret { transform: rotate(45deg); background: var(--zemin-aksan); }
.sss-cevap { overflow: hidden; height: 0; transition: height 0.35s var(--egri); }
.sss-cevap-ic { padding-bottom: 1.5rem; max-width: 55rem; font-size: var(--m-kucuk); line-height: 1.6; color: var(--ink-yumusak); }

/* --------------------------------------------------------------------------
   18. Kapanış CTA — ortalanmış, görselsiz
   -------------------------------------------------------------------------- */

.kapanis { text-align: center; }
.kapanis .olcu-dar { margin-inline: auto; }
.kapanis .hero-ctalar { justify-content: center; }
.kapanis-alt { font-size: var(--m-mini); margin-top: var(--bos-mini); }

/* --------------------------------------------------------------------------
   19. İletişim formu
   -------------------------------------------------------------------------- */

.form-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bos-orta); align-items: start; }
@media (max-width: 991px) { .form-izgara { grid-template-columns: 1fr; } }
.alan { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: var(--bos-mini); }
.alan > span { font-size: var(--m-mini); font-weight: 700; }
.alan input, .alan textarea {
  border: 2px solid var(--ink); border-radius: var(--yuvarlak-mini);
  padding: 0.85rem 1rem; background: var(--zemin-beyaz); color: var(--ink);
  font-size: var(--m-kucuk);
}
.alan textarea { min-height: 9rem; resize: vertical; }
.alan input:focus-visible, .alan textarea:focus-visible { outline-offset: 2px; }

/* --------------------------------------------------------------------------
   20. Footer — beş sütun + alt footer
   -------------------------------------------------------------------------- */

.footer { background: var(--zemin-koyu); color: var(--ink-acik); padding-block: var(--bos-orta) var(--bos-kucuk); }
.footer-izgara { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: var(--bos-orta) 2rem; align-items: start; }
@media (max-width: 991px) { .footer-izgara { grid-template-columns: 1fr 1fr; } }
@media (max-width: 479px) { .footer-izgara { grid-template-columns: 1fr; } }

.footer h2 { font-family: var(--font-metin); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-acik); margin-bottom: var(--bos-xs); }
.footer-liste { display: flex; flex-direction: column; gap: 0.55rem; font-size: var(--m-kucuk); }
.footer-liste a { border-bottom: 1px solid transparent; align-self: flex-start; transition: border-color var(--sure) ease, color var(--sure) ease; }
.footer-liste a:hover { border-bottom-color: var(--aksan-parlak); color: var(--aksan-parlak); }
.footer-marka { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-baslik); font-weight: 700; font-size: var(--b-5); color: var(--ink-acik); margin-bottom: var(--bos-xs); }
.footer-marka .marka-isaret { background: var(--zemin-aksan); color: var(--ink); }
.footer-ozet { font-size: var(--m-mini); color: var(--muted-acik); max-width: 26rem; line-height: 1.6; }

.alt-footer {
  margin-top: var(--bos-orta); padding-top: var(--bos-mini);
  border-top: 1px solid var(--cizgi-koyu);
  display: flex; align-items: center; justify-content: space-between; gap: var(--bos-mini); flex-wrap: wrap;
  font-size: var(--m-mini); color: var(--muted-acik);
}
.alt-footer-baglar { display: flex; gap: var(--bos-mini); flex-wrap: wrap; }
.alt-footer a:hover { color: var(--aksan-parlak); }

/* --------------------------------------------------------------------------
   21. Kaydırma açılışı — yalnız masaüstü (referans deseni)
   -------------------------------------------------------------------------- */

@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
  .ac { opacity: 0; transform: translateY(1.5rem); transition: opacity 0.6s var(--egri), transform 0.6s var(--egri); }
  .ac[data-gorunur="true"] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   22. Panel maketi — cihaz çerçevesi içindeki temsilî panel görüntüsü.
   Portalın iç koduna BAĞLI DEĞİLDİR: vitrin kendi başına ayakta kalsın diye
   satır içi SVG olarak çizilir. Gösterilen sayılar örnektir, gerçek öğrenci
   verisi değildir — bu, yanındaki etikette de yazar.
   -------------------------------------------------------------------------- */

.panel-mock { display: block; width: 100%; height: auto; background: #E7EAEE; }

/* --------------------------------------------------------------------------
   23. Cihaz akışı — portal ekranları arasında geçiş yapan gösteri.
   Referansın araç bölümündeki 5 slaytlı karusel deseninin karşılığı.
   Slaytlar üst üste durur, çapraz geçişle değişir; yükseklik zıplamaz.
   Sekmeler ekranın ADINI söyler — nokta değil, çünkü hangi ekrana
   bakıldığı bilgisi işin yarısı.
   -------------------------------------------------------------------------- */

.slayt-alan { position: relative; }
.slayt {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transform: scale(0.985);
  transition: opacity 0.32s var(--egri), transform 0.32s var(--egri), visibility 0s linear 0.32s;
}
.slayt[data-aktif="true"] {
  position: relative;
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.42s var(--egri) 0.12s, transform 0.42s var(--egri) 0.12s, visibility 0s;
}

.slayt-sekmeler {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
  margin-top: var(--bos-mini);
}
.slayt-sekme {
  font-family: var(--font-metin); font-weight: 700; font-size: var(--m-mini);
  padding: 0.55rem 1.1rem;
  border: 2px solid currentColor; border-radius: var(--yuvarlak-hap);
  background: transparent; color: inherit; cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--sure) ease, background var(--sure) ease, color var(--sure) ease;
}
.slayt-sekme:hover { opacity: 1; }
.slayt-sekme[aria-selected="true"] { opacity: 1; background: var(--zemin-aksan); border-color: var(--zemin-aksan); color: var(--ink); }

/* İlerleme çubuğu: sıradaki slayta ne kadar kaldığını gösterir. */
.slayt-sure { height: 2px; background: currentColor; opacity: 0.18; border-radius: 2px; margin-top: var(--bos-xs); overflow: hidden; }
.slayt-sure span { display: block; height: 100%; width: 0; background: var(--zemin-aksan); border-radius: inherit; }
.slayt-sure[data-calisiyor="true"] span { animation: slaytDolum var(--slayt-sure, 6s) linear forwards; }
@keyframes slaytDolum { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .slayt-sure { display: none; }
  .slayt { transition: none; }
}

/* --------------------------------------------------------------------------
   14. Kurumsal zemin — üst şerit ve ana sayfa hero'su
   --------------------------------------------------------------------------
   Neden değişti: hero baştan başa düz turuncuydu ve üst şerit her sayfada
   turuncuydu. İkisi birlikte sitenin ilk ekranını tek bir yüksek doygunlukta
   renge teslim ediyordu; kurumsal bir kimlikte zemin sakin, aksan azdır.
   Şimdi zemin soldan sağa koyu griye dönüyor, turuncu ise vurguya çekildi.

   Sağ uçtaki grafit bir yan etki değil ASIL SEBEP: portrenin kendi stüdyo
   fonu koyu. Eskiden turuncunun üstünde 2px lacivert çerçeveli bir dikdörtgen
   gibi duruyordu; artık fon zemine karışıyor ve özne sayfadan çıkıyor.

   Kapanış bölümü (bolum--aksan) BİLEREK turuncu kaldı. Turuncu duvar kâğıdı
   olmaktan çıkıp noktalama oldu: sayfa sakin başlıyor, tek yerde yükseliyor.
   -------------------------------------------------------------------------- */

.ust-serit .marka { color: var(--ink-acik); }
.ust-serit .marka-isaret { background: var(--zemin-aksan); color: var(--zemin-koyu); }
.ust-serit .menu-bag { color: var(--ink-acik); }
/* Aktif sayfa İKİ kanalla bildiriliyor: hem renk hem alt çizgi. Yalnız renk
   olsaydı renk körü kullanıcı hangi sayfada olduğunu göremezdi. */
/* SEKIL DILI: cerceveli kutu = BULUNDUGUN SAYFA, dolu turuncu kutu =
   FARENIN OLDUGU YER. Eskiden ikisi ayni kurali paylasiyordu; etkin
   sayfa surekli turuncu yaniyor, baska bir baglantiya gelince ekranda
   IKI turuncu oluyordu ve hangisinin "buradasin" hangisinin "fare
   burada" oldugu anlasilmiyordu.

   Iki kutu da AYNI olculerde (1px kenarlik + ayni dolgu payi), yalniz
   dolgusu farkli. Boylece hover da hicbir sey kaymiyor - kenarligi
   sonradan eklesek satir zipladigi icin gozle fark edilirdi.

   Renk tek kanal degil: etkin sayfa ayrica aria-current tasiyor, yani
   ekran okuyucu da biliyor. */
@media (min-width: 992px) {
  .ust-serit .menu-bag {
    border: 1px solid transparent;
    /* HAP DEGIL KUTU. Serit sagindaki Iletisim dugmesi zaten dolu turuncu
       bir hap; kutucuk da hap olsaydi gezintide iki dugme varmis gibi
       gorunurdu. Kose yaricapi kucuk: bu bir vurgu, tiklanacak bir dugme
       degil. */
    border-radius: var(--yuvarlak-mini);
    padding: 0.42rem 0.85rem;
    transition: background-color var(--sure) ease, color var(--sure) ease,
                border-color var(--sure) ease;
  }
  /* Buradasin: cerceve, dolgu yok. */
  .ust-serit .menu-bag[aria-current="page"] {
    border-color: var(--ink-acik);
    color: var(--ink-acik);
  }
  /* Fare burada: dolu turuncu. Etkin sayfanin uzerine gelindiginde de
     bu kazaniyor - kutucuk her zaman TEK ve farenin oldugu yerde. */
  .ust-serit .menu-bag:hover,
  .ust-serit .menu-bag:focus-visible {
    background: var(--zemin-aksan);
    border-color: var(--zemin-aksan);
    color: var(--ink);
  }
}

/* Mobil menude satirlar tam genislikte ve ayirac cizgileri var; kutucuk
   dili orada okunmuyor. Ayni ayrim baska iki kanalla: etkin sayfa sol
   turuncu cubuk, fare/odak dolu turuncu satir. */
@media (max-width: 991px) {
  .ust-serit .menu-bag[aria-current="page"] {
    box-shadow: inset 3px 0 0 var(--zemin-aksan);
    padding-inline-start: 0.9rem;
    color: var(--ink-acik);
  }
  .ust-serit .menu-bag:hover,
  .ust-serit .menu-bag:focus-visible {
    background: var(--zemin-aksan);
    color: var(--ink);
  }
}
.ust-serit .hamburger span { background: var(--ink-acik); }
.ust-serit .dugme {
  background: var(--zemin-aksan); border-color: var(--zemin-aksan); color: var(--zemin-koyu);
}
.ust-serit .dugme:hover { background: var(--ink-acik); color: var(--kurumsal-1); }

@media (max-width: 991px) {
  /* Açılan menü de aynı zemini sürdürüyor: şerit grafit, menü turuncu
     olsaydı açılma anında kimlik değişirdi. */
  .menu { background: var(--kurumsal-4); border-block-color: var(--cizgi-koyu); }
  .menu-bag { border-bottom-color: var(--cizgi-koyu); }
}

.hero--kurumsal { background: var(--zemin-kurumsal); color: var(--ink-acik); }
.hero--kurumsal .hero-alt { color: var(--muted-acik); }
/* Portrenin sert çerçevesi kalktı: kalın lacivert kenarlık onu yapıştırılmış
   gösteriyordu. Yerine kılcal bir sıcak çizgi — kenar var, çerçeve yok. */
.hero--kurumsal .hero-gorsel img { border: 1px solid var(--cizgi-kurumsal); }

/* KONTRAST DÜZELTMESİ — ölçüldü, göz kararı seçilmedi.
   Zemin soldan sağa açıldığı için accent metnin okunurluğu SOL UÇTA en
   düşük. Ölçüm (#6B3A22 üzerinde): aksan-parlak 4.15, aksan 3.10.
   İkisi de küçük metin için 4.5 eşiğinin altında.

   Çözüm rengi koyulaştırmak değil YERLEŞTİRMEK oldu:
   - Kicker küçük ve büyük harf; turuncu yerine soluk krem (5.28). Zaten
     hero'da üç ayrı turuncu vardı (kicker, başlık vurgusu, düğme);
     ikiye inince hiyerarşi de düzeldi.
   - Başlık vurgusu 6rem: büyük metin eşiği 3.0, aksan-parlak 4.15 geçiyor.
   - Düğme dolgulu; kendi içinde 5.35. Hover'da saydamlaşıp turuncu metne
     dönüyordu (3.10, sınırda); artık kreme tersiniyor (8.71). */
.hero--kurumsal .kicker { color: var(--muted-acik); }
.hero--kurumsal .dugme:hover { background: var(--ink-acik); color: var(--kurumsal-1); }
.hero--kurumsal .metin-bag { color: var(--ink-acik); }
.hero--kurumsal .metin-bag:hover { color: var(--aksan-parlak); }

/* --- İmza yöntem kartları -------------------------------------------------
   Üç kart baştan başa turuncuydu: bölümün neredeyse tamamı tek bir yüksek
   doygunluktaki renkti ve hero'daki hatanın aynısıydı.

   RENK ARTIK BİLGİ TAŞIYOR. Üç kart, sitenin yeni ekseninin üç durağı:
   Adım 01 umber, Adım 02 ara ton, Adım 03 grafit. Yani soldan sağa
   koyulaşma bir süs değil, ADIMLARIN SIRASI. Dar tek bir kartın içine
   gradyan koysaydık aynı şey görünmezdi; sıra, kartlar arasında okunuyor.

   Mobilde ızgara tek sütuna iniyor ve dizi yukarıdan aşağı akıyor —
   yön değişiyor ama sıra bilgisi duruyor.

   ÇEVİRME ARTIK GERÇEK BİR TERSİNME: koyu yüz açık yüze dönüyor. Eskiden
   turuncudan lacivere geçiyordu, iki koyu yüz arasında fark zayıftı.
   Arka yüzde uzun açıklama metni var ve uzun metin açık zeminde daha
   rahat okunuyor; yani tersinme aynı zamanda işlevsel.

   TEK TURUNCU KARTTA DAİREDİR. "Adım 01" turuncu olsaydı ilk kartta
   4.15'te kalırdı (12px büyük harf, eşik 4.5); soluk kreme çekildi:
   5.28 / 6.12 / 7.88. Ölçülen on beş metin/zemin çiftinin hepsi eşiğin
   üstünde. */

.cevir:nth-child(1) { --kart-zemin: var(--yuzey-1); }
.cevir:nth-child(2) { --kart-zemin: var(--yuzey-2); }
.cevir:nth-child(3) { --kart-zemin: var(--yuzey-3); }

.cevir-on {
  color: var(--ink-acik);
  /* Kalın lacivert kenarlık koyu kartın üstünde kayboluyordu; kılcal
     sıcak çizgi kartı zeminden ayırıyor, çerçevelemiyor. */
  border-color: var(--cizgi-kurumsal);
}
/* ADIM yazisi turuncuya DONDU. Kahve tonlarda 4.15 te kaliyordu (12px
   buyuk harf, esik 4.5) ve soluk kreme cekilmisti; lacivertte 6.4 / 7.1
   / 7.8, yani aksan kartlara geri gelebildi. */
.cevir-on .cevir-no { color: var(--aksan-parlak); }
.cevir-on .cevir-daire { background: var(--zemin-aksan); color: var(--ink); }

/* Arka yüz: koyudan aça. Açıklama metni burada ve açık zeminde okunuyor. */
.cevir-arka {
  background: var(--zemin-krem);
  color: var(--ink);
  border-color: var(--ink);
}
.cevir-arka .cevir-no { color: var(--aksan-derin); }

/* --- Kartlarda hover: TAM TERSİNME ---------------------------------------
   İstek "üzerine gelince turuncu olsun" idi. Yalnız zemini turuncu yapmak
   OKUNMAZ bir kart üretirdi: kartın metni krem ve krem/turuncu 2.81 —
   büyük metin eşiğinin (3.0) bile altında. Bu yüzden zeminle birlikte metin
   de dönüyor. Yani bu bir renk değişimi değil TERSİNME, dosyanın kendi
   hover kuralıyla aynı.

   Dört şey birden tersiniyor: zemin, metin, kenar çizgisi ve daire. Daire
   tersinmeseydi turuncu zeminde turuncu daire kaybolurdu.

   Alt başlık (ALAN / ÜRETİM / PORTFÖY) saydamlığı 0.62'den 0.75'e çıkıyor:
   turuncu üzerinde 0.62 ink 2.95'te kalıyordu, 0.75'te 3.72. Sayı göz
   kararıyla değil ölçülerek seçildi.

   :focus-visible de aynı davranıyor — hover yalnız fareyle çalışır, klavyeyle
   gezen kullanıcı aynı geri bildirimi almalı. */
.cevir:hover .cevir-yuz,
.cevir:focus-visible .cevir-yuz {
  background: var(--zemin-aksan);
  color: var(--ink);
  border-color: var(--ink);
}
.cevir:hover .cevir-no,
.cevir:focus-visible .cevir-no { color: var(--ink); }
.cevir:hover .cevir-baslik span,
.cevir:focus-visible .cevir-baslik span { opacity: 0.75; }
.cevir:hover .cevir-daire,
.cevir:focus-visible .cevir-daire { background: var(--ink); color: var(--zemin-aksan); }