/* ==========================================================================
   VV TABLO — KIDS BY HI MOM  (2026-08-17)
   --------------------------------------------------------------------------
   Eğlenceli sayfası gibi bu sayfa da ortak koleksiyon şablonundan ayrılıyor,
   AMA ONA BENZEMİYOR — bilerek. Eğlenceli koyu mürekkep + neon + bantlı
   çıkartma; Kids gün ışığı + pastel gökyüzü + masal kitabı. İki sayfanın
   aynı numarayı tekrarlaması, ikisini birden ucuzlatırdı.

   TASARIMIN DAYANDIĞI GÖZLEM
   Koleksiyon tek bir ruh hâli değil, GENİŞ BİR YELPAZE: bir uçta bulut
   gezginleri ve gökkuşağı trenleri (Gökler & Yıldızlar), öbür uçta motorlu
   kahramanlar ve yarış pistleri (Kahramanlar & Robotlar). 84 eseri tek
   ızgaraya dökmek, 3 yaşına bakan anneyle 9 yaşına bakan babayı aynı
   yığının içinde bırakıyordu. Bu yüzden sayfanın omurgası BÖLÜM GEZGİNİ:
   beş alt koleksiyon, kapak görseli ve eser sayısıyla en üstte duruyor;
   ebeveyn doğrudan kendi bölümüne atlıyor.

   GEZGİN SABİT VERİ İÇERMEZ — kartlar, catalog-live.js ızgarayı kurduktan
   sonra bölümlerin kendisinden okunur (ad, tagline, ilk eserin görseli,
   eser sayısı). Panelden alt koleksiyon eklenir/çıkarılırsa gezgin
   kendiliğinden güncellenir; elle bakım gerektirmez.

   HAREKET: hepsi prefers-reduced-motion ile kapanır.
   ========================================================================== */

.kids{
  --k-gok:#8FCDEC;
  --k-safak:#FFB98F;
  --k-krem:#FFF7EC;
  --k-mor:#A98BF0;
  --k-yesil:#8AD4A8;
  --k-murekkep:#1D2736;
}

