/* ============================================================
   Proje Detay — İZOLE STİLLER (pd- öneki)
   İSTENENLER:
   - Sayfa yapısı servislerle aynı genişlikte (pd-wide)
   - Bilgi & açıklama dar genişlikte, ortalı (pd-narrow)
   - Tüm köşeler: radius 0
   - Tüm yazılar: GloberThinFree
   - Randevu butonu: overshoot-lines animasyonu, background/shadow yok
   ============================================================ */

/* =============== GALERİYİ DARALT + ORTALA =============== */
/* Galeriyi "dar" kolon genişliğiyle aynı hizaya çekiyoruz */
:root{
  /* İstersen bu iki değeri oynayarak tam çizgilerin arasına oturtabilirsin */
  --gallery-max: 1100px;   /* üst limit */
  --gallery-vw:  82vw;     /* geniş ekranlarda oransal genişlik */
}

/* 🔤 GloberThinFree fontu (YOLU kendine göre düzelt) */
@font-face{
  font-family: "GloberThinFree";
  src:
    url("../fonts/GloberThinFree.woff2") format("woff2"),
    url("../fonts/GloberThinFree.woff") format("woff"),
    url("../fonts/GloberThinFree.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* project-detail.css (YENİ) — arka plan kayar */
.pd-page{
  background-color: #0e0e10;
  /* Projede mobil için 1:2 svg kullanıyorsun; yolu kendi yapına göre düzelt */
  background-image: url('../medias/back-ground-3.svg');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: auto 120dvh;   /* yüksekliğe göre daralt */
  background-attachment: scroll;  /* ← kritik */
  color: #e8e9ec;
}


/* ⇢ BU SAYFADA TÜM KÖŞELER DÜZ */
.pd-page *{ border-radius: 0 !important; }

/* Üst boşluk (bit modülü gerçek değeri JS’ten yazar) */
.pd-content{ padding-top: 96px; }

/* Geniş/dar kaplar */
.pd-wide   { width: clamp(1100px, 92vw, 1600px); margin: 0 auto; padding: clamp(12px, 2.3vw, 28px); }
.pd-narrow { width: clamp(760px, 72vw, 1080px); margin: 0 auto; padding: clamp(8px, 1.6vw, 18px); }

/* Başlık */
.pd-hero{ text-align:center; padding: 6px 0 0; }
.pd-hero h1{ margin:0; font-weight:650; letter-spacing:.2px; font-size: clamp(22px, 3.2vw, 36px); }

/* 3D sahne (bordersiz) */
.pd-stage{
  margin-top: 14px;
  background: transparent !important; /* önce gradient vardı; kutu görünümü için transparan */
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
  width: clamp(900px, 70vw, 1200px); /*  genişlik: 900–1200px banda, ortada 70vw */
  margin: 14px auto 0;               /*  ortala */
}
.pd-frame{   
  height: clamp(480px, 82vh, 900px); /* önceki 70vh civarından daha yüksek */ 
  display:block;   
  background: rgba(15, 17, 22, 0.40) !important; /* ⬅ 0.40 = %40 opaklık */
}

.pd-frame model-viewer{ width:100%; height:100%; display:block; outline:none; }

/* Galeri — 6 sütun, kare */
.pd-gallery{
  /* Galeri satırının toplam genişliği → kırmızı çizgiler arası */
  width: clamp(760px, var(--gallery-vw), var(--gallery-max));
  margin: 12px auto 0;                      /* ortala */
  display:grid;
  grid-template-columns: repeat(6, 1fr);    /* 6 kare tek satır */
  gap: 12px;
}

.pd-thumb{
  position:relative; display:block; aspect-ratio: 1 / 1;
  overflow:hidden;
  background:#0f1116;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  transition: transform .18s ease, box-shadow .18s ease;
  cursor: zoom-in;

}
.pd-thumb:hover{ transform: translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.35); }
.pd-thumb img{   
  width:100%; height:100%;
  object-fit: cover;                         /* deforme etmeden doldur (gerekirse kenarları kırpar) */
  display:block; 
}

/* Proje Bilgileri & Açıklama — dar genişlikte ortalı */
.pd-mid-title{
  text-align:center; margin: 28px 0 10px;
  font-weight:650; color:#bfc4cf;
  letter-spacing:.4px; text-transform:uppercase; font-size:28px;
}
.pd-info-grid{
  display:grid; gap:12px; grid-template-columns: repeat(3, 1fr);
  margin-bottom: 10px;
}
.pd-desc{
  margin-top: 10px;
  background: rgba(0, 0, 0, 0.2);
  padding: 16px; color:#e5e5e5;
}
/* ============================================================
   PROJE DETAY — LIGHTBOX (Servis Detay ile aynı grid arayüz)
   - Aynı düzen: [sol ok] [img] [sağ ok] + [thumb şeridi] + [caption & count]
   - .lightbox sınıfı sayesinde mobile.css’teki genel max-width/ok stilleri de devreye girer
   - Mevcut .pd-page .lightbox > img + okları alttaki grid düzeni KALDIRILIYOR (çakışmasın diye)
   ============================================================ */
/* YERİNE BUNU KOY */
.pd-page .lightbox:not(#pd-lightbox){
  /* Sadece sayfa içindeki inline lightbox kaplarını etkiler;
     BODY'ye eklenen overlay (#pd-lightbox) bu kümeden hariç. */
  display: block !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* -----------------------------------------------------------
   2) OVERLAY’i güvenli şekilde gizle/göster:
   ----------------------------------------------------------- */
#pd-lightbox{
  position: fixed; inset: 0; z-index: 9999;
  display: none !important;          /* başta KAPALI */
  visibility: hidden; opacity: 0;
  pointer-events: none;               /* kapalıyken tıklama almasın */
  /* (Varsa: transition: opacity .2s ease; ekleyebilirsin) */
}
#pd-lightbox.is-open{
  display: block !important;          /* açıkken görünür */
  visibility: visible; opacity: 1;
  pointer-events: auto;
}
/* Kapsayıcı görünürlük kontrolleri */
#pd-lightbox { position: fixed; inset: 0; display: none; z-index: 9999; }
#pd-lightbox.is-open { display: block; }

