/* ======================================================================
   Proje (vaka) sayfası. site.css'in token'larını ve üst barını kullanır.
   Sayfanın rengi <body style="--pbg; --pfg; --next"> ile verilir: giriş,
   ana sayfadaki o projenin paneliyle aynı renkte olsun diye.
   ====================================================================== */

/* ---------- Giriş: "pencere açılıyor" sahnesi --------------------------- */
/* Meyrem'in seçimi (B). Proje renginde tam ekran bant; programın penceresi
   alttan yarı görünür. Kaydırdıkça bant yukarıdan daralır, pencere yükselip
   bütünüyle görünür, altındaki kâğıt açılır. İlerleme case.js'te --hp (0→1);
   geri kaydırınca geri sarar. Telefonda ve hareket azaltmada sahne yok: son
   kare durağan gösterilir. */
.case-hero { position: relative; height: 190vh; }
.case-hero__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.case-hero__band {
  position: absolute; inset: 0; background: var(--pbg);
  /* Bant alttan kesilerek kısalır: %0 → %42 */
  clip-path: inset(0 0 calc(var(--hp, 0) * 42%) 0);
}
.win {
  position: absolute; left: 50%; top: 116px; width: min(78vw, 1180px);
  transform: translate(-50%, calc((1 - var(--hp, 0)) * 34vh)) scale(calc(.94 + var(--hp, 0) * .06));
  transform-origin: 50% 0;
  border-radius: 12px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px rgba(18, 17, 16, .08), 0 50px 90px -40px rgba(18, 17, 16, .55);
}
/* Windows 11 başlık çubuğu: Ahenya bir masaüstü programı, tarayıcı değil. */
.win__bar { display: flex; align-items: center; height: 36px; padding-left: 14px; background: #f3f3f3; border-bottom: 1px solid #e5e5e5; font: 500 12.5px/1 "Inter", sans-serif; color: #1b1b1b; }
.win__bar span { flex: 1; }
.win__bar svg { width: 138px; height: 36px; flex: none; }
.win img, .win > svg { display: block; width: 100%; height: auto; }
/* Çizim kartı (ERP, koçluk): pencere genişliğinde çizimin yazıları kabalaşıyor;
   ekran görüntüsünden dar tutulur. */
.win:has(> svg) { width: min(56vw, 820px); }
/* Mobil uygulama: pencere yerine iki telefon, ikincisi biraz aşağıda (ana
   sayfadaki panelle aynı dizilim; geçişte oradan buraya akar). */
.win--phones { display: flex; justify-content: center; gap: clamp(28px, 4vw, 64px); width: min(64vw, 820px); background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.win--phones img { width: clamp(170px, 16vw, 250px); border-radius: 30px; border: 7px solid #0e111b; box-shadow: 0 40px 70px -30px rgba(0, 0, 40, .55); }
.win--phones img:last-child { margin-top: 80px; }

/* ---------- Başlık ve künye (kâğıt) ------------------------------------ */
.case-intro {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; align-items: end;
  padding: 24px var(--pad) 110px;
}
.case-intro__text { grid-column: 1 / 8; }
/* "← Çalışmalar": sol üstte, üst barın altında; bandın renginde. */
.back { position: absolute; z-index: 3; left: var(--pad); top: 104px; color: var(--pfg); opacity: .75; transition: opacity .3s, transform .4s var(--ease); }
.back:hover { opacity: 1; transform: translateX(-4px); }
.case-intro .panel__tag { color: var(--ink); }
.case-title { margin-top: 22px; font: 800 clamp(64px, 8.4vw, 150px)/.9 "Bricolage", sans-serif; font-stretch: 88%; letter-spacing: -0.045em; }
.case-lede { margin-top: 24px; max-width: 32em; font-size: 20px; color: var(--ink-2); }
.case-cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }
.pill { display: inline-flex; align-items: center; gap: 10px; padding: 15px 22px; border-radius: 999px; background: var(--ink); color: var(--bg); font: 600 15px/1 "Inter", sans-serif; transition: transform .4s var(--spring); }
.pill:hover { transform: translateY(-3px) rotate(-2deg); }
.pill i { font-style: normal; }
.pill--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px currentColor; }
/* Künye: başlığın yanında dikey liste — etiket solda (mono), değer sağda. */
.facts { grid-column: 9 / 13; border-top: 1.5px solid var(--ink); }
.facts div { display: grid; grid-template-columns: 7.5em 1fr; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--ink-2); padding-top: 2px; }
.facts dd { color: var(--ink); font: 600 16px/1.35 "Bricolage", sans-serif; letter-spacing: -0.01em; }
.facts a { border-bottom: 1.5px solid var(--hot); }