/* ---------- HERO: gökyüzü penceresi ---------- */
.kids-hero{
  position:relative;
  padding:74px 0 0;
  background:linear-gradient(180deg, #FFE9CE 0%, #FFD7C2 26%, #CFE6F7 68%, var(--k-krem) 100%);
  overflow:hidden;
  isolation:isolate;
}
/* Yumuşak bulut katmanı. Görsel değil, saf CSS: hero'nun ilk boyaması
   ağırlaşmasın diye (üstteki üç eser zaten indiriliyor). */
.kids-hero::before{
  content:"";
  position:absolute; inset:auto 0 12% 0; height:62%;
  z-index:0;
  background:
    radial-gradient(46% 60% at 12% 78%, rgba(255,255,255,.92), transparent 62%),
    radial-gradient(38% 52% at 38% 88%, rgba(255,255,255,.80), transparent 62%),
    radial-gradient(44% 58% at 68% 80%, rgba(255,255,255,.88), transparent 62%),
    radial-gradient(34% 46% at 92% 90%, rgba(255,255,255,.76), transparent 62%);
  animation:kids-bulut 34s ease-in-out infinite alternate;
}
@keyframes kids-bulut{
  from{ transform:translate3d(-2%,0,0); }
  to  { transform:translate3d(2.5%,-1.5%,0); }
}

.kids-hero-shell{
  position:relative; z-index:1;
  max-width:1440px; margin:0 auto;
  padding:44px 24px 40px;
  display:grid; gap:34px;
}
@media(min-width:1024px){
  .kids-hero-shell{
    grid-template-columns:minmax(0,0.86fr) minmax(0,1.14fr);
    align-items:center;
    padding:54px 40px 48px;
    gap:26px;
  }
}

.kids-kicker{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 15px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:#6B4B2A;
  font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  backdrop-filter:blur(4px);
}
.kids-kicker::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--k-safak);
}
.kids-baslik{
  margin:18px 0 0;
  color:var(--k-murekkep);
  font-size:clamp(2.6rem, 8.4vw, 5rem);
  line-height:1.02;
  letter-spacing:-.015em;
}
.kids-baslik em{ font-style:italic; color:#C4772F; }

.kids-giris{
  margin:18px 0 0;
  max-width:44ch;
  color:#41505F;
  font-size:15px; line-height:1.75;
}
@media(min-width:768px){ .kids-giris{ font-size:16px; } }

.kids-rozetler{ display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 0; padding:0; list-style:none; }
.kids-rozetler li{
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(29,39,54,.08);
  color:#3B4A5A;
  font-size:12.5px;
}
.kids-rozetler li b{ font-weight:500; color:#1D2736; }

/* --- sağ sütun: üç pencere --- */
.kids-pencereler{
  display:flex; justify-content:center; align-items:center;
  gap:14px;
  padding:6px 0;
}
.kids-pencere{
  position:relative; margin:0;
  flex:0 0 auto; width:31%;
  /* Üstü kemerli "pencere" — çocuk odası penceresi/masal kitabı sayfası. */
  border-radius:140px 140px 18px 18px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 18px 40px rgba(29,39,54,.20), 0 2px 0 rgba(255,255,255,.9) inset;
  border:5px solid #fff;
  animation:kids-suzul 9s ease-in-out var(--k-gecikme,0s) infinite alternate;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.kids-pencere img{ width:100%; height:auto; display:block; }
/* Ortadaki pencere biraz büyük ve önde — kompozisyona derinlik verir. */
.kids-pencere:nth-child(2){ width:36%; z-index:2; }
.kids-pencere:nth-child(1){ transform:translateY(16px) rotate(-2deg); }
.kids-pencere:nth-child(3){ transform:translateY(16px) rotate(2deg); }
.kids-pencere:hover, .kids-pencere:focus-within{
  transform:translateY(-8px) rotate(0deg) scale(1.03);
  box-shadow:0 26px 54px rgba(29,39,54,.28);
  z-index:3;
}
@keyframes kids-suzul{
  from{ transform:translateY(0); }
  to  { transform:translateY(-12px); }
}
/* Süzülme animasyonu 1. ve 3. pencerenin duruş açısını ezmesin diye
   onlara ayrı kare seti veriliyor. */
.kids-pencere:nth-child(1){ animation-name:kids-suzul-sol; }
.kids-pencere:nth-child(3){ animation-name:kids-suzul-sag; }
@keyframes kids-suzul-sol{
  from{ transform:translateY(16px) rotate(-2deg); }
  to  { transform:translateY(4px) rotate(-2.6deg); }
}
@keyframes kids-suzul-sag{
  from{ transform:translateY(16px) rotate(2deg); }
  to  { transform:translateY(4px) rotate(2.6deg); }
}

/* Hero'yu sayfaya bağlayan yumuşak dalga. */
.kids-dalga{ display:block; width:100%; height:auto; margin:-1px 0 0; }
.kids-dalga path{ fill:var(--warm-white); }

/* ---------- BÖLÜM GEZGİNİ ---------- */
.kids-gezgin{ padding:44px 24px 6px; }
@media(min-width:768px){ .kids-gezgin{ padding:54px 40px 6px; } }
.kids-gezgin-bas{ text-align:center; max-width:60ch; margin:0 auto; }
.kids-gezgin-bas h2{ font-size:1.55rem; line-height:1.2; }
@media(min-width:768px){ .kids-gezgin-bas h2{ font-size:2.2rem; } }
.kids-gezgin-bas p{ margin:12px auto 0; color:var(--muted-ink); font-size:14px; line-height:1.7; }

.kids-bolumler{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(212px, 1fr));
  max-width:1200px; margin:26px auto 0;
  padding:0; list-style:none;
}
/* Izgara gözesi <li>, kart ise içindeki <a>. Göze satır yüksekliğine
   uzuyor ama <a> kendi içeriği kadar kalıyordu; tagline'ı kısa olan
   bölümün kartı 20px alçak duruyordu. <li>'yi de flex yapıp kartı
   doldurmaya zorluyoruz. */
.kids-bolumler li{ display:flex; }
.kids-bolum{
  flex:1 1 auto;
  display:flex; flex-direction:column;
  border-radius:18px; overflow:hidden;
  background:#fff;
  border:1px solid rgba(29,39,54,.09);
  color:inherit;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.kids-bolum:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 34px rgba(29,39,54,.14);
  border-color:rgba(29,39,54,.16);
}
.kids-bolum-gorsel{ position:relative; aspect-ratio:4 / 3; overflow:hidden; background:var(--soft-gray); }
.kids-bolum-gorsel img{ width:100%; height:100%; object-fit:cover; object-position:50% 34%; }
.kids-bolum-sayi{
  position:absolute; left:10px; top:10px;
  padding:5px 11px; border-radius:999px;
  background:rgba(255,255,255,.94);
  color:#1D2736;
  font-size:11.5px; font-weight:500;
}
.kids-bolum-govde{ padding:13px 15px 16px; }
.kids-bolum-govde h3{ font-family:'Fraunces',serif; font-weight:300; font-size:17px; line-height:1.25; }
.kids-bolum-govde p{
  margin-top:6px; color:var(--muted-ink); font-size:12.5px; line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
/* Renk şeridi: her bölüm kendi rengiyle anılsın. */
.kids-bolum:nth-child(5n+1){ border-top:3px solid var(--k-safak); }
.kids-bolum:nth-child(5n+2){ border-top:3px solid var(--k-gok); }
.kids-bolum:nth-child(5n+3){ border-top:3px solid var(--k-mor); }
.kids-bolum:nth-child(5n+4){ border-top:3px solid var(--k-yesil); }
.kids-bolum:nth-child(5n+5){ border-top:3px solid #F2C14E; }

/* Gezgin, kartlar kurulana kadar hiç görünmez (boş başlık kalmasın). */
.kids-gezgin[hidden]{ display:none; }

/* ---------- IZGARA ---------- */
/* Bölüm başlıkları ortak şablonda ince bronz çizgiyle geliyor; burada
   biraz daha yumuşak ve sıcak. */
.kids .person-head h2::after{ background:var(--k-safak); width:56px; height:2px; border-radius:2px; }
.kids .artwork-card{ transition:transform .28s var(--ease), box-shadow .28s var(--ease); }
.kids .artwork-card:hover{ transform:translateY(-5px); }

/* ---------- GÜVENCE ŞERİDİ ---------- */
.kids-guvence{
  display:grid; gap:10px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:1440px; margin:0 auto; padding:40px 24px 8px;
  list-style:none;
}
@media(min-width:768px){
  .kids-guvence{ grid-template-columns:repeat(4,minmax(0,1fr)); padding:52px 40px 8px; gap:12px; }
}
/* Üst vurgu çizgisi eksikti: aynı dört güvence vaadi diğer sekiz
   koleksiyonda renkli bir çizgiyle geliyor, yalnız Kids'te düz beyaz kart
   olarak duruyordu — kardeşlerinin yanında sönük kalıyordu. Kalınlık,
   koleksiyonların çoğunda kullanılan 2px (28 Ağu 2026). */
.kids-guvence li{
  padding:16px 18px; border-radius:16px;
  background:#fff; border:1px solid rgba(29,39,54,.08);
  border-top:2px solid var(--k-safak);
}
.kids-guvence h3{ font-size:14px; font-weight:500; }
.kids-guvence p{ margin-top:4px; color:var(--muted-ink); font-size:12.5px; line-height:1.6; }

/* ---------- HAREKETİ AZALT ---------- */
@media (prefers-reduced-motion: reduce){
  .kids-hero::before, .kids-pencere{ animation:none !important; }
  .kids-pencere:hover, .kids-pencere:focus-within,
  .kids-bolum:hover, .kids .artwork-card:hover{ transform:none; }
}