/* CV sayfası (/cv) — imleci izleyen sorgulama lambasıyla aydınlanan karanlık
   oda. Kapak ve altındaki bölümler (Ben, Know-How, İşte Ben, Projeler,
   Etkinlikler, Folio) tek sahnede, alt alta durur; menüden geçilince sahne
   kayar (bkz. cv1-lamp.js). */

/* Temel kurallar (site.css'ten kopya): CV sayfası site.css'i yüklemez. */
@font-face {
  font-family: 'Quicksand';
  src: url('/fonts/Quicksand.ttf') format('truetype-variations'),
       url('/fonts/Quicksand.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
* { box-sizing: border-box; }
a { color: inherit; }
html,
body.cv-body {
  margin: 0;
  min-height: 100vh;
}
body.cv-body {
  color: #18181b;
  font-family: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: calc(16 * var(--u));
}

html,
body.cv-body {
  height: 100%;
  background: #212121;
}

/* Ölçek birimi: sayfa 2K'da (2560 genişlik) tasarlandı; her ölçü
   calc(N * var(--u)) ile yazılır ve 2K'da N px'tir. Daha küçük ekranlarda
   (1920×1080, 1280×720) tüm sayfa aynı oranda küçülür, böylece her
   çözünürlükte 2K'daki görünüm korunur. Yükseklik terimi, tarayıcı
   çubuklarıyla kısalan pencerede içeriğin dikeyde de sığmasını sağlar
   (2K'da genişlik terimi belirleyicidir). Yüzde/vw/vh değerleri zaten
   orantılıdır; 1px çizgiler incelip kaybolmasın diye sabit kalır.
   cv1-folio-open.js aynı formülü kullanır (unit()). */
:root {
  --u: min(100vw / 2560, 100vh / 1200);
}
body.cv-body {
  margin: 0;
  overflow: hidden;
}

.cv1-stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #212121;
}

/* Işık alanı düşük çözünürlükte hesaplanır ve tarayıcı tarafından tam ekrana
   yumuşatılarak büyütülür; ışık zaten yumuşak bir gradyan olduğundan kayıp
   olmaz, hesap maliyeti ise 16 kat düşer. */
.cv1-light {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Gölgeler ve ışık altındaki logo; tam çözünürlükte çizilir. */
.cv1-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Gölge düşüren öğeler: yerleşim ve erişilebilirlik için DOM'da durur,
   görüntüleri ışığa göre .cv1-scene tuvaline çizilir. "Canlı" olanlarda
   (data-live, ör. animasyonlu isim logosu) yalnızca animasyonlu parçalar
   ([data-shadow-live] / [data-shadow-ignore]) DOM'da görünür kalır;
   sabit parçalar tuvale çizilir. */
.cv1-shadow-caster:not([data-live]) {
  opacity: 0;
}
.cv1-shadow-caster[data-live] svg * {
  visibility: hidden;
}
.cv1-shadow-caster[data-live] svg [data-shadow-live],
.cv1-shadow-caster[data-live] svg [data-shadow-ignore] {
  visibility: visible;
}

/* Koyu zeminde ışık gradyanlarındaki renk basamaklanmasını kıran ince gren. */
.cv1-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
}

/* ---------- Kenar öğeleri (sabit) ----------
   Yüzdeler referans ekran (1920x1080) üzerinden hesaplanır. */

.cv-hero-tagline-wrap {
  position: absolute;
  bottom: 1%;
  left: calc(50% - calc(200 * var(--u)));
  width: calc(400 * var(--u));
}
.cv-hero-tagline {
  display: block;
  width: 100%;
  height: auto;
}

.cv-hero-brand-wrap {
  position: absolute;
  bottom: 2%;
  left: 1%;
  width: calc(190 * var(--u));
  min-width: calc(120 * var(--u));
}
.cv-hero-brand {
  display: block;
  width: 100%;
  height: auto;
}

/* İsim logosu: kapakta lambanın altında; sayfalar arası geçişte yerini ve
   boyunu cv1-lamp.js değiştirir. Logo sarmalayıcının %75'i kadar, ortalı;
   gölgesi logonun ekrandaki boyutundan hesaplandığı için onunla küçülür. */
.cv-hero-name-wrap {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
}
.cv-hero-name {
  display: block;
  width: 75%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

/* Sayfa menüsü: karanlık oda paletinde, duvardan bir ton açık kömür rengi
   sekmeler, üzerinde lambanın ışığının sıcak beyazı. Bulunulan sayfa ışık
   renginde dolu sekme ve tıklanamaz. Görüntüleri ışığa göre tuvale çizilir
   (bkz. cv1-lamp.js, data-ambient). */
.cv-page-menu-list {
  position: absolute;
  top: 50%;
  right: 0%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(10 * var(--u));
  z-index: 20;
}
.cv-page-menu-item {
  pointer-events: auto;
}
.cv-page-menu-list a {
  display: block;
  font-size: calc(18 * var(--u));
  font-weight: 600;
  color: #d9d1bf;
  background: #2e2d2b;
  padding: calc(10 * var(--u)) calc(42 * var(--u)) calc(10 * var(--u)) calc(22 * var(--u));
  margin-right: calc(-20 * var(--u));
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s ease;
  border-radius: calc(10 * var(--u));
}
.cv-page-menu-list a:hover {
  transform: translateX(calc(-10 * var(--u)));
}
.cv-page-menu-list a.is-current {
  background: #e6dac0;
  color: #212121;
  pointer-events: none;
  cursor: default;
}

/* ---------- Kordon ve lamba ---------- */

/* Kordon: tam ekran SVG içinde, ip simülasyonunun noktalarından geçen
   yumuşak bir eğri. Koyu gövde + ortasında ince parlaklık, yuvarlak bir
   kablo hissi verir. */
.cv1-cord {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.cv1-cord path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Siyah krom kaplı kablo: neredeyse siyah gövde, ortasında soluk gümüşi parlama. */
.cv1-cord-body { stroke: #1a1b1d; }
.cv1-cord-shine { stroke: #9a9ea4; opacity: 0.6; }

/* Lamba kordonun ucuna asılıdır: konumu ve eğimi (kordonun ucundaki
   doğrultu) cv1-lamp.js tarafından verilir. */
.cv1-lamp {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
  overflow: visible;
  pointer-events: none;
}

/* ---------- Işık anahtarı ---------- */

/* İsim logosunun altında, ortalı; en fazla 150px yüksek. Dikey konumu
   cv1-lamp.js verir (logonun alt kenarı + boşluk). */
.cv1-switch {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translateX(-50%);
  height: min(calc(150 * var(--u)), 14vh);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cv1-switch:focus-visible {
  outline: calc(2 * var(--u)) solid #d9d1bf;
  outline-offset: calc(4 * var(--u));
  opacity: 1;
}
.cv1-switch:focus-visible .cv1-switch-svg {
  visibility: hidden;
}
.cv1-switch-svg {
  display: block;
  height: 100%;
  width: auto;
}

/* Işık anahtarı kapalı: lamba sönük, oda aydınlık (ışık tuvali de bu renge
   boyanır, bkz. ROOM_LIGHT). Gren dokusu aynı kalır; açık zeminde "overlay"
   karışımı neredeyse görünmez olacağından "multiply" ile uygulanır. */
html.cv1-lights-off,
html.cv1-lights-off body.cv-body,
html.cv1-lights-off .cv1-stage {
  background: #f6f5f2;
}
html.cv1-lights-off .cv1-grain {
  mix-blend-mode: multiply;
  opacity: 0.06;
}

/* ---------- Bölümler ---------- */

/* Sahneyle birlikte kayan katman: kapak ilk ekran, diğer bölümler sırayla
   altında. Kayma miktarı cv1-lamp.js tarafından transform ile verilir. */
.cv1-world {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
}
.cv1-section {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
}
.cv1-ben { top: 100%; }
.cv1-know-how { top: 200%; }
.cv1-iste-ben { top: 300%; }
.cv1-projeler { top: 400%; }
.cv1-etkinlikler { top: 500%; }
.cv1-folio { top: 600%; }

/* ---------- Ben ---------- */

.cv-ben-story {
  position: absolute;
  left: 20%;
  width: 60%;
  top: 40%;
  column-count: 2;
  column-gap: 3.1vw;
  color: #d9d1bf;
  font-size: calc(16 * var(--u));
  line-height: 1.4;
  white-space: pre-line;
  text-align: justify;
  pointer-events: auto;
}

/* ---------- Know-How ---------- */

/* Program cetvelleri: iki sütun kraft şerit, alt alta; üzerine gelince
   ölçüm yeniden yapılır (cv-knowhow.js). */
.cv-knowhow {
  position: absolute;
  top: 25%;
  left: 21.35%;
  width: 57.3%;
  bottom: 12%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-content: start;
  gap: calc(18 * var(--u)) calc(40 * var(--u));
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: calc(6 * var(--u));
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.85) rgba(255, 255, 255, 0.18);
  pointer-events: auto;
}
.cv-knowhow::-webkit-scrollbar {
  width: calc(8 * var(--u));
}
.cv-knowhow::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.18);
}
.cv-knowhow::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.85);
}
.cv-knowhow::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}