/* Arka plan */
#pd-lightbox .pd-backdrop{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.84);
}

/* Sahnede Servis Detay düzeni: 3 sütun (sol ok / img / sağ ok)
   alt satır: thumbs, alt satır: caption & count */
#pd-lightbox .pd-stage{
  position: absolute; inset: 0;
  display: grid; 
  grid-template-columns: 72px 1fr 72px;
  grid-template-rows: 1fr auto auto;
  align-items: center; justify-items: center;
  padding: 0; /* nefesi img max sınırlarıyla sağlayacağız */
}

/* Büyük görsel */
#pd-lightbox .pd-img{
  grid-column: 2;
  max-width: min(85vw, 1400px);
  max-height: min(76vh, 900px);
  width: auto; height: auto;
  object-fit: contain; 
  border-radius: 0;
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
}

/* Kapat butonu: sağ üst */
#pd-lightbox .pd-close{
  position: absolute; top: 16px; right: 18px;
  width: 44px; height: 44px;
  background: rgba(255,255,255,.08);
  border: 0; color: #fff; font-size: 28px; line-height: 1;
  cursor: pointer; border-radius: 8px;
}

/* Sol/sağ oklar */
#pd-lightbox .pd-nav{
  width: 60px; height: 60px;
  background: rgba(255,255,255,.08);
  border: 0; color: #fff; font-size: 28px; cursor: pointer;
  border-radius: 6px;
}
#pd-lightbox .pd-nav:hover{ background: rgba(255,255,255,.14); }
#pd-lightbox .pd-nav.prev{ grid-column: 1; }
#pd-lightbox .pd-nav.next{ grid-column: 3; }

/* Thumbnail şeridi (yatay kaydırma) */
#pd-lightbox .pd-thumbs{
  grid-column: 1 / -1;
  display: flex; gap: 10px; padding: 10px 16px;
  overflow-x: auto; max-width: 96vw;
}
#pd-lightbox .pd-thumbs .pd-thumb-img{
  width: 110px; height: 72px; object-fit: cover;
  opacity: .64; border: 2px solid transparent; border-radius: 6px;
  flex: 0 0 auto; cursor: pointer;
}
#pd-lightbox .pd-thumbs .pd-thumb-img.is-active{
  opacity: 1; border-color: #fff;
}

