/* Kirpi Kids anasayfa bölümleri ve ortak kart stilleri (tokens.css değişkenleri).
   Bölüm sınıfları Elementor kapsayıcılarında "CSS sınıfları" alanından verilir: kk-hero, kk-section, kk-intro, kk-band. */

/* ── Hero ─────────────────────────────────────────────── */
.kk-hero{
  position:relative;isolation:isolate;
  background:linear-gradient(180deg,#CDEBFB 0%,var(--kk-secondary) 55%,#BFE4F8 100%);
}
.kk-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("../img/hero-sahne.svg") center bottom/cover no-repeat;
}
.kk-hero h1{text-wrap:balance;letter-spacing:-.01em}
.kk-hero .kk-hero__lead{font-size:var(--e-global-typography-kk_lead-font-size,20px);color:var(--kk-text)}
.kk-hero .kk-hero__art img{filter:drop-shadow(0 18px 24px rgba(16,74,145,.18))}

/* Aşama 23 — hero tipografisi referansın ağırlığına yaklaştırıldı (Elementor öğe stilleri daha özgül: !important).
   Başlık 1440'ta ~72 px (önce 56), 768'de ~50 px, 375'te ~38 px; alt metin iki dengeli satır; buton bir boy büyük. */
.kk-hero h1.elementor-heading-title{font-size:clamp(36px,calc(1.6rem + 3.2vw),72px)!important;line-height:1.06!important;padding-right:.62em} /* sağ boşluk: parıltı kutunun içinde kalır */
.kk-hero h1.elementor-heading-title::after{ /* referanstaki sarı parıltı çizgileri; net genişliği 0 (satır kırılımını değiştirmez) */
  content:"";display:inline-block;width:.5em;height:.5em;margin:0 -.62em 0 .12em;position:relative;top:-.5em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg stroke='%23FFC444' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M8 16l12-9'/%3E%3Cpath d='M8 22h15'/%3E%3Cpath d='M8 28l12 9'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat
}
.kk-hero .kk-hero__lead,.kk-hero .kk-hero__lead p{font-size:clamp(17px,calc(.95rem + .45vw),22px)!important;line-height:1.5!important;max-width:17em;text-wrap:balance}
.kk-hero .elementor-widget-button .elementor-button{font-size:17px;padding:16px 30px}
/* Maskot boşlukta durmasın: altında tepelerle aynı yeşilde yumuşak bir tümsek (vektör, CSS). */
.kk-hero .kk-hero__art{position:relative}
.kk-hero .kk-hero__art::after{
  content:"";position:absolute;z-index:-1;left:4%;right:4%;bottom:-9%;height:24%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 100%,rgba(191,230,184,.95) 0 58%,rgba(191,230,184,0) 72%)
}