/* Cetvel şeridi: kraft doku; solda programın adı basılı etiket kısmı, sağda
   0–100 ölçek. */
.cv-knowhow-item {
  --t: 1100ms; /* cv-knowhow.js'teki DURATION */
  position: relative;
  height: calc(46 * var(--u));
  display: flex;
  background: #9b9a98 url("/images/cv/brown-texture.jpg") left center / cover no-repeat;
  color: #1c1c1c;
}
.cv-knowhow-label {
  flex: 0 0 31%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8 * var(--u));
  padding: 0 calc(12 * var(--u)) 0 calc(14 * var(--u));
  border-right: 1px solid rgba(28, 28, 28, 0.45);
}
.cv-knowhow-name {
  font-size: calc(14 * var(--u));
  font-weight: 700;
  line-height: 1.15;
}
.cv-knowhow-value {
  font-size: calc(13 * var(--u));
  font-weight: 600;
  color: #4a4a4a;
  font-variant-numeric: tabular-nums;
}

/* Ölçek: 1'lik kısa, 5'lik orta, 10'luk uzun çentikler (üst kenardan
   aşağı); 10'luklarda rakam. */
.cv-knowhow-scale {
  position: relative;
  flex: 1;
  margin: 0 calc(14 * var(--u));
}
.cv-knowhow-ticks {
  position: absolute;
  top: 0;
  left: 0;
  right: -1px; /* son (100) çentiği de çizilsin diye 1px taşar */
  height: 100%;
  background:
    linear-gradient(90deg, rgba(28, 28, 28, 0.85) 1px, transparent 1px) 0 0 / 10% calc(16 * var(--u)) repeat-x,
    linear-gradient(90deg, rgba(28, 28, 28, 0.6) 1px, transparent 1px) 0 0 / 5% calc(10 * var(--u)) repeat-x,
    linear-gradient(90deg, rgba(28, 28, 28, 0.4) 1px, transparent 1px) 0 0 / 1% calc(6 * var(--u)) repeat-x;
}
.cv-knowhow-numbers {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(20 * var(--u));
}
.cv-knowhow-numbers span {
  position: absolute;
  transform: translateX(-50%);
  font-size: calc(10 * var(--u));
  font-weight: 600;
  color: rgba(28, 28, 28, 0.8);
  font-variant-numeric: tabular-nums;
}

/* Seviye: 0'dan seviyeye kadar hafif koyu mürekkep dolgusu ve ucunda üst
   kenardan kesilmiş üçgen çentik. Ölçüm sınıfı şerit bazında verilir;
   böylece hover'da yalnızca o şeridin animasyonu tekrarlanabilir. */