/* Caption & Sayaç */
#pd-lightbox .pd-caption{
  grid-column: 1 / -1; color: #fff; opacity: .92;
  margin-top: 8px; text-align: center;
}
#pd-lightbox .pd-count{
  grid-column: 1 / -1; color: #bbb; font-size: 12px;
  margin: 4px 0 14px; text-align: center;
}

/* ==========================================[ PROJE DETAY / RANDEVU — FİNAL ]========================================== */
/* 1) Kısa sayfalarda kartı dibe oturt: */
body.project-detail main{
  display: flex;                /* dikey eksende esnet */
  flex-direction: column;
  min-height: 100vh;
}

/* 2) Kapsayıcı: genişlik, hizalama ve alt boşluk */
.project-detail .appointment{
  width: clamp(960px, 88vw, 1200px) !important; /* servislerle birebir */
  margin: 0 auto 0px !important;               /* yatay merkez + ALT 30px */
  position: relative;
  margin-top: auto;                              /* içerik azsa dibe yapış */
}

/* 3) Üstte 50px nefes alanı (alt boşluk zaten margin’de) */
.project-detail .appointment::before{
  content:"";
  display:block;
  height:50px;
}

/* 4) Kart gövdesi (köşeler 0, gövde servislerle aynı) */
.project-detail .appt-inner{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 0;
  padding: clamp(24px, 5vw, 40px);
  text-align: center;
}

/* 5) Randevu butonu (overshoot çizgileri + ölçüler) */
.project-detail .appt-cta.btn-overshoot{
  /* çizgiler */
  --line-color: rgba(255,255,255,.55);
  --thick: 1px;
  --inset-x: 10px;
  --inset-y: 10px;
  --shrink-h: 20px; /* 0px = yatay çizgiler kısalmaz */
  --shrink-v: 20px;

  /* kutu görünümü */
  background: transparent !important;
  box-shadow: none !important;
  border: 0;
  padding: 18px 26px;      /* kutu ölçüsü */
  font-weight: 700;
  color: #e8e9ec;
  text-decoration: none;
}

/* ============================
   PROJE BİLGİLERİ — FİLİGRANLI KARTLAR
   Amaç:
   - Her kartın sağ tarafında filigran (ikon) alanı olsun.
   - Kart yüksekliği varsayılan olarak artsın; istenirse kart bazında değişsin.
   - Küçük ekranlarda filigran alanı otomatik sadeleşsin.
   ============================ */

/* Izgara aynı kalabilir; istersen gap arttırılabilir */
/* .pd-info-grid{ display:grid; gap:12px; grid-template-columns: repeat(3,1fr); } */

/* ---- Temel kart gövdesi ---- */
.pd-info-card{
  /* --- Ayarlanabilir değişkenler (kart bazında override edilir) --- */
  --card-h: 120px;               /* kart minimum yüksekliği (ilk kart için 160–180px vereceğiz) */
  --wm: none;                    /* filigran görseli: inline style ile --wm: url('...') */
  --wm-size: 150px;               /* filigran ikon boyutu (kare) */
  --wm-box: 10px;               /* sağdaki filigran için ayrılan kutu genişliği */
  --wm-opacity: .1;             /* filigran opaklığı (0–1) */

  position: relative;            /* pseudo elemanları tutmak için */
  overflow: hidden;              /* taşmaları gizle */
  background: rgba(0, 0, 0, 0.2);           /* mevcut arkaplanla uyumlu */
  padding: 16px;                 /* sol/üst/alt iç boşluk */
  padding-right: calc(16px + var(--wm-box)); /* sağa filigran alanı kadar pad */
  min-height: var(--card-h);     /* hedeflenen daha yüksek kutu */
  color: #e5e5e5;                /* metin rengi (mevcuda uyum) */
}

