/* ============ Dijital Katalog — ferah zemin + kitap hissi ============ */
.jasmin-katalog-area{
  position:relative; padding:84px 0 100px; overflow:hidden;
  background:linear-gradient(180deg,#eef4e7 0%,#f7faf2 60%,#ffffff 100%);
}
.jasmin-katalog-area::before{
  content:""; position:absolute; top:-12%; left:50%; transform:translateX(-50%);
  width:1000px; height:520px; pointer-events:none;
  background:radial-gradient(circle, rgba(79,159,42,.10) 0%, rgba(79,159,42,0) 68%);
}
.jasmin-katalog-area > .container{ position:relative; z-index:1; }
.kat-intro{ text-align:center; max-width:820px; margin:0 auto 50px; }
.kat-intro .sub{
  display:inline-flex; align-items:center; gap:8px; color:#4F9F2A; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; font-size:13px;
  background:rgba(79,159,42,.08); border:1px solid rgba(79,159,42,.22);
  padding:9px 20px; border-radius:30px; margin-bottom:22px;
}
.kat-intro h2{ font-size:clamp(34px,5vw,52px); color:#16240f; margin:0 0 16px; font-weight:800; letter-spacing:-.6px; line-height:1.08; }
.kat-intro p{ color:#5d6b50; font-size:17.5px; line-height:1.75; margin:0; }
.kat-intro p i{ color:#4F9F2A; }
.kat-empty{ text-align:center; color:#7a8a6c; padding:60px 0; }

/* Tam ekran butonu */
.kat-fs{
  display:inline-flex; align-items:center; gap:8px; margin:20px auto 0;
  background:#fff; border:1px solid #d8e6cb; color:#2f6e1f; font-weight:600; font-size:13.5px;
  padding:10px 20px; border-radius:30px; cursor:pointer; transition:.2s;
}
.kat-fs:hover{ background:#4F9F2A; color:#fff; border-color:#4F9F2A; }

.kat-stage{ display:flex; align-items:center; justify-content:center; gap:24px; }
.kat-flipbook{
  width:100%; max-width:640px; position:relative;
  filter:drop-shadow(0 36px 70px rgba(16,52,22,.28));
}
/* Kitap kalınlığı — sağ kenarda sayfa istifi */
.kat-flipbook::after{
  content:""; position:absolute; top:2.5%; bottom:2.5%; right:-7px; width:8px; z-index:-1;
  background:repeating-linear-gradient(0deg,#efe7d6 0,#efe7d6 1px,#d9cfb8 1px,#d9cfb8 2.5px);
  border-radius:0 4px 4px 0; box-shadow:3px 0 8px rgba(0,0,0,.35);
}
.kat-flipbook .page{ background:#fffdf6; }
/* Kağıt yaprağı: iç kenarda (cilt) gölge + dış kenarda kağıt hattı */
.kat-flipbook .page::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:5;
  box-shadow:inset 13px 0 30px -16px rgba(0,0,0,.55), inset -2px 0 0 rgba(0,0,0,.05);
}

/* Sayfa içerik (kapak görsel + overlay) */
.kat-page{
  position:relative; width:100%; height:100%;
  background:#1c4f1a center/cover no-repeat; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}
.kat-bg-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  /* sinematik renk tonlaması (film hissi) */
  filter:contrast(1.12) saturate(1.22) brightness(1.02);
}
/* SİNEMATİK katman: vignette + film grain + üst/alt letterbox */
.kat-page::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  box-shadow:inset 0 0 110px 26px rgba(0,0,0,.55);
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 9%, rgba(0,0,0,0) 91%, rgba(0,0,0,.55) 100%),
    radial-gradient(rgba(255,255,255,.045) .5px, transparent .5px);
  background-size:auto, 3px 3px;
}
.kat-page::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,0) 24%, rgba(6,28,12,.6) 52%, rgba(6,28,12,.9) 100%);
}
.kat-badges{ position:absolute; top:18px; left:18px; z-index:3; display:flex; flex-wrap:wrap; gap:8px; }
.kat-tag{
  background:rgba(255,255,255,.92); color:#1c4f1a; font-size:13px; font-weight:700;
  padding:6px 13px; border-radius:30px; backdrop-filter:blur(3px); line-height:1;
  box-shadow:0 4px 12px rgba(0,0,0,.2);
}
.kat-tag.t-gece{ background:rgba(31,41,90,.85); color:#cdd6ff; }
.kat-tag.t-gunduz{ background:rgba(255,196,0,.92); color:#5a3d00; }
.kat-tag i{ margin-right:4px; }

.kat-meta{ position:absolute; left:0; right:0; bottom:0; z-index:6; padding:34px 34px 38px; color:#fff; }
.kat-meta h4{ font-size:40px; margin:0 0 12px; color:#fff; line-height:1.12; font-weight:800; text-shadow:0 2px 18px rgba(0,0,0,.6); }
.kat-meta p{ font-size:19px; line-height:1.6; margin:0 0 16px; color:#fff; text-shadow:0 1px 12px rgba(0,0,0,.6); }
.kat-info{ display:flex; flex-wrap:wrap; gap:24px; }
.kat-info span{ font-size:18px; color:rgba(255,255,255,.95); display:inline-flex; align-items:center; gap:8px; }
.kat-tag{ font-size:15px; padding:8px 16px; }
.kat-info i{ color:#9ed46a; }

/* Play butonu */
.kat-play{
  position:absolute; z-index:3; top:50%; left:50%; transform:translate(-50%,-50%);
  width:74px; height:74px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(37,211,102,.92); color:#fff; font-size:26px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.35); transition:transform .2s, background .2s;
}
.kat-play i{ margin-left:4px; }
.kat-play:hover{ transform:translate(-50%,-50%) scale(1.08); background:#25D366; }
.kat-play::before{
  content:""; position:absolute; inset:-10px; border-radius:50%;
  border:2px solid rgba(255,255,255,.5); animation:katPulse 2s infinite;
}
@keyframes katPulse{ 0%{ transform:scale(1); opacity:.8 } 100%{ transform:scale(1.5); opacity:0 } }
.kat-page.playing .kat-play{ display:none; }  /* video oynarken play ikonu gizlensin */

/* Kapaklar — ön kapak gerçek görsel + okunur overlay */
.page-cover{ color:#fff; background-color:#0a2a0a; background-size:cover; background-position:center; position:relative; }
.page-cover::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(155deg, rgba(8,32,12,.86) 0%, rgba(10,42,16,.62) 60%, rgba(12,60,24,.6) 100%);
}
.page-cover-back{ background-image:none !important; }
.page-cover-back::before{ background:linear-gradient(150deg,#1c4f1a,#0a2a0a) !important; }
.page-cover .cover-in{
  position:relative; z-index:1;
  height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:40px 28px; gap:10px;
}
.cover-hint{
  margin-top:20px; display:inline-flex; align-items:center; gap:8px;
  color:#dff0cf; font-size:13px; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25); padding:8px 16px; border-radius:30px;
  animation:katFloat 2.2s ease-in-out infinite;
}
@keyframes katFloat{ 0%,100%{ transform:translateY(0); opacity:.85 } 50%{ transform:translateY(-5px); opacity:1 } }
.page-cover .cover-logo{ max-width:200px; margin-bottom:18px; background:#fff; padding:14px 18px; border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.25); }
.page-cover h3{ color:#fff; font-size:30px; margin:0; line-height:1.3; }
.page-cover span{ color:#cfe6bd; font-size:17px; }
.page-cover small{ color:rgba(255,255,255,.6); font-size:13px; margin-top:6px; }
.page-cover-back{ background:linear-gradient(150deg,#1c4f1a,#0a2a0a)!important; }
.kat-cta{
  margin-top:14px; background:#9ed46a; color:#0a2a0a; font-weight:700;
  padding:12px 22px; border-radius:30px; text-decoration:none; font-size:15px;
}
.kat-cta:hover{ background:#fff; color:#0a2a0a; }

/* Yan oklar */
.kat-nav{
  flex:0 0 auto; width:52px; height:52px; border-radius:50%; cursor:pointer;
  background:#fff; color:#2f6e1f; font-size:18px; border:1px solid #e0ebd4;
  box-shadow:0 10px 26px rgba(16,52,22,.14); transition:.22s;
}
.kat-nav:hover{ background:#4F9F2A; color:#fff; border-color:#4F9F2A; transform:scale(1.08); }
.kat-hint{ text-align:center; color:#7a8a6c; font-size:13.5px; margin-top:24px; }
.kat-hint span{ font-weight:700; color:#4F9F2A; }

/* Video modal */
.kat-video-modal{
  position:fixed; inset:0; z-index:10050; display:none;
  background:rgba(4,12,6,.92); align-items:center; justify-content:center; padding:20px;
}
.kat-video-modal.open{ display:flex; }
.kat-video-modal video{ max-width:min(92vw,520px); max-height:88vh; border-radius:14px; box-shadow:0 30px 80px rgba(0,0,0,.6); background:#000; }
.kat-video-close{
  position:absolute; top:18px; right:20px; width:46px; height:46px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.14); color:#fff; font-size:20px;
}
.kat-video-close:hover{ background:rgba(255,255,255,.28); }

@media (max-width: 991px){
  .kat-intro h2{ font-size:28px; }
  .kat-nav{ display:none; } /* mobilde dokunarak çevrilir */
  .kat-flipbook{ max-width:440px; }
  .kat-meta{ padding:26px 24px 30px; }
  .kat-meta h4{ font-size:25px; }
  .kat-meta p{ font-size:16.5px; }
  .kat-info span{ font-size:14px; }
  .kat-play{ width:64px; height:64px; font-size:22px; }
}

/* Tam ekran modu (sunum) */
.kat-stage:fullscreen, .kat-stage.kat-fs-on{
  background:radial-gradient(ellipse at top,#14401a,#06170a); padding:28px 56px;
}
.kat-stage:-webkit-full-screen{ background:radial-gradient(ellipse at top,#14401a,#06170a); padding:28px 56px; }
.kat-stage:fullscreen .kat-flipbook, .kat-stage.kat-fs-on .kat-flipbook{ max-width:1120px; }
.kat-stage:fullscreen .kat-nav, .kat-stage.kat-fs-on .kat-nav{
  background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.3);
}
@media (max-width:991px){ .kat-fs{ display:none; } } /* mobilde tam ekran gizli (dokunmatik zaten tam) */

/* Mobil performans: ağır video filtresi + grain kaldır (kasma/takılma önle) */
@media (max-width: 991px){
  .kat-bg-video{ filter:none !important; }
  .kat-page::before{ box-shadow:inset 0 0 70px 18px rgba(0,0,0,.4) !important; background:linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 90%, rgba(0,0,0,.4) 100%) !important; }
  .kat-flipbook::after{ display:none; } /* kitap kalınlığı katmanı mobilde gizle */
}

/* ============ Referanslarımız — Çalıştığımız Kurumlar ============ */
.jasmin-referanslar{ position:relative; padding:80px 0 96px; background:linear-gradient(180deg,#ffffff 0%,#f1f7e8 100%); }
.jasmin-referanslar::before{ content:""; position:absolute; top:-8%; left:50%; transform:translateX(-50%); width:900px; height:420px; pointer-events:none; background:radial-gradient(circle, rgba(79,159,42,.09) 0%, rgba(79,159,42,0) 70%); }
.jasmin-referanslar > .container{ position:relative; z-index:1; }
.ref-intro{ text-align:center; max-width:760px; margin:0 auto 46px; }
.ref-intro .sub{ display:inline-flex; align-items:center; gap:8px; color:#4F9F2A; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; background:rgba(79,159,42,.08); border:1px solid rgba(79,159,42,.22); padding:9px 20px; border-radius:30px; margin-bottom:20px; }
.ref-intro h2{ font-size:clamp(30px,4.4vw,46px); color:#16240f; margin:0 0 14px; font-weight:800; letter-spacing:-.5px; line-height:1.1; }
.ref-intro p{ color:#5d6b50; font-size:17px; line-height:1.7; margin:0; }
.ref-intro p b{ color:#4F9F2A; }
.ref-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(186px,1fr)); gap:16px; max-width:1120px; margin:0 auto; }
.ref-card{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:13px; background:#fff; border:1px solid #e6efda; border-radius:18px; padding:26px 16px 22px; overflow:hidden; box-shadow:0 6px 18px rgba(16,52,22,.05); transition:transform .26s ease, box-shadow .26s ease, border-color .26s ease; }
.ref-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#4F9F2A,#9ccc65); transform:scaleX(0); transform-origin:left; transition:transform .26s ease; }
.ref-card:hover{ transform:translateY(-5px); border-color:#c2e1a6; box-shadow:0 18px 36px rgba(79,159,42,.16); }
.ref-card:hover::before{ transform:scaleX(1); }
.ref-mono{ width:60px; height:60px; border-radius:17px; display:grid; place-items:center; background:linear-gradient(135deg,#57a832,#3c8420); color:#fff; font-weight:800; font-size:20px; letter-spacing:.5px; box-shadow:0 10px 20px rgba(79,159,42,.28); transition:transform .26s ease; }
.ref-card:hover .ref-mono{ transform:scale(1.07) rotate(-4deg); }
.ref-name{ font-weight:700; color:#1d2c14; font-size:14.5px; line-height:1.35; }
@media(max-width:560px){
  .jasmin-referanslar{ padding:56px 0 70px; }
  .ref-grid{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:11px; }
  .ref-card{ padding:20px 10px 16px; gap:10px; border-radius:15px; }
  .ref-mono{ width:50px; height:50px; font-size:17px; border-radius:14px; }
  .ref-name{ font-size:12.8px; }
}