.cv-knowhow-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background: rgba(28, 28, 28, 0.13);
  border-right: calc(2 * var(--u)) solid #1c1c1c;
  transition: width var(--t) cubic-bezier(0.33, 1, 0.68, 1);
}
.cv-knowhow-notch {
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 0;
  border-left: calc(6 * var(--u)) solid transparent;
  border-right: calc(6 * var(--u)) solid transparent;
  border-top: calc(8 * var(--u)) solid #212121;
  transform: translateX(-50%);
  transition: left var(--t) cubic-bezier(0.33, 1, 0.68, 1);
}
.cv-knowhow-item.is-filled .cv-knowhow-fill { width: calc(var(--level) * 1%); }
.cv-knowhow-item.is-filled .cv-knowhow-notch { left: calc(var(--level) * 1%); }

/* ---------- İşte Ben ---------- */

/* 10 iş yeri kartı, satır başına 5, ortalı. */
.cv1-work {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: calc(32 * var(--u));
  pointer-events: auto;
}
/* Satır genişliği sabittir (5 × 150px kart + 4 × 36px boşluk): bir kart
   açılınca genişlediği kadar satırdaki diğer kartlar daralıp kenara çekilir. */
.cv1-work-row {
  display: flex;
  gap: calc(36 * var(--u));
  width: calc(894 * var(--u));
}
/* Kart: sağ köşeleri 40px yuvarlatılmış levha. Firma logosu (200px) 45°
   yatırılıp kartın üst kısmına yerleşir; taşan kısmı kartın biçimiyle
   kırpılır (overflow: hidden). */
.cv1-work-card {
  position: relative;
  flex: 0 0 calc(150 * var(--u));
  min-width: 0;
  height: calc(225 * var(--u));
  border-radius: 0 calc(40 * var(--u)) calc(40 * var(--u)) 0;
  background: #9b9a98; /* doku yüklenene kadar */
  overflow: hidden;
  transition:
    flex-basis 0.5s cubic-bezier(0.65, 0, 0.35, 1),
    border-radius 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
/* Açık kart 470px'e genişler; satırdaki diğer dördü 70px'e daralır
   (470 + 4 × 70 + 4 × 36 = 894). Sınıfları cv1-work.js verir. */
.cv1-work-row.has-open .cv1-work-card {
  flex-basis: calc(70 * var(--u));
}
.cv1-work-row.has-open .cv1-work-card.is-open {
  flex-basis: calc(470 * var(--u));
  border-radius: calc(40 * var(--u)); /* açılırken sol köşeler de yuvarlanır */
}
/* Kartın tüm içeriği açık kart genişliğinde, kartın sol kenarına yaslı
   durur; kart dar olduğu için sağ tarafı gizlidir. Kart genişledikçe kenarı
   bir maske gibi kayarak içeriği açar. */
.cv1-work-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(470 * var(--u));
  height: 100%;
  /* Kahverengi doku hep açık kart genişliğinde: kart genişlerken ölçeklenip
     kaymaz, yalnızca kartın kenarıyla açılır. */
  background: url("/images/cv/brown-texture.jpg") left center / cover no-repeat;
}
.cv1-work-logo {
  position: absolute;
  top: 32%;
  left: calc(75 * var(--u));
  width: calc(200 * var(--u));
  height: auto;
  transform: translate(-50%, -50%) rotate(-45deg);
  /* CV logoları renkli yüklenmiş; kartta beyaz görünür. */
  filter: brightness(0) invert(1);
  pointer-events: none;
}
/* Firmadaki görev(ler): sol altta, her görev ayrı satırda; satırlar alttan
   yukarı doğru dizilir, uzun görev adları kart içinde alt satıra geçer. */
.cv1-work-tasks {
  position: absolute;
  left: calc(14 * var(--u));
  width: calc(122 * var(--u));
  bottom: calc(14 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--u));
  font-size: calc(12 * var(--u));
  font-weight: 700;
  line-height: 1.15;
  color: #262624;
}
/* Açılınca görünen kısım (logo sütununun sağında): firma adı, açıklama,
   altta tarihler ve firmanın web sitesine giden ok. */
