:root{
  --ink:#19171C; --sub:#433939; --muted:#7E7E82; --pill:#AE8BF4;
  --gap: 32px;
  --scale: 0.65;
}

/* Section / Hero */
.carousel-container{position:relative;width:100%;padding:0px 0 0;}
.galeri-hero{text-align:center;margin-bottom:28px;font-family:Manrope;color:var(--ink);}
.pill{width:150px;height:40px;border-radius:20px;background:var(--pill);display:inline-flex;align-items:center;justify-content:center;font-weight:700;margin:0 auto 16px;}
.hero-title{font-size:clamp(34px,5vw,64px);font-weight:800;line-height:1.1;letter-spacing:-2px;margin:0 0 8px;}
.hero-desc{color:var(--sub);font-size:18px;font-weight:600;max-width:720px;margin:0 auto;}

/* Outer: full-bleed */
.carousel-outer{
  position:relative; overflow-x:hidden; overflow-y:visible;
  padding-bottom: calc(56px * var(--scale));
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
}

/* Track */
.carousel-track{
  display:flex; gap:calc(var(--gap) * var(--scale));
  will-change:transform; transition:transform .2s ease-out;
  padding-bottom: calc(8px * var(--scale));
}

/* Nav buttons */
.carousel-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border:none; border-radius:999px;
  background:#19171C; opacity:.95; display:grid; place-items:center; cursor:pointer; z-index:3;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.carousel-nav:hover{opacity:1;}
.carousel-nav span{
  color:#fff; font-size:22px; line-height:1; transform:translateY(-1px);
  font-weight:600; text-shadow:none;
}
.carousel-nav.prev{left:24px;}
.carousel-nav.next{right:24px;}

/* Kart SPEC1 */
.carousel-card.card--spec1{
  flex:0 0 calc(766px * var(--scale));
  width:calc(766px * var(--scale));
  height:calc(894px * var(--scale));
  background:#F1F0F2; border-radius:calc(62px * var(--scale));
  box-shadow:none; position:relative; overflow:hidden; cursor:pointer;
}

/* Kart görseli */
.card--spec1 .card-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1); transition:transform .45s ease;
}
.card--spec1:hover .card-bg{ transform:scale(1.02); }

/* Avatar */
.card--spec1 .pp-abs{
  position:absolute; left:calc(62px * var(--scale)); bottom:calc(68px * var(--scale));
  width:calc(72px * var(--scale)); height:calc(72px * var(--scale));
  border-radius:calc(72px * var(--scale)); background-size:cover; background-position:center;
}

/* Başlık */
.card--spec1 .title-abs{
  position:absolute; left:calc((62px + 72px + 20.5px) * var(--scale)); bottom:calc(108px * var(--scale));
  color:#27252A; font-family:Manrope,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:calc(28px * var(--scale)); font-weight:700; line-height:normal; letter-spacing:calc(0.56px * var(--scale));
}

/* Açıklama */
.card--spec1 .desc-abs{
  position:absolute; left:calc((62px + 72px + 20.5px) * var(--scale)); bottom:calc(78px * var(--scale));
  color:#7E7E82; font-family:Manrope,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:calc(22px * var(--scale)); font-weight:400; line-height:normal;
}

/* Kart kapak video desteği */
.card--spec1 .video-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
  transform:scale(1); transition:transform .45s ease;
  pointer-events:none;
}
.card--spec1:hover .video-bg{ transform:scale(1.02); }