/* ---------- Vaka raporu ------------------------------------------- */
/* Solda sabit içindekiler, sağda okunur genişlikte numaralı bölümler. Metin
   sütunu ~68 karakter; görseller aynı sütunda, sayfayı kaplamaz. */
.doc { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; padding: 0 var(--pad) clamp(90px, 10vw, 150px); border-top: 1px solid var(--line); }
/* Başlık ve liste tek parça sabitlenir; ayrı ayrı sabitlenince kaydırırken
   üst üste biniyorlardı. align-self: start, öğe sütunu doldurmasın diye
   (yoksa yapışacak yeri kalmaz). Durunca yazı üst barın altında, 96px'te. */
.doc__nav { grid-column: 1 / 4; position: sticky; top: 40px; align-self: start; padding-top: 56px; }
.doc__nav p { color: var(--ink-2); }
.doc__nav ol { margin-top: 18px; list-style: none; border-left: 1px solid var(--line); }
.doc__nav a { display: flex; gap: 14px; padding: 8px 0 8px 16px; margin-left: -1px; border-left: 2px solid transparent; color: var(--ink-2); transition: color .3s, border-color .3s; }
.doc__nav a span { opacity: .55; }
.doc__nav a:hover { color: var(--ink); }
.doc__nav a.on { color: var(--ink); border-left-color: var(--hot); }
/* Gövde sağ kenara kadar uzanır ki ekran turunun penceresine yer kalsın;
   metin öğeleri yine okunur genişlikte (~68 karakter) tutulur. */
.doc__body { grid-column: 4 / 13; }
.ch > :not(.tour) { max-width: 760px; }