/* ── Bölüm başlıkları ─────────────────────────────────── */
/* Aşama 23: noktalar yerine referanstaki sarı parıltı çizgileri (iki yanda simetrik). */
.kk-section-title h2{position:relative;display:inline-flex;align-items:center;justify-content:center;max-width:100%}
.kk-section-title h2::before,.kk-section-title h2::after{
  content:"";display:block;flex:none;width:22px;height:22px;margin:0 12px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg stroke='%23FFC444' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M8 16l12-9'/%3E%3Cpath d='M8 22h15'/%3E%3Cpath d='M8 28l12 9'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}
.kk-section-title h2::before{transform:scaleX(-1)}
@media (max-width:480px){.kk-section-title h2::before,.kk-section-title h2::after{width:16px;height:16px;margin:0 8px}}
.kk-subtitle{color:var(--kk-blue)}

/* ── Butonlar ─────────────────────────────────────────── */
.kk-btn-outline .elementor-button{
  background:transparent!important;color:var(--kk-primary)!important;
  border:2px solid var(--kk-primary)!important;box-shadow:none!important
}
.kk-btn-outline .elementor-button:hover{background:var(--kk-sky-light)!important}
/* Aşama 23: ok simgesi beyaz kalıp açık zeminde görünmüyordu; simge yazı rengini izler. */
.kk-btn-outline .elementor-button .elementor-button-icon svg{fill:currentColor!important}
.elementor-widget-button .elementor-button{box-shadow:0 4px 0 var(--kk-yellow-dark);transition:transform .15s var(--kk-ease)}
.elementor-widget-button .elementor-button:hover{transform:translateY(-1px)}

/* ── Kitap kartları (WooCommerce döngüsü: anasayfa + mağaza) ── */
.woocommerce ul.products{display:grid;grid-template-columns:repeat(var(--kk-cols,4),minmax(0,1fr));gap:var(--kk-space-lg)}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none}
.woocommerce ul.products.columns-3{--kk-cols:3}
.woocommerce ul.products li.product{
  width:auto!important;margin:0!important;float:none!important;padding:var(--kk-space-sm);
  background:var(--kk-white);border-radius:var(--kk-radius-lg);box-shadow:var(--kk-shadow-card);
  display:flex;flex-direction:column;gap:var(--kk-space-xs);transition:box-shadow .2s,transform .2s
}
.woocommerce ul.products li.product:hover{box-shadow:var(--kk-shadow-raised);transform:translateY(-2px)}
/* Kapaklar kırpılmaz: 3:4 alana orijinal oranıyla sığdırılır (dikey, kare veya yatay kapak). */
.woocommerce ul.products li.product a img{border-radius:var(--kk-radius-md);aspect-ratio:3/4;object-fit:contain;background:var(--kk-cream);margin:0 0 var(--kk-space-xs)}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font:700 18px/1.3 var(--kk-font-heading);color:var(--kk-primary);padding:0}
.woocommerce ul.products li.product .price{font:800 20px/1.2 var(--kk-font-heading);color:var(--kk-primary)!important}
.woocommerce ul.products li.product .button{
  margin-top:auto;width:100%;text-align:center;border-radius:var(--kk-radius-pill);
  background:var(--kk-accent);color:var(--kk-primary);font:800 15px/1.2 var(--kk-font-body);padding:12px 16px
}
.woocommerce ul.products li.product .button:hover{background:var(--kk-yellow-dark);color:var(--kk-primary)}
.kk-card-badges{display:flex;flex-wrap:wrap;gap:6px;align-self:flex-start} /* Aşama 23: yaş (mavi) + kategori (pembe) hap rozetleri */
.kk-card-badges .kk-badge{padding:3px 10px;font-size:12.5px}
@media (max-width:1024px){.woocommerce ul.products{--kk-cols:4;gap:var(--kk-space-md)}}
@media (max-width:767px){.woocommerce ul.products{--kk-cols:2;gap:var(--kk-space-sm)}}

/* ── Blog kartları ────────────────────────────────────── */
.kk-posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--kk-space-lg)}
.kk-post{padding:0;overflow:hidden;display:flex;flex-direction:column}
.kk-post__img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.kk-post__body{padding:var(--kk-space-md);display:flex;flex-direction:column;gap:var(--kk-space-xs);flex:1}
.kk-post__date{font-size:13px;color:var(--kk-blue)}
.kk-post__title{font-size:20px;line-height:1.3;margin:0}
.kk-post__title a{text-decoration:none;color:var(--kk-primary)}
.kk-post__excerpt{margin:0;font-size:15px}
.kk-post__more{margin-top:auto;font-weight:800;color:var(--kk-primary)}
@media (max-width:1024px){.kk-posts{gap:var(--kk-space-md)}}
@media (max-width:767px){.kk-posts{grid-template-columns:1fr}}

/* ── Boş durum ────────────────────────────────────────── */
.kk-empty{
  display:flex;align-items:center;gap:var(--kk-space-lg);max-width:640px;margin:0 auto;
  padding:var(--kk-space-lg);border:2px dashed var(--kk-line);border-radius:var(--kk-radius-lg);background:var(--kk-white)
}
.kk-empty__img{width:120px;height:auto;flex:none}
.kk-empty__title{margin:0 0 4px;font:800 22px/1.25 var(--kk-font-heading);color:var(--kk-primary)}
.kk-empty__text{margin:0;color:var(--kk-text)}
@media (max-width:480px){.kk-empty{flex-direction:column;text-align:center}}