/* =================== MODAL =================== */
.work-modal{position:fixed; inset:0; z-index:9999; display:none;}
.work-modal.is-open{display:block;}
.work-modal__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(2px);}
.work-modal__dialog{
  position:relative; z-index:1; width:min(1200px,92vw); max-height:92vh;
  margin:4vh auto; background:#fff; border-radius:20px; box-shadow:0 20px 60px rgba(0,0,0,.25);
  display:flex; flex-direction:column; overflow:auto;
  scrollbar-width:thin; scrollbar-color:#19171C transparent;
  --dlgW: min(1200px, 92vw);
  overflow-x:hidden;
}
.work-modal__dialog::-webkit-scrollbar{width:10px;}
.work-modal__dialog::-webkit-scrollbar-track{background:transparent;}
.work-modal__dialog::-webkit-scrollbar-thumb{background:#201d22;border-radius:8px;}
.work-modal__dialog::-webkit-scrollbar-button,
.work-modal__dialog::-webkit-resizer{display:none;width:0;height:0;}
.work-modal__dialog::-webkit-scrollbar-track-piece:start,
.work-modal__dialog::-webkit-scrollbar-track-piece:end{background:transparent;}

/* Sticky sadece kapatma */
.work-modal__close-wrap{ position:sticky; top:0; height:0; z-index:6; pointer-events:none; }
.work-modal__close{
  position:absolute; top:12px; right:12px;
  width:40px; height:40px; border:none; cursor:pointer;
  border-radius:12px; background:#F2F1F3; font-size:26px; line-height:1;
  display:grid; place-items:center; pointer-events:auto;
}
.work-modal__close:hover{ background:#ecebed; }

/* Üst blok */
.work-modal__header{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.2fr 1fr; gap:24px;
  padding:24px; border-bottom:1px solid #EEE; background:#fff;
}

/* Dinamik medya */
.work-modal__media{
  width:100%; background:#F6F6F7; border-radius:16px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  aspect-ratio: var(--media-ar, 16/10);
}
.work-modal__media.is-auto{ aspect-ratio:auto; }
.work-modal__media img{ width:100%; height:100%; display:block; object-fit: var(--media-fit, cover); }
.work-modal__media.is-auto img{ height:auto; }

.work-modal__meta{display:flex; flex-direction:column; gap:10px;}
.work-modal__title{font-size:clamp(22px,2.2vw,28px); font-weight:800; color:var(--ink);}
.work-modal__desc{color:var(--sub); font-size:16px;}
.work-modal__info{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.work-modal__info span{color:#7E7E82;}

.work-modal__body{padding:24px; overflow:visible;}
.work-section{margin-bottom:28px;}
.work-section h3{font-size:18px; margin-bottom:10px;}

/* ==================== GÖRSEL AKIŞ – MASONRY ==================== */
.work-flow{
  column-width: clamp(280px, 32vw, 520px);
  column-gap: 16px;
}
.work-flow img{
  width:100%;
  display:block;
  margin:0 0 16px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
  transition:transform .2s ease, box-shadow .2s ease;
  break-inside:avoid;
}
.work-flow img:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(0,0,0,.10);
}
@media (max-width:640px){
  .work-flow{column-gap:12px;}
  .work-flow img{margin-bottom:12px;}
}

@keyframes pdfstackShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.pdfstack__slice { display:block; }


/* ============== Ek içerik (GENEL IFRAME ALANI) ============== */
.work-iframe{margin-top:12px;}
.work-iframe h3{margin-bottom:12px;}
.work-iframe iframe{
  width:100%;
  height:clamp(360px,75vh,900px);
  border:1px solid rgba(0,0,0,.10);
  border-radius:12px;
  display:block;
  background:#fff;
}

/* ============== Website (data-iframe-web) ============== */
.work-extra .work-iframe:has(iframe[data-iframe-web]) {
  --scaleWeb: clamp(.2, calc(var(--dlgW) / 1440), 1);
  display:flex;
  justify-content:center;
  align-items:flex-start;
  height:calc(900px * var(--scaleWeb));
  overflow:hidden;
  border-radius:12px;
  background:none;
  border:1px solid rgba(0,0,0,.10);
}
.work-extra .work-iframe iframe[data-iframe-web] {
  width:1440px;
  height:900px;
  border:0;
  display:block;
  transform-origin:top center;
  transform:translateX(-36px) scale(var(--scaleWeb)); /* sola 36px ofset */
}

/* ============== Flipbook (iframe) ============== */
.work-iframe.flipbook{
  border:1px solid rgba(0,0,0,.10);
  border-radius:12px;
  background:none;
  overflow:hidden;
}
.work-iframe.flipbook iframe{
  width:100%; height:auto; min-height:520px; border:0; display:block; border-radius:12px;
}

/* ============== PDF STACK (canvas’lı, tek parça görünüm) ============== */
.work-pdfstack h3{margin-bottom:12px;}
.pdfstack{ display:grid; gap:16px; }
.pdfstack__pages{ display:grid; gap:16px; }
.pdfstack__page{
  position:relative; width:100%;
  min-height:240px;
  border-radius:12px; overflow:hidden;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
}
.pdfstack__page canvas{ width:100%; height:auto; display:block; }
.pdfstack__ph{
  position:absolute; inset:0; display:grid; place-items:center;
  color:#7E7E82; font-size:13px;
}
.pdfstack__err{
  padding:12px; color:#7E7E82; font-size:13px;
  background:#fafafa; border-top:1px dashed rgba(0,0,0,.08);
}

/* ============== PDF (native embed – KULLANILMIYOR ama bıraktık) ============== */
.work-iframe.pdf .work-iframe__stage{
  position:relative;
  width:100%;
  height:75vh;               /* kullanmıyorsan dokunmana gerek yok */
  border-radius:12px;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
  background:#fff;
}
.work-iframe.pdf iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
  background:#fff;
}

/* yardımcı */
.hidden{display:none !important;}


/* modal scroll davranışı iyileştirme */
.work-modal__dialog{ overscroll-behavior: contain; }

.softlink{
  color: var(--ink, #19171C);
  text-decoration: none;
  transition: color .2s ease;
  cursor: pointer;
}
.softlink:hover{ color: var(--brand, #E11D48); } /* senin ana aksan rengine ayarla */


/* =================================================================
   RESPONSIVE OVERRIDES (Tablet & Mobile)
   ================================================================= */

/* 1. TABLET ve ALTINDAKİLER (1024px altı) */
@media (max-width: 1024px) {

  /* --- GENEL AYARLAR --- */
  :root {
    --scale: 1; /* Mobilde scale hesaplamasını sıfırla */
  }
  
  /* Container taşmasını engelle */
  .container, .intro-hero__inner, .references__head {
    width: 100%;
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  /* --- CAROUSEL -> DİKEY LİSTE --- */
  .carousel-container {
    padding-top: 20px;
  }

  .carousel-outer {
    width: 100%;
    margin: 0;
    padding-bottom: 40px;
    overflow: visible;
  }

  .carousel-track {
    display: flex;
    flex-direction: column; /* Alt alta */
    gap: 40px;
    transform: none !important;
    width: 100%;
    padding: 0 20px;
  }

  /* Ok işaretlerini gizle */
  .carousel-nav {
    display: none !important;
  }

  /* Kart Boyutlandırması */
  .carousel-card.card--spec1 {
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 4/5;
    border-radius: 32px;
  }
  
  /* Kart İçi Yazılar (Tablet için default) */
  .card--spec1 .title-abs {
    font-size: 24px;
    left: 32px;
    bottom: 64px;
  }
  .card--spec1 .desc-abs {
    font-size: 16px;
    left: 32px;
    bottom: 40px;
  }
  .card--spec1 .pp-abs {
    width: 48px;
    height: 48px;
    left: 32px;
    bottom: 100px;
  }

  /* --- MODAL --- */
  .work-modal__dialog {
    width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    border-radius: 0;
  }
  
  .work-modal__header {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px;
  }

  .work-modal__media {
    aspect-ratio: 16/10;
  }
  
  .work-modal__info {
    grid-template-columns: 1fr;
  }

  .work-flow {
    column-count: 1;
    column-width: auto;
  }
}

/* /assets/css/templates.css - EN ALT KISIM (GÜNCEL) */
@media (max-width: 768px) {
  
  /* Kart Oranı */
  .carousel-card.card--spec1 {
    aspect-ratio: 3/4.5 !important; 
    width: 100% !important;
  }

  /* --- 1. Başlık (Title) - Daha Geniş ve Rahat --- */
  .card--spec1 .title-abs {
    font-size: 22px !important;
    left: 24px !important;
    bottom: 64px !important; /* Biraz yukarı aldık çünkü PP yok */
    line-height: 1.25 !important;
    width: 90%;              /* Genişliği artırdık */
    /* 3 satıra izin ver */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* --- 2. Açıklama (Desc) --- */
  .card--spec1 .desc-abs {
    font-size: 14px !important;
    left: 24px !important;
    bottom: 32px !important;
    opacity: 0.7;
    width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* --- 3. Profil Resmi (PP) - İPTAL --- */
  .card--spec1 .pp-abs {
    display: none !important; /* Mobilde tamamen gizle */
  }
}