/* =============================================================
 * internship/pages.css — Sayfa + ortak bileşen (navbar/footer) stilleri.
 * Tasarım: INTERNSHIP.PHEXUM.COM. Container 1280, içerik sol hizası x=228.
 * ============================================================= */

/* ---- NAVBAR (740:3398): 96px, zemin FAF7F2, alt 12px siyah border ---- */
.in-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--in-bg);
  border-bottom: 12px solid var(--in-border);
}
.in-nav__inner {
  width: 1283px; max-width: 100%; margin-inline: auto;
  height: 84px;                 /* 96 - 12px border = 84 içerik */
  /* İÇERİK sütunuyla AYNI simetrik inset (bkz .in-container) → logo & menü her genişlikte hizalı */
  padding-inline: clamp(24px, calc((100vw - 827px) / 2), 228px);
  display: flex; align-items: center; justify-content: space-between;
}
.in-nav__logo img { display: block; height: 21px; width: auto; }
.in-nav__menu { display: flex; align-items: center; gap: 10px; }
.in-nav__item {
  font-family: var(--in-head); font-weight: 500; font-size: 16px; line-height: 28px;
  letter-spacing: -0.08px; color: var(--in-heading);
  padding: 4px 10px; height: 36px; display: inline-flex; align-items: center;
  border: 1px solid transparent;
}
/* Aktif öğe: lime dolgu + siyah border + 3px sert gölge */
.in-nav__item.is-active {
  background: var(--in-lime); border-color: var(--in-border);
  box-shadow: 3px 3px 0 0 var(--in-black);
}
/* Hover (aktif olmayan öğe): turuncu dolgu + siyah border + sert gölge (tasarım hover state) */
.in-nav__item:not(.is-active):hover {
  background: var(--in-orange); border-color: var(--in-border);
  box-shadow: 3px 3px 0 0 var(--in-black);
}

/* Hamburger butonu — masaüstünde gizli, ≤557px'te görünür */
.in-nav__burger { display: none; width: 40px; height: 36px; padding: 8px 6px; background: none;
  border: 1px solid transparent; cursor: pointer; flex-direction: column; justify-content: space-between; }
.in-nav__burger span { display: block; height: 2.5px; width: 100%; background: var(--in-border); transition: transform .18s, opacity .18s; }
.in-nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.75px) rotate(45deg); }
.in-nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.in-nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.75px) rotate(-45deg); }

/* 1000px altında içerik gibi düz 24px inset (container ile aynı) */
@media (max-width: 1000px) {
  .in-nav__inner { padding-inline: 24px; }
}
@media (max-width: 680px) {
  .in-nav__menu { gap: 6px; }
  .in-nav__item { font-size: 14px; padding: 4px 8px; }
}
/* ≤557px: menü satıra sığmıyor → HAMBURGER. Menü açılır panel olur (sağ üstten). */
@media (max-width: 557px) {
  .in-nav__burger { display: flex; }
  .in-nav__menu {
    position: absolute; top: 84px; right: 0; left: 0;      /* navbar içerik yüksekliği altında */
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--in-bg); border-bottom: 3px solid var(--in-border);
    padding: 8px 24px 16px; box-shadow: 0 8px 0 -4px rgba(0,0,0,0.06);
    max-height: 0; overflow: hidden; padding-block: 0; border-bottom-width: 0;
    transition: max-height .22s ease, padding .22s ease; z-index: 60;
  }
  .in-nav__menu.is-open { max-height: 320px; padding-top: 8px; padding-bottom: 16px; border-bottom-width: 3px; }
  .in-nav__item { font-size: 16px; height: auto; padding: 12px 10px; width: 100%; justify-content: flex-start; }
  .in-nav__item.is-active { box-shadow: 3px 3px 0 0 var(--in-black); }
}