/* Etiket ve değer tipografisi (mevcut sınıfların kalıbı) */
.pd-info-k{
  font-size: 16px;
  color: #e5e5e5;
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-left: 10px;
}
.pd-info-v{
  font-size: 18px;
  font-weight: 600;
  margin-top: 10px;  /* biraz daha nefes */
  margin-left: 5px;
}

/* ---- İç dikey ayırıcı çizgi (filigran alanının soluna) ---- */
.pd-info-card::before{
  content: "";
  position: absolute;
  top: 10px; bottom: 10px;
  left: calc(var(--wm-box) - 1px);
  width: 1px;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.15),
    rgba(255,255,255,.8),
    rgba(255,255,255,0.15)
  );
  pointer-events: none;
}

/* ---- Filigran ikon (arka plan pseudo) ---- */
.pd-info-card::after{
  content: "";
  position: absolute;
  /* ikon kutusunu sağda ortala */
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: var(--wm-size);
  height: var(--wm-size);

  /* ikon grafiği */
  background: var(--wm) center / contain no-repeat;
  opacity: var(--wm-opacity);

  /* tek renk/monokrom his: renkli svg ise gri-tona çekmek için */
  filter: saturate(0);

  pointer-events: none; /* tıklamayı engellemesin */
}

/* ============================
   MODEL YARDIM ROZETİ + BALON
   ============================ */

/* 1) Model kapsayıcısını referans noktası yap (rozet bu kutuya göre konumlanacak) */
.pd-hero-media{                /* ← model alanını saran KENDİ sınıfın buysa bunu kullan */
  position: relative;          /* yoksa: .model-viewer-wrap { position:relative; } */
}

/* 2) Sağ-üstte duran “i” yardım rozetinin ana kapsayıcısı */
.model-help{
  /* --ofx/--ofy ile kenardan uzaklığı kolay ayarlayalım */
  --ofx: 16px;                 /* sağdan boşluk */
  --ofy: 14px;                 /* üstten boşluk */
  --t: .3s;                    /* animasyon süresi */

  position: absolute;
  top: var(--ofy);
  right: var(--ofx);
  z-index: 50;                 /* modelin üstünde kalsın */
}

/* 3) “i” rozetinin stili (kare kutu) */
.help-badge{
  width: 34px; height: 34px;             /* kare */
  display: inline-grid; place-items: center;
  border-radius: 8px;                     /* hafif yuvarlak */
  font: 700 18px/1 "Inter", system-ui;    /* kalın I */
  letter-spacing: .5px;
  color: #e9eaee;
  background: rgba(20,20,22,.68);         /* yarı saydam koyu */
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  cursor: help;                           /* “help” imleci */
  transition: transform var(--t) ease, background var(--t) ease, border-color var(--t) ease;
  backdrop-filter: blur(6px);             /* cam efekti */
}

/* Hover’da rozet hafif yükselsin */
.help-badge:hover{ transform: translateY(-1px); background: rgba(28,28,30,.75); border-color: rgba(255,255,255,.18); }

/* Klavye ile erişim: net bir focus halkası */
.help-badge:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.18), 0 0 0 6px rgba(87,154,255,.28);
}

/* 4) Balon (tooltip) — başlangıçta gizli */
.help-pop{
  /* konum: rozete göre sağ üstten aşağı doğru açılacak */
  position: absolute;
  top: calc(100% + 10px);                 /* rozetin 10px altından */
  right: 0;

  /* boyut ve iç boşluk */
  width: min(380px, 60vw);
  padding: 16px 16px 12px;

  /* görsel stil */
  color: #e6e7eb;
  background: rgba(16, 16, 18, .88);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);

  /* ok (küçük üçgen) için alan bırakma */
  transform-origin: top right;

  /* animasyon (blur + opaklık + ufak hareket) */
  opacity: 0;
  filter: blur(8px);
  transform: translateY(-6px) scale(.98);
  transition:
    opacity var(--t) ease,
    filter var(--t) ease,
    transform var(--t) ease;

  /* hover boşluğunda kapanmasın diye başlangıçta tıklanamaz; açılınca aktif edeceğiz */
  pointer-events: none;
}