.cv1-work-detail {
  position: absolute;
  top: calc(18 * var(--u));
  bottom: calc(14 * var(--u));
  left: calc(180 * var(--u));
  right: calc(22 * var(--u));
  display: flex;
  flex-direction: column;
  color: #262624;
}
.cv1-work-company {
  font-size: calc(16 * var(--u));
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: calc(8 * var(--u));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cv1-work-desc {
  margin: 0;
  font-size: calc(12 * var(--u));
  line-height: 1.38;
  text-align: justify;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 9;
  line-clamp: 9;
}
.cv1-work-foot {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.cv1-work-dates {
  font-size: calc(12 * var(--u));
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.cv1-work-link {
  display: block;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  flex: none;
}
.cv1-work-link img {
  display: block;
  width: 100%;
  height: 100%;
}
.cv1-work-link:hover {
  opacity: 0.7;
}

/* ---------- Carousel (Projeler, Etkinlikler, Folio) ----------
   Kutu yalnızca bir sayfayı gösterir, sayfalar yan yana bir şeritte durur
   ve şerit kayar (bkz. cv1-carousel.js). */
.cv1-carousel {
  position: absolute;
  top: calc(27% - calc(14 * var(--u)));
  left: calc(10% - calc(14 * var(--u)));
  width: calc(80% + calc(28 * var(--u)));
  pointer-events: auto;
}
.cv1-carousel-viewport {
  overflow: hidden;
}
.cv1-carousel-track {
  display: flex;
  align-items: flex-start;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
/* Bir sayfa. Hover'da 3° dönen koçanların köşeleri kesilmesin diye
   içeriden calc(14 * var(--u)) pay. */
.cv1-carousel-page {
  flex: 0 0 100%;
  min-width: 0;
  padding: calc(14 * var(--u));
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  gap: calc(18 * var(--u));
}

/* Carousel'in alt satırı (toplam 20px): sol üçgen, sayfa noktaları, sağ
   üçgen. Noktaların içi boş; bulunulan sayfanınki dolu ve çevresinde bir
   halka var. */
.cv1-carousel-nav {
  height: calc(20 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(14 * var(--u));
}
.cv1-carousel-arrow {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}
.cv1-carousel-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-top: calc(6 * var(--u)) solid transparent;
  border-bottom: calc(6 * var(--u)) solid transparent;
  transform: translate(-50%, -50%);
}
.cv1-carousel-prev::before {
  border-right: calc(9 * var(--u)) solid #d9d1bf;
}
.cv1-carousel-next::before {
  border-left: calc(9 * var(--u)) solid #d9d1bf;
}
.cv1-carousel-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}
.cv1-carousel-dots {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
}
.cv1-carousel-dot {
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  padding: 0;
  border: calc(1.5 * var(--u)) solid #d9d1bf;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.cv1-carousel-dot.is-current {
  background: #d9d1bf;
  box-shadow: 0 0 0 calc(2 * var(--u)) #212121, 0 0 0 calc(3.5 * var(--u)) #d9d1bf;
  cursor: default;
}

/* ---------- Projeler ---------- */

/* Proje kartı: kahverengi dokulu levha; üstte proje sahibi, altında proje
   adı ve açıklama; en altta büyük harfle görev(ler) ve noktalı ok.
   Açıklama en fazla 4 satır. */
.cv-project-card {
  box-sizing: border-box;
  width: calc((100% - calc(54 * var(--u))) / 7);
  height: calc(220 * var(--u));
  border-radius: calc(8 * var(--u));
  padding: calc(16 * var(--u)) calc(20 * var(--u)) calc(14 * var(--u));
  background: #9b9a98 url("/images/cv/brown-texture.jpg") left center / cover no-repeat;
  display: flex;
  flex-direction: column;
  color: #262624;
}
.cv1-project-owner {
  font-size: calc(22 * var(--u));
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cv1-project-name {
  margin-top: calc(6 * var(--u));
  font-size: calc(15 * var(--u));
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cv1-project-desc {
  margin: calc(14 * var(--u)) 0 0;
  font-size: calc(13 * var(--u));
  line-height: 1.4;
  font-weight: 500;
  color: #4a4540;
  text-align: justify;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}
.cv1-project-foot {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(12 * var(--u));
}
.cv1-project-task {
  font-size: calc(11 * var(--u));
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cv1-project-arrow {
  display: block;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  flex: none;
}

/* ---------- Etkinlikler ---------- */

/* Bilet koçanı: üst ve alt parçanın karşılıklı köşeleri "scoop" ile içeri
   oyularak koçan kertiği görüntüsü verir; aradaki noktalı çizgi de perfore
   hattı temsil eder. */
.cv-event-card {
  box-sizing: border-box;
  width: calc((100% - calc(90 * var(--u))) / 6);
  display: flex;
  flex-direction: column;
  transform-origin: center center;
  transition: transform 0.25s ease;
}
.cv-event-card.tilt-left:hover {
  transform: rotate(-3deg);
}
.cv-event-card.tilt-right:hover {
  transform: rotate(3deg);
}

/* Zemin kahverengi doku; kartın üst ve alt parçalarında durur (köşelerindeki
   oyuklar koçan kertiklerini oluşturur), bu yüzden doku iki parçaya ayrı
   ayrı verilir. */
.cv-event-top,
.cv-event-bottom {
  background: #9b9a98 url("/images/cv/brown-texture.jpg") left center / cover no-repeat;
  padding: calc(12 * var(--u)) calc(14 * var(--u));
}
.cv-event-top {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  border-bottom-left-radius: calc(12 * var(--u));
  border-bottom-right-radius: calc(12 * var(--u));
  corner-shape: round round scoop scoop;
}
/* Perfore çizgi ayrı bir düz çizgi (::after); böylece scoop köşelerin iç
   bükey kavisini takip edip eğrilmiyor — köşelerdeki oyuk kadar (calc(12 * var(--u)))
   sağdan soldan içeri çekilerek yalnızca düz kenar boyunca çiziliyor.
   Noktalar gerçek bir SVG dairesi (data URI) olarak çizilir: kare olmayan
   bir desen kutusunda radial-gradient'in "circle" şekli bazı tarayıcılarda
   elips/dikdörtgene dönüşebiliyor. */
.cv-event-top::after {
  content: "";
  position: absolute;
  left: calc(12 * var(--u));
  right: calc(12 * var(--u));
  bottom: calc(-2 * var(--u));
  height: calc(4 * var(--u));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4' viewBox='0 0 8 4'%3E%3Ccircle cx='2' cy='2' r='1.7' fill='%23000000'/%3E%3C/svg%3E");
  background-size: calc(8 * var(--u)) calc(4 * var(--u));
  background-repeat: repeat-x;
  background-position: left center;
}
.cv-event-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(10 * var(--u));
  border-top-left-radius: calc(12 * var(--u));
  border-top-right-radius: calc(12 * var(--u));
  corner-shape: scoop scoop round round;
}

.cv-event-owner,
.cv-event-name,
.cv-event-year {
  font-size: calc(16 * var(--u));
  line-height: 1.35;
  color: #1c1c1c;
}
.cv-event-task,
.cv-event-name,
.cv-event-year {
  font-size: calc(14 * var(--u));
}
.cv-event-name {
  color: #4a4a4a;
  min-height: calc(40 * var(--u));
}
.cv-event-owner {
  font-weight: 700;
}

.cv-event-popup {
  display: block;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  flex-shrink: 0;
}
.cv-event-popup img {
  display: block;
  width: 100%;
  height: 100%;
}
/* Portfolyo sayfası yayındaki (oku olan) etkinlik kartları detayı açar
   (cv1-folio-open.js). */
.cv1-etkinlikler .cv-event-card:has(.cv-event-popup) {
  cursor: pointer;
}

/* ---------- Folio ---------- */

/* İki satır kart uzun olduğu için diğer carousel'lerden yukarıdan (üstten
   %20) başlar; alt satır tagline'a binmesin. Satırda 6 kart. */
.cv1-folio .cv1-folio-carousel {
  top: calc(30% - calc(14 * var(--u)));
}
.cv1-folio .cv1-carousel-page {
  align-items: stretch;
  justify-content: flex-start;
}

.cv-folio-card {
  box-sizing: border-box;
  width: calc((100% - calc(90 * var(--u))) / 6);
  display: flex;
  flex-direction: column;
  /* Etkinlik kartlarıyla aynı kahverengi doku. */
  background: #9b9a98 url("/images/cv/brown-texture.jpg") left center / cover no-repeat;
  position: relative;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
/* Üzerine gelinen kart hafifçe öne çıkar, arkasında gölge belirir. Kaldırma
   ve gölge, sayfanın calc(14 * var(--u)) iç payına sığacak kadar küçük tutulur (viewport
   overflow: hidden). */
.cv-folio-card:hover {
  z-index: 1;
  transform: translateY(calc(-4 * var(--u))) scale(1.03);
  box-shadow: 0 calc(10 * var(--u)) calc(18 * var(--u)) calc(-4 * var(--u)) rgba(0, 0, 0, 0.55);
}
.cv1-folio .cv-folio-card {
  cursor: pointer;
}

/* Portfolyo açılışı (bkz. cv1-folio-open.js): bir Folio kartına tıklanınca
   arka plan, ışık/lamba ve isim logosu dışındaki her şey (bölümler, kenar
   öğeleri, menü) ekran genişliği kadar sola kayar. "translate" özelliği
   kullanılır ki öğelerin kendi transform'larıyla (sahne kayması, menünün
   dikey ortalaması) çakışmasın. */
.cv1-world,
.cv-hero-tagline-wrap,
.cv-hero-brand-wrap,
.cv-page-menu-list,
.cv1-switch {
  transition: translate var(--cv1-open-ms, 1200ms) cubic-bezier(0.65, 0, 0.35, 1);
}
.cv1-stage.cv1-folio-open :is(
  .cv1-world,
  .cv-hero-tagline-wrap,
  .cv-hero-brand-wrap,
  .cv-page-menu-list,
  .cv1-switch
) {
  translate: -100vw 0;
}
/* Kayış bitince (cv1-folio-parked) sola kayan öğeler gizlenir ve geçişleri
   kapatılır: kayma ekran genişliğine (vw) bağlı olduğundan pencere boyu
   değişince geçiş yeniden oynayıp öğeler bir anlığına görünüyordu. Yerleşim
   korunur (display: none değil), çünkü açık kart carousel'deki gizli kartın
   boyunu izler. Kapanışta sınıf, geri kayış başlamadan kaldırılır. */
.cv1-stage.cv1-folio-parked :is(
  .cv1-world,
  .cv-hero-tagline-wrap,
  .cv-hero-brand-wrap,
  .cv-page-menu-list,
  .cv1-switch
) {
  visibility: hidden;
  transition: none;
}
/* Menü sağ kenara yaslı ve sekmeleri kenardan taşar; ekran genişliği kadar
   kayınca uçları sol kenarda kalmasın diye kendi genişliği kadar daha kayar. */
.cv1-stage.cv1-folio-open .cv-page-menu-list {
  translate: calc(-100vw - 100%) 0;
}

/* Tıklanan kartın kopyası: sahneyle birlikte sola kayarken ekranın sol üst
   köşesine (üstten ve soldan calc(100 * var(--u))) uçar. Yolculuk boyunca öne çıkmış
   (havada) durur, yerine oturunca iner. Kapak görseli gösterilir. Etkinlik
   kartının okuna tıklanınca etkinlik kartı da aynı yoldan uçar. */
:is(.cv-folio-card, .cv-event-card).cv1-folio-flyer {
  position: absolute;
  margin: 0;
  pointer-events: auto;
  cursor: pointer;
  transition:
    left var(--cv1-open-ms, 1200ms) cubic-bezier(0.65, 0, 0.35, 1),
    top var(--cv1-open-ms, 1200ms) cubic-bezier(0.65, 0, 0.35, 1),
    transform 0.35s ease,
    box-shadow 0.35s ease;
}
:is(.cv-folio-card, .cv-event-card).cv1-folio-flyer.is-lifted {
  transform: translateY(calc(-4 * var(--u))) scale(1.03);
  box-shadow: 0 calc(10 * var(--u)) calc(18 * var(--u)) calc(-4 * var(--u)) rgba(0, 0, 0, 0.55);
}
.cv1-folio-flyer .cv-folio-card-cover {
  opacity: 1;
}
/* Açılan kartın sağındaki proje detayı: eski tasarımın detay sayfasının
   .content-inner'ı (stilleri aşağıda). Ekranın üstünden altına, sağ kenarına kadar
   uzanan kaydırma alanı. */
.cv1-folio-detail {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: auto;
  /* Kaydırma çubuğu gösterilmez (kaydırma çalışır); kaydırılabildiği
     work-info'daki fare simgesiyle belirtilir. */
  scrollbar-width: none;
}
.cv1-folio-detail::-webkit-scrollbar { display: none; }

/* Geliş/gidiş: kartla aynı sürede ve eğriyle ekranın sağından kayar
   (cv1-folio-open.js). */
.cv1-folio-detail {
  transition: translate var(--cv1-open-ms, 1200ms) cubic-bezier(0.65, 0, 0.35, 1);
}
.cv1-folio-detail.is-away { translate: 100vw 0; }
/* İçerik yüklenene kadar gizli; yerinde dokulu boş panel durur. */
.cv1-folio-detail.is-loading { overflow: hidden; }
.cv1-folio-detail.is-loading > .content-inner { visibility: hidden; }
.cv1-folio-detail-panel {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #9b9a98 url("/images/cv/folio-texture.jpg") repeat;
}
/* Yükleme animasyonu: içerik kısa sürede yüklenmezse (kayış sırasında
   bile) panelin tam ortasında. */
.cv1-folio-detail-loader {
  display: none;
  width: calc(200 * var(--u));
  height: calc(200 * var(--u));
}
.cv1-folio-detail.is-waiting .cv1-folio-detail-loader { display: block; }
/* ---------- Folio proje detayı (site.css'ten kopya) ----------
   Eski tasarımın proje detay sayfasının (/calismalar/:id) stilleri. CV
   sayfasının geri kalanını etkilemesin diye hepsi .cv1-folio-detail altında;
   html.dark yerine detay kutusundaki .dark sınıfı (eski sitenin tema tercihi). */
.cv1-folio-detail {
    left: calc(426 * var(--u));
    padding: calc(51 * var(--u)) calc(106 * var(--u)) calc(50 * var(--u)) 0px;
  --text: #18181b;
  --text-muted: #71717a;
  --hover: #f4f4f5;
  --active: #ececee;
  --divider: #e9e9ec;
  --page-bg: #f0f0f2;
  color: var(--text);
  font-family: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: calc(16 * var(--u));
}
.cv1-folio-detail.dark {
  --bg: #17171a;
  --border: #2c2c31;
  --text: #f4f4f5;
  --text-muted: #9a9aa2;
  --hover: #232327;
  --active: #29292e;
  --divider: #2c2c31;
  --page-bg: #0c0c0d;
}
.cv1-folio-detail * { box-sizing: border-box; }
.cv1-folio-detail [data-lang="tr"] { display: contents; }
.cv1-folio-detail [data-lang="en"] { display: none; }
html.lang-en .cv1-folio-detail [data-lang="tr"] { display: none; }
html.lang-en .cv1-folio-detail [data-lang="en"] { display: contents; }
.cv1-folio-detail a { color: inherit; }
.cv1-folio-detail .divider { height: 1px; background: #715f4b; margin: calc(14 * var(--u)) calc(4 * var(--u)); }
.cv1-folio-detail .content-inner { max-width: calc(760 * var(--u)); }
.cv1-folio-detail .content-inner.content-inner-detail { max-width: calc(1400 * var(--u)); margin: 0; }
.cv1-folio-detail .page-title {
  font-size: calc(30 * var(--u));
  font-weight: 700;
  margin-bottom: 0;
}

/* Çalışma detay (içerik) sayfası */
/* Folio kartlarıyla aynı kahverengi doku (bkz. .cv-folio-card), döşenerek. */
.cv1-folio-detail .work-detail { background: #9b9a98 url("/images/cv/folio-texture.jpg") repeat; padding: calc(32 * var(--u)); }
.cv1-folio-detail .work-detail-back { display: inline-block; margin-bottom: calc(18 * var(--u)); color: var(--text-muted); text-decoration: none; font-size: calc(14 * var(--u)); }
.cv1-folio-detail .work-detail-back:hover { color: var(--text); }
.cv1-folio-detail .work-detail-banner {
  position: relative;
  width: 100%;
  height: calc(400 * var(--u));
  overflow: hidden;
  margin-bottom: calc(20 * var(--u));
  background: var(--border);
}
@media (max-width: 640px) {
  .cv1-folio-detail .work-detail-banner { height: calc(220 * var(--u)); }
}
.cv1-folio-detail .work-detail-banner-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.cv1-folio-detail .work-detail-banner-slide.active { opacity: 1; }
/* Carousel hızı 0 iken banner kendiliğinden dönmez; tıklama/sürükleme ile
   geçilir (bkz. public/js/project-carousel.js). */
.cv1-folio-detail .work-detail-banner.is-manual { cursor: grab; touch-action: pan-y; user-select: none; }
.cv1-folio-detail .work-detail-banner.is-manual:active { cursor: grabbing; }
.cv1-folio-detail .work-detail-banner-dots {
  position: absolute;
  bottom: calc(14 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: calc(8 * var(--u));
  z-index: 2;
}
.cv1-folio-detail .work-detail-banner-dot {
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transition: background 0.25s ease, transform 0.25s ease;
}
.cv1-folio-detail .work-detail-banner-dot.active { background: #fff; transform: scale(1.2); }
.cv1-folio-detail .work-detail-title-divider { margin: calc(18 * var(--u)) 0 calc(24 * var(--u)) 0; }
.cv1-folio-detail .work-detail-body { font-weight: 600; text-align: justify; line-height: 1.7; font-size: calc(16 * var(--u)); color: var(--text); }
/* Yönetim panelindeki açıklamada bırakılan satır/paragraf boşlukları korunur. */
.cv1-folio-detail .work-detail-body > span { white-space: pre-line; }
.cv1-folio-detail .work-detail-demo { display: inline-block; margin-top: calc(24 * var(--u)); }

/* Çalışma detay sayfası: sol tarafta metin, sağ tarafta sabit genişlikte
   "work-info" bileşeni (firma logosu, tarih, kullanılan programlar, etiketler). */
.cv1-folio-detail .work-detail-columns {
  display: flex;
  align-items: flex-start;
  gap: calc(32 * var(--u));
}
.cv1-folio-detail .work-detail-text { flex: 1; min-width: 0; }

.cv1-folio-detail .work-info {
  width: calc(300 * var(--u));
  min-width: calc(300 * var(--u));
  border: 1px solid var(--border);
  border-radius: calc(14 * var(--u));
  background: var(--bg);
  overflow: hidden;
}
.cv1-folio-detail .work-info-section { padding: calc(20 * var(--u)) calc(24 * var(--u)); }
.cv1-folio-detail .work-info .divider { margin: 0; }

.cv1-folio-detail .work-info-logo { display: flex; align-items: center; justify-content: center; }
.cv1-folio-detail .work-info-logo img { max-width: 100%; max-height: calc(61 * var(--u)); object-fit: contain; }
.cv1-folio-detail .work-info-logo-link { display: flex; align-items: center; justify-content: center; max-width: 100%; }

/* work-info'da programlar/etiketler yerine aşağı kaydırma simgesi (cv1-folio-open.js). */
.cv1-folio-detail .work-info-scroll { display: flex; justify-content: center; }
.cv1-folio-detail .work-info-scroll img { display: block; width: calc(50 * var(--u)); height: auto; }
/* Başlığın tam altındaki tarih (cv1-folio-open.js work-info'dan buraya taşır). */
.cv1-folio-detail .work-detail-date { font-size: calc(20 * var(--u)); }
.cv1-folio-detail .work-info-date { text-align: center; font-size: calc(14 * var(--u)); font-weight: 500; }

.cv1-folio-detail .work-info-programs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(16 * var(--u)) calc(12 * var(--u));
}
.cv1-folio-detail .work-info-program { display: flex; align-items: center; justify-content: flex-start; }
.cv1-folio-detail .work-info-program img { max-width: 100%; max-height: calc(30 * var(--u)); object-fit: contain; }

.cv1-folio-detail .work-info-tags .tags { margin-top: 0; }
.cv1-folio-detail .tags { margin-top: calc(12 * var(--u)); display: flex; gap: calc(6 * var(--u)); flex-wrap: wrap; }
.cv1-folio-detail .tag {
  font-size: calc(12 * var(--u));
  padding: calc(4 * var(--u)) calc(10 * var(--u));
  border-radius: calc(5 * var(--u));
  background: var(--hover);
  color: var(--text-muted);
}

/* Firma/program logolarının aydınlık/karanlık moda göre değişmesi: karanlık
   logo varsa aydınlık logo karanlık modda gizlenir, yoksa aydınlık logo
   her iki modda da (yedek olarak) gösterilmeye devam eder. */
.cv1-folio-detail .theme-logo-dark { display: none; }
.cv1-folio-detail.dark .theme-logo-light { display: none; }
.cv1-folio-detail.dark .theme-logo-dark { display: block; }

@media (max-width: 900px) {
  .cv1-folio-detail .work-detail-columns { flex-direction: column; }
  .cv1-folio-detail .work-info { width: 100%; min-width: 0; }
}

/* Çalışma detay sayfası: açıklama metninin tam altındaki fotoğraf/video
   galerisi — yalnızca metin sütununun genişliğini kaplar, yandaki
   work-info bileşeninin altı boş kalır. Kareler arka plansızdır; görseller
   en-boy oranını koruyarak kareyi doldurur (cover). */
.cv1-folio-detail .work-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* work-gallery-layout.js, tek sütunun gerçekte render edilen genişliğini
     ölçüp bu değişkeni yazar; aspect-ratio yerine sabit satır yüksekliği
     kullanılır ki span'i farklı (1/2/3 sütun) hücreler hep aynı yükseklikte
     kalsın (aspect-ratio, gap payı yüzünden span'e göre farklı yükseklik
     üretiyordu). */
  grid-auto-rows: var(--gallery-row-h, auto);
  gap: calc(20 * var(--u));
  margin-top: calc(24 * var(--u));
}
/* 9'dan fazla görsel/video olan çalışmalarda work-gallery-layout.js bu
   sınıfı ekler: aynı genişlikteki alan 3x3 yerine 6x6 birim sütuna bölünür,
   böylece 1-3'lü satırların yanında 4'lü/5'li/6'lı satırlar da mümkün olur. */
.cv1-folio-detail .work-gallery.work-gallery--wide { grid-template-columns: repeat(6, 1fr); }
.cv1-folio-detail .work-gallery-item {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  overflow: hidden;
}
/* Düzensiz (bento) grid: tekli kareler, ikili (2 sütunluk) ve satırın
   tamamını kaplayan tekli görseller karışık olarak dağıtılır (bkz.
   work-gallery-layout.js — hangi öğenin hangi span'i alacağını rastgele
   seçer, tam-satır türü hiçbir zaman ilk satıra denk gelmez). */
.cv1-folio-detail .work-gallery-item.work-gallery-span-1 { grid-column: span 1; }
.cv1-folio-detail .work-gallery-item.work-gallery-span-2 { grid-column: span 2; }
.cv1-folio-detail .work-gallery-item.work-gallery-span-3 { grid-column: span 3; }
.cv1-folio-detail .work-gallery-item.work-gallery-span-4 { grid-column: span 4; }
.cv1-folio-detail .work-gallery-item.work-gallery-span-5 { grid-column: span 5; }
.cv1-folio-detail .work-gallery-item.work-gallery-span-6 { grid-column: span 6; }
.cv1-folio-detail .work-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.35s ease;
}
.cv1-folio-detail .work-gallery-item:hover img { transform: scale(1.05); }
.cv1-folio-detail .work-gallery-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(42 * var(--u));
  color: #fff;
  text-shadow: 0 calc(2 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.65);
  pointer-events: none;
}
/* Geniş (6 sütunlu) grid, dar ekranlarda kendi ara kırılımından geçer:
   masaüstünde 6, calc(900 * var(--u)) altında 3, calc(420 * var(--u)) altında 1 sütun. Dar (3 sütunlu)
   grid'in 720/420 kırılımları yalnızca ona özgü sınıflara (--not-- geniş)
   uygulanır ki iki grid birbirinin span kurallarını ezmesin. */
@media (max-width: 900px) {
  .cv1-folio-detail .work-gallery.work-gallery--wide { grid-template-columns: repeat(3, 1fr); }
  .cv1-folio-detail .work-gallery--wide .work-gallery-item.work-gallery-span-4,
  .cv1-folio-detail .work-gallery--wide .work-gallery-item.work-gallery-span-5,
  .cv1-folio-detail .work-gallery--wide .work-gallery-item.work-gallery-span-6 { grid-column: span 3; }
}
@media (max-width: 720px) {
  .cv1-folio-detail .work-gallery:not(.work-gallery--wide) { grid-template-columns: repeat(2, 1fr); gap: calc(12 * var(--u)); }
  .cv1-folio-detail .work-gallery--wide { gap: calc(12 * var(--u)); }
  .cv1-folio-detail .work-gallery:not(.work-gallery--wide) .work-gallery-item.work-gallery-span-3 { grid-column: span 2; }
}
@media (max-width: 420px) {
  .cv1-folio-detail .work-gallery { grid-template-columns: 1fr; }
  .cv1-folio-detail .work-gallery.work-gallery--wide { grid-template-columns: 1fr; }
  .cv1-folio-detail .work-gallery-item.work-gallery-span-2,
  .cv1-folio-detail .work-gallery-item.work-gallery-span-3,
  .cv1-folio-detail .work-gallery-item.work-gallery-span-4,
  .cv1-folio-detail .work-gallery-item.work-gallery-span-5,
  .cv1-folio-detail .work-gallery-item.work-gallery-span-6 { grid-column: span 1; }
}

/* Galeri lightbox'ı: tüm ekranı kaplayan karanlık filtre, ortada %80
   büyüklüğünde görsel/video ve altında beyaz açıklama; kenarlarda ok. */
.cv1-folio-detail .work-gallery-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.cv1-folio-detail .work-gallery-lightbox.open { display: flex; }
.cv1-folio-detail .work-gallery-lightbox-stage {
  width: 80vw;
  height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(18 * var(--u));
}
.cv1-folio-detail .work-gallery-lightbox-stage img {
  max-width: 100%;
  max-height: calc(80vh - calc(60 * var(--u)));
  object-fit: contain;
}
.cv1-folio-detail .work-gallery-lightbox-stage iframe {
  width: 100%;
  max-width: 80vw;
  aspect-ratio: 16 / 9;
  height: auto;
  max-height: calc(80vh - calc(60 * var(--u)));
  border: none;
}
.cv1-folio-detail .work-gallery-lightbox-caption {
  color: #fff;
  font-size: calc(15 * var(--u));
  text-align: center;
  max-width: 100%;
}
.cv1-folio-detail .work-gallery-lightbox-close {
  position: absolute;
  top: calc(24 * var(--u));
  right: calc(28 * var(--u));
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: calc(18 * var(--u));
  cursor: pointer;
  z-index: 1;
}
.cv1-folio-detail .work-gallery-lightbox-close:hover { background: rgba(255, 255, 255, 0.22); }
.cv1-folio-detail .work-gallery-lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: calc(52 * var(--u));
  height: calc(52 * var(--u));
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: calc(30 * var(--u));
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}
.cv1-folio-detail .work-gallery-lightbox-arrow:hover { background: rgba(255, 255, 255, 0.22); }
.cv1-folio-detail .work-gallery-lightbox-prev { left: calc(24 * var(--u)); }
.cv1-folio-detail .work-gallery-lightbox-next { right: calc(24 * var(--u)); }
@media (max-width: 720px) {
  .cv1-folio-detail .work-gallery-lightbox-stage { width: 92vw; height: 76vh; }
  .cv1-folio-detail .work-gallery-lightbox-arrow { width: calc(42 * var(--u)); height: calc(42 * var(--u)); font-size: calc(24 * var(--u)); }
  .cv1-folio-detail .work-gallery-lightbox-prev { left: calc(8 * var(--u)); }
  .cv1-folio-detail .work-gallery-lightbox-next { right: calc(8 * var(--u)); }
}
/* ---------- /Folio proje detayı ---------- */

/* İsim logosu, kart açılınca kartın üstüne gider (cv1-folio-open.js). */
.cv-hero-name-wrap {
  transition:
    translate var(--cv1-open-ms, 1200ms) cubic-bezier(0.65, 0, 0.35, 1),
    scale var(--cv1-open-ms, 1200ms) cubic-bezier(0.65, 0, 0.35, 1);
}
/* Ok, kartın köşeye gidişiyle aynı sürede 180° döner; kapanışta geri döner. */
.cv1-folio-flyer :is(.cv-folio-card-arrow img, .cv-event-popup) {
  transition: rotate var(--cv1-open-ms, 1200ms) cubic-bezier(0.65, 0, 0.35, 1);
}
.cv1-stage.cv1-folio-open .cv1-folio-flyer :is(.cv-folio-card-arrow img, .cv-event-popup) {
  rotate: 180deg;
}
:is(.cv-folio-card, .cv-event-card).is-flown {
  visibility: hidden;
}

.cv-folio-card-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  /* Banner görseli henüz yüklenmemiş kayıtlar için düz zemin. */
  background: #e5e5e5;
}
.cv-folio-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bilgi alanı: solda %80 genişlikte başlık + altında yıl/görevler satırı,
   sağda %20 genişlikte, tüm yüksekliği kaplayan ok sütunu.
   Çizgiler yalnızca burada, hücrelerin kendi border'ları olarak tanımlanır —
   kartın dışında (üstte/solda/sağda/altta) hiçbir çizgi yoktur. */
.cv-folio-card-info {
  position: relative;
  /* Satırdaki en uzun kartla aynı boya uzar. */
  flex: 1;
  /* Başlık ve meta satırı her zaman eşit yükseklikte (alanın yarısı);
     uzun olanın içeriği ikisinin yüksekliğini de belirler. */
  display: grid;
  grid-template-rows: 1fr 1fr;
  min-height: calc(96 * var(--u));
}

.cv-folio-card-title {
  box-sizing: border-box;
  width: 80%;
  min-height: 2.6em;
  display: flex;
  align-items: center;
  padding: calc(8 * var(--u)) calc(10 * var(--u));
  border-bottom: 1px solid #715f4b;
  font-size: calc(13 * var(--u));
  font-weight: 600;
  line-height: 1.3;
  color: #1c1c1c;
}
/* Başlık en fazla iki satır; taşarsa ikinci satırın sonu "…" ile kesilir. */
.cv-folio-card-title > span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* Başlıkla aynı genişlikte; yıl ve görevler yarı yarıya paylaşır. */
.cv-folio-card-meta {
  box-sizing: border-box;
  width: 80%;
  display: flex;
}

.cv-folio-card-year {
  box-sizing: border-box;
  width: 50%;
  display: flex;
  align-items: center;
  padding: calc(8 * var(--u)) calc(10 * var(--u));
  border-right: 1px solid #715f4b;
  font-size: calc(12 * var(--u));
  color: black;
  white-space: nowrap;
}

.cv-folio-card-tasks {
  box-sizing: border-box;
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(2 * var(--u));
  padding: calc(8 * var(--u)) calc(10 * var(--u));
  font-size: calc(12 * var(--u));
  color: black;
}

.cv-folio-card-arrow {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 20%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #715f4b;
  padding: calc(12 * var(--u));
}
.cv-folio-card-arrow img {
  display: block;
  width: 100%;
  height: auto;
}