/* ---- FOOTER (761:261): 328px, siyah zemin ---- */
.in-footer { background: var(--in-black); color: var(--in-muted); }
.in-footer__inner {
  width: 1283px; max-width: 100%; margin-inline: auto;
  min-height: 328px; padding-block: 60px;
  /* İçerik/navbar ile AYNI simetrik inset → footer da hizalı */
  padding-inline: clamp(24px, calc((100vw - 827px) / 2), 228px);
  display: flex; justify-content: space-between; position: relative;
}
.in-footer__logo { height: 28px; width: auto; margin-bottom: 30px; }
.in-footer__addr {
  font-family: var(--in-text); font-weight: 300; font-size: 14px; line-height: 22px;
  color: var(--in-muted); font-style: normal; margin: 0;
}
.in-footer__phone {
  font-family: var(--in-text); font-weight: 300; font-size: 14px; line-height: 22px;
  color: var(--in-muted); margin: 8px 0 0;
}
/* Site linki (anasayfaya) — lime, alt turuncu çizgi; hover'da turuncu dolgu (nav diliyle) */
.in-footer__site {
  display: inline-block; margin: 12px 0 0; font-family: var(--in-head); font-weight: 500;
  font-size: 15px; line-height: 24px; color: var(--in-lime); text-decoration: none;
  border-bottom: 2px solid var(--in-orange); padding-bottom: 1px; transition: color .12s, background .12s;
}
.in-footer__site:hover { color: #fff; }
.in-footer__right { display: flex; flex-direction: column; align-items: flex-end; gap: 13px; position: relative; }
.in-footer__menu { display: flex; flex-direction: column; align-items: flex-end; gap: 13px; }
.in-footer__menu a {
  font-family: var(--in-text); font-weight: 300; font-size: 16px; line-height: 28px;
  color: var(--in-lime); padding: 5px 8px; transition: color .12s;
}
/* FOOTER MENU ELEMENT hover: metin lime → beyaz */
.in-footer__menu a:hover { color: #fff; }
.in-footer__top {
  position: absolute; right: 0; bottom: -0px; margin-top: 20px;
  width: 52px; height: 52px; background: var(--in-orange);
  border: 0; cursor: pointer; display: grid; place-items: center;
}
.in-footer__top img { width: 18px; height: 19px; }

@media (max-width: 1000px) {
  /* Satır düzeni korunur: adres SOL, menü + yukarı-ok SAĞ (tasarım hizası). */
  .in-footer__inner { padding-left: 24px; padding-right: 24px; min-height: 0;
    flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 24px; }
  .in-footer__right { align-items: flex-end; }
  .in-footer__menu { align-items: flex-end; }
  .in-footer__top { position: static; }
}
/* Çok dar: menü DAİMA sağda kalsın (sola kaymasın). Satır düzeni korunur; menü/ok sağ hizalı,
   linkler sağa yaslı (satır sararsa bile). Adres kolonu esner. */
@media (max-width: 560px) {
  .in-footer__inner { gap: 16px; }
  .in-footer__left { flex: 1 1 auto; min-width: 0; }
  .in-footer__right { flex: 0 0 auto; align-items: flex-end; margin-left: auto; }
  .in-footer__menu { align-items: flex-end; }
  .in-footer__menu a { text-align: right; }
}
@media (max-width: 460px) {
  .in-footer__menu a { font-size: 14px; }
}

/* =============================================================
 * MARQUEE (652:718 band + 652:1219 track) — siyah 96px, kayan LEARN·BUILD·GROW
 * Item: 24px + ikon, 34px ara, 20px Space Grotesk Regular beyaz; item arası 190px gap.
 * ============================================================= */
/* Home logo şeridiyle AYNI dikişsiz teknik: track = tüm içerik (max-content), N kez basılır,
   translateX(calc(-100%/N)) ile tam bir kopya kaydırılır → başlangıç=bitiş, kesintisiz döngü.
   gap her öğe arasında (kopya sınırı dahil) eşit; sabit -50% yerine -100%/N kullanmak,
   az/çok öğede dahi track'i her zaman ≥2× viewport tutar ve dikişi yok eder. */
.imarquee { height: 96px; background: var(--in-black); overflow: hidden; display: flex; align-items: center; }
.imarquee__track {
  --marquee-repeat: 2;
  display: flex; align-items: center;
  width: max-content; flex-wrap: nowrap; white-space: nowrap;
  animation: imarquee-scroll 2.2s linear infinite;
  animation-duration: calc(2.2s * var(--marquee-repeat) / 2);   /* 10× daha hızlı */
  will-change: transform;
}
/* Her set kendi içinde eşit: 3 öğe + öğe arası 190 + SON öğeden sonra da 190 (padding-right).
   Böylece N adet birebir aynı genişlikte set → translateX(-100%/N) TAM bir set kaydırır,
   dikiş sıfır (home'daki gap-drift hatası yok). */
.imarquee__set { display: inline-flex; align-items: center; gap: 190px; padding-right: 190px; flex: none; }
.imarquee__item { display: inline-flex; align-items: center; gap: 34px; flex: none; }
.imarquee__plus { width: 24px; height: 24px; display: block; flex: none; }
.imarquee__label {
  font-family: var(--in-head); font-weight: 400; font-size: 20px; line-height: 28px;
  letter-spacing: -0.1px; color: #fff;
}
@keyframes imarquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% / var(--marquee-repeat))); }
}
@media (prefers-reduced-motion: reduce) { .imarquee__track { animation: none; } }