/* 4.1) Balon başlık ve metin */
.help-pop__title{
  font: 700 14px/1.2 "Inter", system-ui;
  margin-bottom: 6px;
  color: #ffffff;
  letter-spacing: .3px;
}
.help-pop__text{
  font: 500 13px/1.6 "Inter", system-ui;
  color: #cfd1d6;
}

/* 4.2) Balon oku (üstte küçük üçgen) */
.help-pop::before{
  content: "";
  position: absolute;
  top: -8px; right: 10px;                 /* rozetin hizasına yakın */
  width: 12px; height: 12px;
  transform: rotate(45deg);
  background: inherit;                     /* balonun arka planını kullan */
  border-left: 1px solid rgba(255,255,255,.10);
  border-top: 1px solid rgba(255,255,255,.10);
  filter: inherit;                         /* aynı blur etkisi */
}

/* 5) AÇIK DURUM — :hover veya :focus-within’le (rozet veya balon odakta/üzerinde iken) */
.model-help:is(:hover, :focus-within) .help-pop{
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
  pointer-events: auto;                    /* balonun üstüne imleç geçebilsin */
}

/* ------------------------------------------
   MODEL YARDIM ROZETİ KONUM DÜZELTMESİ
   .model-help → .pd-frame’e göre hizalansın
-------------------------------------------*/

/* 1) Model kapsayıcısını referans yap */
.pd-stage .pd-frame{
  position: relative;    /* kritik: absolute çocuklar buraya göre konumlanacak */
  overflow: visible;     /* balon taşarsa kesilmesin (istersen kaldırabilirsin) */
}

/* 2) Rozetin bu kutunun SAĞ-ÜST köşesine oturması için ofsetler */
.pd-stage .pd-frame .model-help{
  --ofx: 16px;           /* sağdan boşluk */
  --ofy: 14px;           /* üstten boşluk */
  z-index: 50;           /* modelin üstünde kalsın */
}


/* ============================
   MODEL YÜKLEME OVERLAY (LOADER)
   - .pd-frame zaten position:relative (bkz. dosya sonu) → bunun üstüne biner.
   - JS, yükleme ilerledikçe çubuğu doldurur; tamamlanınca yumuşakça söner.
============================ */
.mv-loader{
  /* .pd-frame içinde tam ekran kapla */
  position: absolute; inset: 0;
  z-index: 60; /* model-viewer üstünde dursun, yardım rozetinden de yukarıda */
  display: grid; place-items: center;

  /* yarı saydam cam efekti */
  background: rgba(12,14,18,.66);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);

  /* açılışta görünür; kapanışta opaklıkla söndürürüz */
  opacity: 1; transition: opacity .45s ease;
}

/* İç düzen: halka + bar + metin yığını */
.mv-loader__inner{
  width: min(560px, 84vw);
  display: grid; gap: 14px;
  justify-items: center; text-align: center;
  color: #e8e9ec;
}

/* Dönen halka (görsel geri bildirim) */
.mv-loader__ring{
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.18);
  border-top-color: rgba(255,255,255,.88);
  animation: mvspin 1s linear infinite;
}
@keyframes mvspin{ to{ transform: rotate(360deg) } }

/* İlerleme çubuğu zemin */
.mv-loader__bar{
  width: min(420px, 70%);
  height: 6px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  overflow: hidden; isolation: isolate;
}
/* Doldurulan kısım — JS ile width:% güncellenecek */
.mv-loader__bar-fill{
  width: 0%; height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,.85), rgba(255,255,255,.55));
  transition: width .20s ease;
}

/* Metin satırı: % + kısa mesaj */
.mv-loader__label{
  font: 600 13px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  opacity: .9;
}

/* Kapatma (tamamlandığında sön) */
.mv-loader.is-done{
  opacity: 0; pointer-events: none;
}

/* Hata durumunda stili biraz farklılaştır */
.mv-loader.is-error .mv-loader__ring{ display:none; }
.mv-loader.is-error .mv-loader__bar{ display:none; }
.mv-loader.is-error .mv-loader__label{ color: #ffd7d7; }
.mv-loader__retry{
  margin-top: 6px;
  padding: 8px 12px; border: 1px solid rgba(255,255,255,.22);
  background: transparent; color: #fff; cursor: pointer;
}

html { scroll-behavior: auto !important; }