.ch { padding-top: 56px; scroll-margin-top: 70px; }
.ch + .ch { margin-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--line); }
.ch__h { display: flex; align-items: baseline; gap: 16px; font: 800 clamp(30px, 3vw, 44px)/1 "Bricolage", sans-serif; font-stretch: 88%; letter-spacing: -0.03em; }
.ch__h span { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--hot); }
.ch p { margin-top: 18px; font-size: 18px; line-height: 1.7; color: #3a3835; }
.ch .ch__lead { margin-top: 22px; font: 600 clamp(22px, 2.1vw, 30px)/1.3 "Bricolage", sans-serif; letter-spacing: -0.02em; color: var(--ink); }
.ch__lead em { font-style: normal; background: linear-gradient(transparent 62%, var(--clay) 62%); }
.ch__lead a { border-bottom: 2.5px solid var(--hot); }
.ch__note { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
/* Bölüm altı not (Karar / Kural / Ayrıntı): kart değil, solda turuncu çizgi
   ve iri yazıyla alıntı gibi; göz metni tararken buraya takılsın. */
.ch__aside { margin-top: 28px; padding: 4px 0 4px 22px; border-left: 2px solid var(--hot); }
.ch__aside b { font-size: 13px; font-weight: 500; color: var(--hot); }
.ch .ch__aside p { margin-top: 6px; font: 600 clamp(18px, 1.5vw, 21px)/1.45 "Bricolage", sans-serif; letter-spacing: -0.01em; color: var(--ink); }

/* Çözüm altındaki özellikler: iki sütun, renkli küçük işaret, kart değil. */
.feats { margin-top: 34px; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }
.feats li { padding: 18px 0 18px 22px; border-top: 1px solid var(--line); position: relative; }
.feats li::before { content: ""; position: absolute; left: 0; top: 25px; width: 9px; height: 9px; border-radius: 3px; background: var(--hot); }
.feats b { font: 700 18px/1.3 "Bricolage", sans-serif; letter-spacing: -0.01em; }
.ch .feats p { margin-top: 6px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }

/* Ekran turu. Durağan hâl (telefon, hareket azaltma, betik yok): her adım
   kendi görseliyle alt alta. Geniş ekranda aşağıdaki @media bloğu turu açar. */
.tour__steps { list-style: none; }
.tour__step { margin-top: 40px; }
.tour__step span { color: var(--hot); }
.tour__step b { display: block; margin-top: 8px; font: 700 22px/1.2 "Bricolage", sans-serif; letter-spacing: -0.015em; }
.tour__step p { margin-top: 8px; }
.tour__inline { margin-top: 18px; border-radius: 14px; overflow: hidden; background: var(--pbg); padding: clamp(10px, 1.6vw, 22px); }
.tour__inline img { width: 100%; border-radius: 6px; }
.tour__inline.is-paper { background: #ebe8e1; display: grid; place-items: center; }
.tour__inline.is-paper img { width: min(100%, 460px); }
.tour__stage { display: none; }
/* Telefon ekranları: dikey görsel, telefon çerçevesiyle; ortalanmış, dar. */
.tour--phone .tour__inline { display: grid; place-items: center; }
.tour--phone .tour__inline img, .tour--phone .tour__img { border-radius: 26px; border: 6px solid #0e111b; }
.tour--phone .tour__inline img { width: min(100%, 250px); }

/* Geniş ekranda tur: solda adımlar, sağda yerinde duran (sticky) pencere.
   Okunan adım koyulaşır, solunda turuncu çizgi yanar (içindekilerle aynı
   işaret) ve pencerede o adımın ekranı açılır (case.js → .on). Böylece metin
   ve görsel yan yana okunuyor; görsel sayfayı kaplamıyor. Betik yoksa adımlar
   soluk kalmasın diye .js'e bağlı. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .js .tour { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 64px); margin-top: 16px; }
  .js .tour__step {
    min-height: 58vh; margin: 0; display: flex; flex-direction: column; justify-content: center;
    padding-left: 22px; border-left: 2px solid var(--line); opacity: .35; transition: opacity .5s, border-color .5s;
  }
  .js .tour__step.on { opacity: 1; border-left-color: var(--hot); }
  .js .tour__inline { display: none; }
  /* Pencere ekranın ortasında durur; yüksekliği ~genişliğin %57'si + noktalar. */
  .js .tour__stage { display: block; position: sticky; top: max(96px, calc(50vh - 210px)); align-self: start; }
  .tour__frame { position: relative; aspect-ratio: 1.75; border-radius: 14px; overflow: hidden; background: var(--pbg); transition: background-color .6s; }
  .tour__frame:has(.is-paper.on) { background: #ebe8e1; }
  /* Görsel kutuya sığdırılıp ortalanır (contain gibi) ama köşe ve gölge
     görselin kendisine uygulanır, boş kutuya değil. */
  .tour__img {
    position: absolute; left: 50%; top: 50%; max-width: calc(100% - 2 * clamp(14px, 2vw, 28px)); max-height: calc(100% - 2 * clamp(14px, 2vw, 28px));
    border-radius: 6px; box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .5);
    opacity: 0; transform: translate(-50%, calc(-50% + 22px)) scale(.97);
    transition: opacity .45s, transform .8s var(--ease);
  }
  .tour__img.on { opacity: 1; transform: translate(-50%, -50%); }
  .tour__dots { display: flex; gap: 8px; margin-top: 16px; }
  .tour__dots i { width: 18px; height: 3px; border-radius: 2px; background: var(--line); transition: width .5s var(--ease), background-color .5s; }
  .tour__dots i.on { width: 38px; background: var(--ink); }
  /* Telefon turunda pencere dikey ve dar; metne daha çok yer kalır. */
  .js .tour--phone { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .tour--phone .tour__frame { aspect-ratio: 4 / 5; max-height: 600px; margin-inline: auto; }
  .js .tour--phone .tour__stage { top: max(96px, calc(50vh - 300px)); }
  .tour--phone .tour__dots { justify-content: center; }
}

/* Nasıl kurdum: tanım listesi, solda başlık sağda açıklama. */
.stack { margin-top: 30px; border-top: 1.5px solid var(--ink); }
.stack div { display: grid; grid-template-columns: 12em 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.stack dt { font: 700 17px/1.4 "Bricolage", sans-serif; letter-spacing: -0.01em; }
.stack dd { color: var(--ink-2); font-size: 16px; line-height: 1.6; }

/* Zor kısımlar: numaralı, büyük başlıklı kısa paragraflar. */
.hard { margin-top: 26px; list-style: none; counter-reset: h; }
.hard li { counter-increment: h; display: grid; grid-template-columns: 3em 1fr; padding: 20px 0; border-bottom: 1px solid var(--line); }
.hard li::before { content: "0" counter(h); grid-row: 1 / 3; font: 500 13px/1.9 "Mono", monospace; color: var(--hot); }
.hard b { font: 700 21px/1.25 "Bricolage", sans-serif; letter-spacing: -0.015em; }
.ch .hard p { margin-top: 6px; font-size: 16px; color: var(--ink-2); }

/* ---------- Sıradaki proje ----------------------------------------- */
.next { display: block; padding: clamp(70px, 9vw, 130px) var(--pad); background: var(--next); color: var(--nextfg); position: relative; overflow: hidden; }
.next b { display: block; margin-top: 14px; font: 800 clamp(48px, 8vw, 140px)/.9 "Bricolage", sans-serif; font-stretch: 88%; letter-spacing: -0.045em; }
.next i { font-style: normal; display: inline-block; transition: transform .5s var(--ease); }
.next:hover i { transform: translateX(.25em); }
.next::after { content: ""; position: absolute; inset: 0; background: var(--nextfg); transform: translateY(101%); transition: transform .6s var(--ease); z-index: 0; }
.next > * { position: relative; z-index: 1; transition: color .4s; }
.next:hover::after { transform: none; }
.next:hover > * { color: var(--next); }
.next:focus-visible { outline-color: var(--nextfg); outline-offset: -10px; }


/* ---------- Görününce açılan öğeler -------------------------------- */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s, transform .9s var(--ease); }
.js [data-reveal].on { opacity: 1; transform: none; }

/* ---------- Telefon ------------------------------------------------- */
@media (max-width: 900px) {
  .case-hero { height: auto; }
  .case-hero__pin { position: relative; height: 52svh; min-height: 340px; }
  .case-hero__band { clip-path: none; }
  .win { top: 92px; width: 118%; left: 8%; transform: none; border-radius: 10px 10px 0 0; }
  .win__bar { height: 26px; font-size: 11px; }
  .win__bar svg { width: 100px; height: 26px; }
  /* Çizim kartı ve telefonlar kırpılmasın: ekrana ortalı sığar. */
  .win:has(> svg) { left: var(--pad); width: calc(100% - 2 * var(--pad)); border-radius: 10px; }
  .win--phones { left: 0; width: 100%; gap: 22px; }
  .win--phones img { width: 34vw; border-radius: 22px; border-width: 5px; }
  .win--phones img:last-child { margin-top: 44px; }
  .case-intro { grid-template-columns: 1fr; padding-block: 36px 64px; gap: 34px; margin-top: 0; }
  .case-intro__text, .facts { grid-column: 1 / -1; }
  .back { display: none; } /* telefonda menüde "Ana sayfa" ve "Çalışmalar" var */
  .case-title { font-size: 64px; margin-top: 16px; }
  .case-lede { font-size: 17px; }
  .doc { grid-template-columns: 1fr; }
  .doc__nav { display: none; }
  .doc__body { grid-column: 1 / -1; }
  .ch p { font-size: 17px; }
  .feats { grid-template-columns: 1fr; }
  .stack div { grid-template-columns: 1fr; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .case-hero { height: auto; }
  .case-hero__pin { position: relative; }
  .case-hero__band { clip-path: inset(0 0 42% 0); }
  .win { transform: translate(-50%, 0); }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Giriş bandının üstü boş kalıyordu: projenin adı silik ve dev, pencere yükselirken söner.
   Boyut harf sayısından (--n): kısa ad ekran yüksekliğine, uzun ad genişliğe sığar. */
.case-hero__ad {
  position: absolute; left: var(--pad); right: var(--pad); top: clamp(128px, 17vh, 176px); text-align: center; white-space: nowrap;
  font: 800 min(calc((100vw - 2 * var(--pad)) / (var(--n) * .5)), 26vh)/.9 "Bricolage", sans-serif; font-stretch: 88%; letter-spacing: -0.035em;
  color: var(--pfg); opacity: calc(.15 * (1 - var(--hp, 0))); transform: translateY(calc(var(--hp, 0) * -14vh)); pointer-events: none;
}
/* Telefonda pencere üst kenara yakın, boş alan yok: sorun da yok. */
@media (max-width: 900px) { .case-hero__ad { display: none; } }