/* =============================================================
 * EXPLORE PROGRAMS (1280:814) — 820px kolon, 2×2 kart grid (398×226, 3px border)
 * ============================================================= */
.iexplore { padding-top: 150px; }
.iexplore__head { max-width: 820px; }
.iexplore__title { font-family: var(--in-head); font-weight: 500; font-size: 24px; line-height: 32px; letter-spacing: -0.12px; color: var(--in-heading); margin: 0; }
.iexplore__lead { font-family: var(--in-text); font-weight: 400; font-size: 16px; line-height: 28px; color: var(--in-body); margin: 12px 0 0; }
.iexplore__grid { display: grid; grid-template-columns: repeat(2, 398px); gap: 24px; margin-top: 40px; justify-content: start; }

/* PROGRAM CARD (652:562): 398×226, 3px border, düz beyaz zemin; içerik tam genişlik */
.pcard { display: block; width: 398px; min-height: 226px; background: var(--in-card);
  border: 3px solid var(--in-border); overflow: hidden; position: relative;
  transition: transform 0.08s linear, box-shadow 0.08s linear; }
.pcard:hover { box-shadow: var(--in-shadow); transform: translate(-2px,-2px); }
/* Waitlist kartlar: detaya tıklanamaz (href yok) — Open/Full tıklanabilir kalır, sadece Waitlist
   engellenir. Hover kaldırıldı, imleç düz, hafif soluk. */
.pcard--disabled { cursor: default; opacity: 0.7; }
.pcard--disabled:hover { box-shadow: none; transform: none; }
.pcard__body { position: relative; padding: 18px 15px; display: flex; flex-direction: column; gap: 14px; }
.pcard__status { align-self: flex-start; height: 28px; display: inline-flex; align-items: center; padding: 0 8px;
  font-family: var(--in-head); font-weight: 500; font-size: 16px; line-height: 28px; letter-spacing: -0.08px; }
