/* Kirpi Kids — Pofu anasayfası (Aşama 24): hero kaydırıcısı, "Kitaplarımız" vitrini, Hakkımızda bandı,
   Pedagog/Yazar kartları ve lacivert footer. Yalnızca tokens.css değişkenleri ve marka renkleri
   (#A9DDF9, #FFFCF5, #104A91, #FFC444; pembe #FAD3DC). Bölüm sınıfları Elementor kapsayıcılarından gelir
   (tools/setup/09-pofu-anasayfa.php): kk-pofu-hero, kk-pofu-kitaplar, kk-pofu-hakkimizda, kk-pofu-kartlar. */

:root,body{--kk-night:#16357A;--kk-night-2:#2C3F9E;--kk-pink-soft:#FDEEF2;--kk-sky-soft:#EAF4FD}

/* ── Hero kaydırıcısı ─────────────────────────────────────── */
.kk-pofu-hero{padding:0!important}
.kk-pofu-hero > .e-con-inner,.kk-pofu-hero .elementor-widget-shortcode,.kk-pofu-hero .elementor-shortcode{max-width:none!important;width:100%;padding:0!important}
.kk-slider{position:relative;isolation:isolate;overflow:hidden}
/* Alt kenarda krem dalga: bir sonraki bölüme yumuşak geçiş (referans). */
.kk-slider::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:56px;z-index:3;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 56' preserveAspectRatio='none'%3E%3Cpath d='M0 30c120-22 260-26 400-8s290 34 440 14 310-38 460-20c60 7 100 14 140 20v20H0Z' fill='%23FFFCF5'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat
}
.kk-slider__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.kk-slider__track::-webkit-scrollbar{display:none}
.kk-slide{position:relative;flex:0 0 100%;scroll-snap-align:start;min-height:500px;display:flex}
.kk-slide--gunduz{background:linear-gradient(160deg,#CDE7FB 0%,#E8F3FE 55%,#F6F2FF 100%)}
.kk-slide--gece{background:linear-gradient(160deg,var(--kk-night) 0%,var(--kk-night-2) 100%);color:var(--kk-cream)}
.kk-slide__inner{position:static;display:flex;align-items:center;width:100%;max-width:calc(var(--kk-container) + 32px);margin:0 auto;padding:48px 16px 88px;box-sizing:border-box}
.kk-slide__text{position:relative;z-index:2;max-width:min(46%,540px);display:grid;gap:18px;justify-items:start}
.kk-slide__title{margin:0;font:800 clamp(36px,calc(1.2rem + 2.6vw),60px)/1.06 var(--kk-font-heading);color:var(--kk-primary);letter-spacing:-.01em;text-wrap:balance}
.kk-slide__lead{margin:0;font:600 clamp(17px,calc(.95rem + .4vw),22px)/1.45 var(--kk-font-body);color:var(--kk-text);max-width:20em}
.kk-slide--gece .kk-slide__title{color:var(--kk-white)}
.kk-slide--gece .kk-slide__lead{color:var(--kk-cream)}
.kk-slide__cta,.kk-slide__cta:hover,.kk-slide__cta:focus{text-decoration:none!important}
.kk-slide__cta{
  display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 28px;margin-top:6px;border-radius:var(--kk-radius-pill);
  background:var(--kk-accent);color:var(--kk-primary);font:800 17px/1 var(--kk-font-body);text-decoration:none;
  box-shadow:0 4px 0 var(--kk-yellow-dark);transition:transform .15s var(--kk-ease)
}
.kk-slide__cta:hover{transform:translateY(-1px);color:var(--kk-primary)}
.kk-slide__cta:focus-visible,.kk-slider button:focus-visible,.kk-shop--vitrin a:focus-visible{outline:3px solid var(--kk-primary);outline-offset:3px}
.kk-slide--gece .kk-slide__cta:focus-visible{outline-color:var(--kk-accent)}
.kk-icon{width:1.15em;height:1.15em;fill:currentColor;flex:none}
/* Görsel sağda, kenara taşar; sol kenarı zemine yumuşakça karışır (örnek görseller düşük çözünürlüklü: kırpma ortada). */
.kk-slide__art{position:absolute;z-index:1;top:0;right:0;bottom:0;left:40%;overflow:hidden}
.kk-slide .kk-slide__img{width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;object-position:center 42%;display:block;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%);mask-image:linear-gradient(90deg,transparent 0,#000 24%)}
/* Örnek sahneler dikey kırpıldı: Pofu alt kısımda; kale ile birlikte görünsün diye odak aşağıda. */
.kk-slide--gunduz .kk-slide__img{object-position:center 74%}
.kk-slide--gece .kk-slide__img{object-position:center 62%}
.kk-slide__art--maskot{display:flex;align-items:center;justify-content:center}
.kk-slide__art--maskot img{width:min(360px,70%);height:auto}
/* Gezinme */
.kk-slider__nav{
  position:absolute;z-index:4;top:calc(50% - 44px);display:none;place-items:center;width:48px!important;height:48px!important;min-width:0!important;min-height:0!important;padding:0!important;margin:0;cursor:pointer;
  border:0!important;border-radius:50%!important;background:rgba(255,255,255,.85)!important;color:var(--kk-primary)!important;box-shadow:var(--kk-shadow-card)!important
}
.kk-slider.is-ready .kk-slider__nav{display:grid}
.kk-slider__nav--prev{left:16px}
.kk-slider__nav--prev .kk-icon{transform:scaleX(-1)}
.kk-slider__nav--next{right:16px}
.kk-slider__nav:hover{background:var(--kk-white)!important}
.kk-slider__bar{position:absolute;z-index:4;left:0;right:0;bottom:62px;display:none;justify-content:center;align-items:center;gap:14px}
.kk-slider.is-ready .kk-slider__bar{display:flex}
.kk-slider__dots{display:flex;gap:8px}
.kk-slider__dot{flex:none;width:12px!important;height:12px!important;min-width:0!important;min-height:0!important;line-height:0!important;padding:0!important;margin:0;border:2px solid var(--kk-white)!important;border-radius:var(--kk-radius-pill)!important;background:rgba(16,74,145,.35)!important;cursor:pointer;transition:width .2s var(--kk-ease);box-shadow:none!important}
.kk-slider__dot[aria-current="true"]{width:30px!important;background:var(--kk-accent)!important}
.kk-slider__play{display:inline-grid;place-items:center;width:32px!important;height:32px!important;min-width:0!important;min-height:0!important;line-height:0!important;padding:0!important;margin:0;border:0!important;border-radius:50%!important;background:rgba(255,255,255,.85)!important;cursor:pointer;box-shadow:none!important}
.kk-slider__play span{display:block;width:10px;height:12px;border-left:3px solid var(--kk-primary);border-right:3px solid var(--kk-primary);box-sizing:border-box}
.kk-slider__play.is-paused span{width:0;height:0;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent var(--kk-primary);margin-left:3px}
@media (max-width:1024px){
  .kk-slide{min-height:440px}
  .kk-slide__text{max-width:52%}
  .kk-slide__art{left:44%}
}
@media (max-width:767px){
  .kk-slide{min-height:0;flex-direction:column}
  .kk-slide__inner{flex-direction:column;align-items:stretch;padding:0 0 92px}
  .kk-slide__art{position:relative;order:-1;left:auto;height:300px;margin:0}
  .kk-slide .kk-slide__img{-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 72%,transparent 100%)}
  .kk-slide__text{max-width:none;padding:8px 20px 0;gap:14px}
  .kk-slider__nav{display:none!important}
  .kk-slider__bar{bottom:50px}
  .kk-slider::after{height:36px}
}
@media (prefers-reduced-motion:reduce){.kk-slider__track{scroll-behavior:auto}.kk-slide__cta,.kk-slider__dot{transition:none}}

/* ── "Kitaplarımız" vitrini ───────────────────────────────
   Aşama 25: Kitaplarımız sayfasındaki filtresiz kartlarla aynı (magaza.css → .kk-shop--filtresiz). Ürün yoksa bölüm gizli. */
.kk-pofu-kitaplar:not(:has(.kk-shop--vitrin)){display:none!important}
.kk-shop--vitrin{margin:var(--kk-space-lg) auto 0}

/* ── Hakkımızda bandı ─────────────────────────────────────── */
.kk-pofu-hakkimizda{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(180deg,var(--kk-sky-soft) 0%,#F4F1FF 100%)
}
.kk-pofu-hakkimizda .kk-pofu-maskot img{filter:drop-shadow(0 18px 24px rgba(16,74,145,.16));border-radius:40% 40% 32px 32px}
.kk-pofu-hakkimizda .kk-pofu-kale{opacity:.9}
.kk-pofu-hakkimizda .kk-pofu-kale img{-webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent 100%);mask-image:radial-gradient(closest-side,#000 70%,transparent 100%)}
.kk-pofu-hakkimizda .kk-pofu-maskot img{-webkit-mask-image:radial-gradient(closest-side,#000 78%,transparent 100%);mask-image:radial-gradient(closest-side,#000 78%,transparent 100%)}
.kk-pofu-hakkimizda .elementor-heading-title{display:flex;align-items:center;gap:10px}
.kk-pofu-baslik-yildiz .elementor-heading-title::before{
  content:"";flex:none;width:26px;height:26px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 2.9 6.2 6.8.7-5.1 4.6 1.5 6.7L12 16.8 5.9 20.2l1.5-6.7L2.3 8.9l6.8-.7Z' fill='%23FFC444'/%3E%3C/svg%3E") center/contain no-repeat
}
.kk-pofu-alt-baslik p{font-weight:700;color:var(--kk-primary)!important}
@media (max-width:1024px){.kk-pofu-hakkimizda .kk-pofu-kale{display:none}}

/* ── Pedagog ve Yazar kartları ────────────────────────────── */
.kk-pofu-kart{position:relative;isolation:isolate;overflow:hidden;border-radius:28px}
.kk-pofu-kart--pedagog{background:linear-gradient(135deg,var(--kk-pink-soft) 0%,#FFF7F9 100%)}
.kk-pofu-kart--yazar{background:linear-gradient(135deg,var(--kk-sky-soft) 0%,#F6F2FF 100%)}
.kk-pofu-kart::after{ /* çizgi illüstrasyon (sağ alt, dekor) */
  content:"";position:absolute;z-index:-1;right:22px;bottom:16px;width:132px;height:104px;pointer-events:none;opacity:.9;
  background:center/contain no-repeat
}
.kk-pofu-kart--pedagog::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 104' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M70 86C46 70 34 56 34 42c0-10 8-18 17-18 8 0 14 5 19 12 5-7 11-12 19-12 9 0 17 8 17 18 0 14-12 28-36 44Z' stroke='%23F06C93' stroke-width='3'/%3E%3Cpath d='M6 92c18 4 30-2 40-12' stroke='%23F06C93' stroke-width='2.5'/%3E%3Cpath d='m108 10 2 5 5 1-4 3 1 5-4-3-5 3 1-5-4-3 5-1Z' fill='%23F06C93' stroke='none'/%3E%3Cpath d='m120 34 1.5 3 3 .5-2.2 2 .5 3-2.8-1.5-2.8 1.5.5-3-2.2-2 3-.5Z' fill='%23FFC444' stroke='none'/%3E%3C/svg%3E")}
.kk-pofu-kart--yazar::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 104' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M112 8C84 14 60 34 46 64l-6 18 14-12c26-12 46-34 58-62Z' stroke='%23104A91' stroke-width='3'/%3E%3Cpath d='M46 64c16-14 32-30 48-46M58 52l16 2M68 40l16 2' stroke='%23104A91' stroke-width='2.2'/%3E%3Cpath d='M40 82c-10 8-22 12-34 12' stroke='%23104A91' stroke-width='2.5'/%3E%3Cpath d='m20 22 2 5 5 1-4 3 1 5-4-3-5 3 1-5-4-3 5-1Z' fill='%23FFC444' stroke='none'/%3E%3C/svg%3E")}
.kk-pofu-kart .elementor-icon-wrapper .elementor-icon{font-size:30px;color:var(--kk-primary)}
.kk-pofu-kart--pedagog .elementor-icon-wrapper .elementor-icon{color:#E0507E}
.kk-pofu-kart--pedagog .elementor-icon-wrapper .elementor-icon svg{fill:#E0507E}
.kk-pofu-kart--yazar .elementor-icon-wrapper .elementor-icon svg{fill:var(--kk-primary)}
.kk-pofu-kart .kk-pofu-alt-baslik p{margin:0}
/* Tablet: kartlar yan yana dar; masaüstündeki 170 px sağ pay metni sıkıştırıyordu. İllüstrasyon alta, pay küçülür. */
@media (min-width:768px) and (max-width:1024px){.kk-pofu-kart{padding:28px 28px 112px!important}.kk-pofu-kart::after{width:112px;height:88px}}
.kk-pofu-kart .elementor-button{white-space:nowrap}
@media (max-width:767px){.kk-pofu-kart::after{width:96px;height:76px;opacity:.55}}

/* ── Lacivert footer (referans) ───────────────────────────── */
.kk-footer{background:var(--kk-primary)!important;border-top:0!important;position:relative;color:var(--kk-cream)}
.kk-footer::before{ /* üst kenarda dalga: krem sayfadan laciverte geçiş */
  content:"";position:absolute;left:0;right:0;top:-1px;height:36px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 36' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v14c-150 18-300 20-460 6S650 2 480 14 160 30 0 16Z' fill='%23FFFCF5'/%3E%3C/svg%3E") center top/100% 100% no-repeat
}
.kk-footer p,.kk-footer .elementor-heading-title{color:var(--kk-cream)!important}
.kk-footer .elementor-heading-title{color:var(--kk-white)!important}
.kk-footer a,.kk-footer .elementor-icon-list-text{color:#DCEBFA!important}
.kk-footer a:hover{color:var(--kk-accent)!important}
.kk-footer a:focus-visible{outline:3px solid var(--kk-accent);outline-offset:2px}
.kk-footer .elementor-icon-list-icon svg{fill:var(--kk-accent)!important}
.kk-footer__copy,.kk-footer__alt{border-top-color:rgba(255,255,255,.18)!important}
.kk-footer__alt .kk-footer__copy{border-top:0!important;padding-top:0!important}
.kk-footer__guven .elementor-icon-list-text{font-weight:700}