/* ==================================================================
   VAKA (BASARI HIKAYESI) SAYFASI - galeri-detay.php
   ------------------------------------------------------------------
   Tailwind build'inden bagimsiz, elle yazilmis; gerekcesi diger
   sayfa CSS'leriyle ayni.

   Sayfanin akisi:
     Baslangictaki durum  ->  Yapilanlar (madde madde)  ->  Sonuc
     ardindan altinda aciklamasi olan gorsel kareleri.

   Her bolum, panelde o alan doldurulmadiysa HIC BASILMAZ; sayfa
   eksik veriyle de dagilmadan calisir.
================================================================== */

.vk-kap{
  max-width:64rem;               /* okuma genisligi: vaka bir anlati */
  margin:0 auto;
  padding:0 1rem;
}
@media (min-width:640px){ .vk-kap{ padding:0 1.5rem; } }
@media (min-width:1024px){ .vk-kap{ padding:0 2rem; } }

/* ==================================================================
   GIRIS
================================================================== */

.vk-ust{
  position:relative;
  background:linear-gradient(135deg,#0f172a 0%,#1e3a5f 55%,#2563eb 100%);
  color:#fff;
  padding:2.75rem 0 3rem;
  overflow:hidden;
}
@media (min-width:1024px){ .vk-ust{ padding:3.5rem 0 4rem; } }

.vk-ust::before{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:22px 22px;
  mask-image:linear-gradient(to bottom,#000,transparent 82%);
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 82%);
  pointer-events:none;
}
.vk-ust > *{ position:relative; }

.vk-iz{ font-size:.78rem; }
.vk-iz ol{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.35rem .45rem; margin:0; padding:0; list-style:none;
}
.vk-iz a{ color:rgba(255,255,255,.65); text-decoration:none; transition:color .2s ease; }
.vk-iz a:hover{ color:#fff; text-decoration:underline; }
.vk-iz li[aria-current]{ color:rgba(255,255,255,.92); font-weight:600; }
.vk-iz-ayrac{ color:rgba(255,255,255,.35); }

.vk-rozet{
  display:inline-flex; align-items:center; gap:.45rem;
  margin-top:1rem;
  padding:.32rem .78rem; border-radius:999px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  font-size:.7rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
}
.vk-rozet i{ color:#93c5fd; font-size:.66rem; }

.vk-baslik{
  margin:.85rem 0 0;
  font-size:clamp(1.55rem,3.6vw,2.35rem);
  line-height:1.18; font-weight:800; letter-spacing:-.02em;
  text-wrap:balance;
}
.vk-musteri{
  margin:.6rem 0 0;
  font-size:.95rem; font-weight:600; color:rgba(255,255,255,.76);
}

.vk-ust-baglanti{
  display:flex; flex-wrap:wrap; gap:.6rem;
  margin-top:1.5rem; padding-top:1.25rem;
  border-top:1px solid rgba(255,255,255,.16);
}
.vk-ust-btn{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .95rem; border-radius:.6rem;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22);
  color:#fff; font-size:.8rem; font-weight:600; text-decoration:none;
  transition:background .2s ease;
}
.vk-ust-btn:hover{ background:rgba(255,255,255,.2); }
.vk-ust-btn i{ font-size:.7rem; }

/* ==================================================================
   GOVDE
================================================================== */

.vk-govde{ background:#fff; padding:2.75rem 0 3.5rem; }
@media (min-width:1024px){ .vk-govde{ padding:3.5rem 0 4.5rem; } }

.vk-bolum{ margin-bottom:2.75rem; }
.vk-bolum:last-child{ margin-bottom:0; }

.vk-bolum-baslik{
  display:flex; align-items:center; gap:.6rem;
  margin:0 0 1rem;
  font-size:clamp(1.15rem,2.4vw,1.5rem);
  line-height:1.3; font-weight:800; letter-spacing:-.01em; color:#0f172a;
}
.vk-bolum-baslik .vk-ikon{
  display:flex; align-items:center; justify-content:center;
  width:2rem; height:2rem; border-radius:.55rem;
  background:#eff6ff; color:#2563eb; font-size:.8rem; flex:0 0 auto;
}

.vk-metin{
  margin:0;
  font-size:1rem; line-height:1.78; color:#475569;
}

/* --- Baslangictaki durum: sorunu ayirt eden kutu --- */
.vk-sorun{
  padding:1.15rem 1.25rem;
  border-radius:.9rem;
  background:#fff7ed;
  border:1px solid #fed7aa;
}
.vk-sorun .vk-metin{ color:#7c2d12; }

/* --- Yapilanlar: numarali dikey akis --- */
.vk-adimlar{ list-style:none; margin:0; padding:0; position:relative; }
.vk-adim{
  position:relative;
  padding:0 0 1.4rem 3rem;
}
.vk-adim:last-child{ padding-bottom:0; }

/* adimlari birbirine baglayan dikey cizgi */
.vk-adim::before{
  content:"";
  position:absolute;
  left:1.06rem; top:2.1rem; bottom:0;
  width:2px;
  background:linear-gradient(#dbeafe,#eff6ff);
}
.vk-adim:last-child::before{ display:none; }

.vk-adim-no{
  position:absolute; left:0; top:0;
  width:2.2rem; height:2.2rem; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:#2563eb; color:#fff;
  font-size:.82rem; font-weight:800;
  box-shadow:0 4px 12px -4px rgba(37,99,235,.6);
}
.vk-adim-baslik{
  margin:.25rem 0 0;
  font-size:1.02rem; font-weight:700; color:#0f172a; line-height:1.35;
}
.vk-adim-metin{
  margin:.4rem 0 0;
  font-size:.925rem; line-height:1.72; color:#64748b;
}

/* --- Sonuc: hikayenin kapanisi --- */
.vk-sonuc{
  padding:1.25rem 1.35rem;
  border-radius:.9rem;
  background:#f0fdf4;
  border:1px solid #bbf7d0;
}
.vk-sonuc .vk-metin{ color:#166534; font-weight:500; }

/* ==================================================================
   GORSEL KARELERI  (eski hali / yeni hali)
================================================================== */

.vk-kareler{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
}
/* Iki kare varsa yan yana: "once / sonra" karsilastirmasi boyle okunur */
@media (min-width:768px){
  .vk-kareler.vk-kareler-2{ grid-template-columns:1fr 1fr; }
  .vk-kareler.vk-kareler-cok{ grid-template-columns:1fr 1fr; }
}

.vk-kare{
  margin:0;
  border:1px solid #e5e7eb;
  border-radius:.9rem;
  overflow:hidden;
  background:#fff;
}
.vk-kare img{
  display:block;
  width:100%;
  height:auto;
  background:#f1f5f9;
}
.vk-kare figcaption{ padding:.95rem 1.1rem 1.1rem; }

.vk-kare-baslik{
  display:inline-block;
  margin:0 0 .4rem;
  padding:.22rem .6rem;
  border-radius:999px;
  background:#eff6ff;
  color:#1d4ed8;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.vk-kare-metin{
  margin:0;
  font-size:.9rem; line-height:1.7; color:#64748b;
}

/* ==================================================================
   KAPANIS
================================================================== */

.vk-cta{
  margin-top:3rem;
  padding:1.75rem 1.5rem;
  border-radius:1.15rem;
  background:linear-gradient(135deg,#0f172a,#2563eb);
  color:#fff;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
}
.vk-cta-baslik{ margin:0; font-size:1.15rem; font-weight:800; }
.vk-cta-alt{ margin:.4rem 0 0; font-size:.9rem; line-height:1.6; color:rgba(255,255,255,.74); }
.vk-cta-btnler{ display:flex; flex-wrap:wrap; gap:.6rem; }

.vk-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.75rem 1.25rem; border-radius:.7rem;
  font-size:.85rem; font-weight:700; text-decoration:none;
  border:1px solid transparent; white-space:nowrap;
  transition:transform .2s ease,background .2s ease;
}
.vk-btn:hover{ transform:translateY(-2px); }
.vk-btn-birincil{ background:#fff; color:#0f172a; }
.vk-btn-ikincil{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3); color:#fff; }
.vk-btn-ikincil:hover{ background:rgba(255,255,255,.22); }

.vk-geri{
  display:inline-flex; align-items:center; gap:.4rem;
  margin-top:1.75rem;
  font-size:.85rem; font-weight:600; color:#475569; text-decoration:none;
}
.vk-geri:hover{ color:#1d4ed8; }

@media (max-width:639px){
  .vk-cta{ flex-direction:column; align-items:flex-start; }
  .vk-cta-btnler{ width:100%; }
  .vk-btn{ flex:1 1 auto; }
}

@media (prefers-reduced-motion:reduce){
  .vk-btn:hover{ transform:none; }
}