.pcard__status--open     { background: var(--in-lime);   color: var(--in-heading); }
.pcard__status--full     { background: var(--in-tag-full-bg); color: #fff; }
.pcard__status--waitlist { background: var(--in-orange); color: #fff; }
.pcard__title { font-family: var(--in-head); font-weight: 500; font-size: 20px; line-height: 28px; letter-spacing: -0.1px; color: var(--in-heading); margin: 0; }
.pcard__text { font-family: var(--in-text); font-weight: 400; font-size: 14px; line-height: 22px; color: var(--in-body); margin: 0; }
.pcard__tags { display: flex; flex-wrap: wrap; gap: 10px; }
.pcard__tag { border: 1px solid var(--in-border); background: #fff; padding: 3px 10px;
  font-family: var(--in-head); font-weight: 500; font-size: 14px; line-height: 28px; letter-spacing: -0.07px; color: var(--in-heading); }

/* ---- Boş durum (empty state) — neobrutalist: kesikli kalın kenarlık, sert gölge yok (kutu
   pasif/placeholder hissi versin), kart zeminiyle aynı rounded yok (köşeli). Admin panelde
   içerik yayından kaldırıldığında/kapatıldığında bir grid boş kaldığında kullanılır
   (Explore Programs, Explore Workshops, program detay listeleri vb.). */
.in-empty {
  width: 100%;
  border: 2px dashed var(--in-border);
  background: var(--in-card-accent);
  padding: 32px 24px;
  text-align: center;
  font-family: var(--in-text);
  font-weight: 500;
  font-size: 16px;
  line-height: 26px;
  color: var(--in-body);
}

@media (max-width: 1000px){
  .iexplore { padding-top: 90px; }
  .iexplore__grid{ grid-template-columns: 1fr; }
  .pcard{ width: 100%; max-width: 398px; }
}
/* 900px altında Explore bloğu ORTALI: başlık/açıklama ortalanır, kartlar ortada tek sütun. */
@media (max-width: 900px){
  .iexplore__head{ max-width: 100%; text-align: center; margin-inline: auto; }
  .iexplore__lead{ margin-left: auto; margin-right: auto; }
  .iexplore__lead br{ display: none; }           /* ortalıyken zorunlu satır kırma bozmasın */
  .iexplore__grid{ justify-content: center; justify-items: center; }
  .pcard{ margin-inline: auto; }
}

/* ============================================================= 
 * YOUR APPLICATION JOURNEY (1268:2913) — gantt timeline
 * ============================================================= */
.ijourney { padding-top: 110px; }
/* Stage container'ın sol inset'inden başlar (x=228). Genişlik gantt'ı kapsar (~830). */
.ijourney__stage { position: relative; width: 100%; max-width: 830px; min-height: 632px; }
.ijourney__intro { position: absolute; left: 0; top: 206px; width: 326px; }
.ijourney__title { font-family: var(--in-head); font-weight: 500; font-size: 24px; line-height: 32px; letter-spacing: -0.12px; color: var(--in-heading); margin: 0; }
.ijourney__lead { font-family: var(--in-text); font-weight: 400; font-size: 16px; line-height: 28px; color: var(--in-body); margin: 12px 0 0; }
.ijourney__legend { display: flex; gap: 24px; margin-top: 28px; }
.ijourney__leg { display: inline-flex; align-items: center; gap: 8px; font-family: var(--in-head); font-weight: 500; font-size: 14px; line-height: 28px; letter-spacing: -0.07px; color: var(--in-body); }
.ijourney__chip { width: 14px; height: 14px; border: 1px solid var(--in-border); box-shadow: 1px 1px 0 0 var(--in-black); display: block; }
.ijourney__chip--you { background: var(--in-lime); }
.ijourney__chip--us  { background: var(--in-black); }
/* Sağ dikey nokta desenleri */
.ijourney__pat { position: absolute; width: 52px; display: block; }
.ijourney__pat--1 { left: 458px; top: 2px; height: 629px; }
.ijourney__pat--2 { left: 695px; top: -26px; height: 684px; }

/* Adım kartı (804:2253): 207×90, 2px border, sert gölge; üst başlık barı + açıklama.
   HOVER (813:2403): gölge 2px→4px, kart hafif kalkar (neobrutalist lift). */
.jstep { position: absolute; width: 207px; height: 90px; border: 2px solid var(--in-border);
  box-shadow: 2px 2px 0 0 var(--in-black); overflow: hidden;
  transition: box-shadow .1s, transform .08s; }
.jstep:hover { box-shadow: 4px 4px 0 0 var(--in-black); transform: translate(-2px,-2px); }
.jstep--you { background: var(--in-lime); }
.jstep--us  { background: #161614; }
.jstep__head { height: 41px; background: var(--in-card-fill); border-bottom: 2px solid var(--in-border);
  display: flex; align-items: center; gap: 6px; padding: 0 11px;
  font-family: var(--in-head); font-weight: 500; font-size: 16px; line-height: 28px; letter-spacing: -0.08px; color: var(--in-black); }
.jstep__desc { height: 47px; display: flex; align-items: center; padding: 5px 11px;
  font-family: var(--in-text); font-weight: 500; font-size: 12px; line-height: 18px; }
.jstep--you .jstep__desc { color: var(--in-heading); }
.jstep--us  .jstep__desc { color: #fff; }

@media (max-width: 1000px){
  .ijourney{ padding-top: 80px; }
  .ijourney__stage{ position: static; min-height: 0; max-width: 520px; display: flex; flex-direction: column; }
  .ijourney__intro{ position: static; left: auto; top: auto; width: auto; margin-bottom: 32px; }
  .ijourney__pat{ display: none !important; }
  .jstep{ position: static !important; left: auto !important; top: auto !important;
    width: 100%; height: auto; margin-bottom: 16px; }
  .jstep__head{ height: auto; padding-top: 6px; padding-bottom: 6px; }
  .jstep__desc{ height: auto; }
}
/* 900px altında Journey ORTALI (Explore gibi): kolon ortalanır, intro metni + legend ortada. */
@media (max-width: 900px){
  .ijourney__stage{ margin-inline: auto; align-items: center; }
  .ijourney__intro{ text-align: center; }
  .ijourney__legend{ justify-content: center; }
}

/* =============================================================
 * CTA (1268:2914) — sol metin+buton, sağ koyu yeşil banner "Internship 101"
 * ============================================================= */
.icta { padding-top: 90px; padding-bottom: 90px; }
/* CTA container sol inset'inden başlar (x=227), 827 genişlik — ortalı değil. */
.icta__stage { position: relative; width: 100%; max-width: 827px; min-height: 429px; }
.icta__text { position: absolute; left: 0; top: 283px; width: 520px; margin: 0;
  font-family: var(--in-text); font-weight: 400; font-size: 18px; line-height: 30px; color: var(--in-body); }
.icta__btn { position: absolute; left: 0; top: 379px; display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--in-heading); border: 2px solid var(--in-border); box-shadow: 6px 6px 0 0 var(--in-black);
  padding: 11px 37px; font-family: var(--in-text); font-weight: 400; font-size: 16px; line-height: 28px;
  transition: background 0.12s, color 0.12s, transform 0.08s, box-shadow 0.08s; }
.icta__btn:hover { background: var(--in-orange); color: #fff; }
.icta__btn:active { transform: translate(3px,3px); box-shadow: 3px 3px 0 0 var(--in-black); }

/* Banner (1081:1984): 827×263, #133907, 3px border, 12px gölge.
   Dış kutu responsive (aspect-ratio 827:263); iç sahne SABİT 827×263, JS --cta-scale ile ölçeklenir. */
.icta__banner { position: absolute; left: 0; top: 0;
  width: 827px; max-width: 100%; aspect-ratio: 827 / 263; background: var(--in-lime-900);
  border: 3px solid var(--in-black); box-shadow: 12px 12px 0 0 var(--in-black); overflow: hidden; }
.icta__banner-scene { position: absolute; top: 0; left: 0; width: 827px; height: 263px;
  transform-origin: top left; transform: scale(var(--cta-scale, 1)); }
.icta__banner-bg { position: absolute; right: 0; top: 0; width: 423px; height: 100%; object-fit: cover; opacity: 0.2; pointer-events: none; }
.icta__banner-title { position: absolute; left: 48px; top: 50%; transform: translateY(-50%); margin: 0;
  font-family: 'Chalkduster','Bradley Hand','Comic Sans MS',cursive; font-weight: 400; font-size: 46px; line-height: 68px;
  color: #fff; text-shadow: 2px 1px 0 #000; }
.icta__chip { position: absolute; display: inline-flex; align-items: flex-start; background: #fff;
  border: 2px solid var(--in-border); box-shadow: 2px 2px 0 0 var(--in-black); padding: 10px;
  font-family: var(--in-head); font-weight: 500; font-size: 16px; line-height: 28px; letter-spacing: -0.08px; color: var(--in-black); }
.icta__bm { position: absolute; width: 15px; height: 19px; display: block; }

@media (max-width: 1000px){
  .icta{ padding-top: 60px; padding-bottom: 70px; }
  /* Banner üstte, ardından metin + buton (tasarım sırası korunur) */
  .icta__stage{ position: static; min-height: 0; max-width: 827px;
    display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
  /* relative kalmalı — içindeki absolute chip/title/bookmark'ların hizalama bağlamı bu.
     static yaparsak çocuklar üst pozisyonlu ata/viewport'a kaçıp hero üstünde beliriyordu. */
  /* relative kalmalı — iç sahnenin/absolute çocukların bağlamı bu (static olursa hero'ya kaçar).
     Yükseklik aspect-ratio'dan gelir; iç sahne JS ile ölçeklenir → chip'ler HER genişlikte görünür. */
  .icta__banner{ position: relative; order: 0; left: auto; top: auto; transform: none;
    width: 100%; max-width: 827px; box-shadow: 8px 8px 0 0 var(--in-black); }
  .icta__text{ position: static; order: 1; left: auto; top: auto; width: auto; }
  .icta__btn{ position: static; order: 2; left: auto; top: auto; }
}