/* ── Tanıtım ve bant ──────────────────────────────────── */
.kk-intro{background:var(--kk-sky-light)}
/* Aşama 23 — "Kirpi Kids'i Tanıyın": metin beyaz bir kartta toplanır, bölüm marka bulut/yıldızlarıyla doldurulur.
   İçerik (metin, buton) değişmez; referanstaki doğrulanmamış özellik maddeleri bilinçli olarak eklenmez.
   Yalnızca anasayfa (.home): aynı .kk-intro sınıfı Hakkımızda ve İletişim bölümlerinde de kullanılıyor. */
.home .kk-intro{
  position:relative;isolation:isolate;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'%3E%3Cpath d='M40 70c8-14 30-15 37-1 15-3 26 8 23 20H25c-4-10 4-20 15-19Z' fill='%23FFFFFF'/%3E%3Cpath d='M150 30l3 7 8 1-6 5 2 8-7-4-7 4 2-8-6-5 8-1Z' fill='%23FFC444'/%3E%3C/svg%3E") right 4% top 24px/220px auto no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'%3E%3Cpath d='M30 40l3 7 8 1-6 5 2 8-7-4-7 4 2-8-6-5 8-1Z' fill='%23FFC444' opacity='.8'/%3E%3Cpath d='M110 80c8-14 30-15 37-1 15-3 26 8 23 20H95c-4-10 4-20 15-19Z' fill='%23FFFFFF' opacity='.8'/%3E%3C/svg%3E") left 2% bottom 16px/200px auto no-repeat,
    var(--kk-sky-light)
}
.home .kk-intro .e-con-inner > .e-con:has(.elementor-widget-heading){
  background:var(--kk-white);border-radius:var(--kk-radius-lg);box-shadow:var(--kk-shadow-card);padding:36px 40px!important
}
@media (max-width:767px){
  .home .kk-intro{background-size:150px auto,130px auto,auto}
  .home .kk-intro .e-con-inner > .e-con:has(.elementor-widget-heading){padding:24px!important}
}
.kk-band{background:var(--kk-primary);color:var(--kk-cream)}
.kk-band h2,.kk-band p{color:var(--kk-cream)!important}

@media (prefers-reduced-motion:reduce){
  .woocommerce ul.products li.product,.elementor-widget-button .elementor-button{transition:none}
  .woocommerce ul.products li.product:hover,.elementor-widget-button .elementor-button:hover{transform:none}
}

/* ── Footer (HFE şablonu, .kk-footer): açık zemin, lacivert yazı ── */
.kk-footer{border-top:1px solid var(--kk-line)}
.kk-footer p{color:var(--kk-text)!important}
.kk-footer__note p{font-size:15px}
.kk-footer__copy{border-top:1px solid var(--kk-line);padding-top:16px}
/* Aşama 23: telefonda dört sütun alt alta ~650 px tutuyordu. Marka satırı tam genişlik; Hızlı Erişim ve Kurumsal yan yana;
   uzun bağlantı adları olan Yasal tam genişlik. Elementor verisi değişmez. */
@media (max-width:767px){
  .kk-footer > .e-con-inner > .e-con:first-child{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px!important}
  .kk-footer > .e-con-inner > .e-con:first-child > .e-con{width:auto!important;min-width:0}
  .kk-footer > .e-con-inner > .e-con:first-child > .e-con:first-child,
  .kk-footer > .e-con-inner > .e-con:first-child > .e-con:last-child{grid-column:1/-1}
}

/* Buton yazıları: genel bağlantı alt çizgisi butonlara uygulanmaz. */
.elementor-button,.elementor-button:hover,.elementor-button:focus{text-decoration:none!important}

/* Mobil hero: arka plan "cover" ile ortadan kırpıldığında dekor yıldızları başlığın üstüne düşüyordu.
   Mobilde aynı dekorun yıldızsız kopyası kullanılır (bulutlar ve tepeler aynı). */
@media (max-width:767px){
  .kk-hero::before{
    background-image:url("../img/hero-sahne-mobil.svg");
    /* Son inceleme (D-10b): dar ekranda başlık hero'nun üst kısmını kaplıyor; sahnenin oradaki süs bulutu "Macera!" sözcüğünün
       arkasına düşüyordu. Yalnızca dekor katmanının üst bölümü yumuşakça soldurulur; tepeler ve alt bulutlar korunur. */
    -webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 38%,#000 58%);mask-image:linear-gradient(180deg,transparent 0,transparent 38%,#000 58%)
  }
}