/* c-popup.css — tanıtım penceresi. _popup.js ÜRETİR, elle düzenleme. */
/* z-index 999999: asistan balonu (99940) ve paneli (99950) pencerenin ÜSTÜNDE
   kalıyordu — özellikle telefonda pencerenin sağ alt köşesini örtüyordu. Artık
   pencerenin altında, karartmanın içinde kalıyorlar. */
.cpop-ov{position:fixed;inset:0;z-index:999999;display:flex;align-items:center;
  justify-content:center;padding:20px;background:rgba(8,12,26,.72);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  opacity:0;transition:opacity .26s ease}
.cpop-ov.cpop-ac{opacity:1}
body.cpop-kilit{overflow:hidden}

.cpop{position:relative;width:min(780px,100%);max-height:92vh;overflow:auto;
  display:grid;grid-template-columns:41% 1fr;
  /* Zemin: lacivert taban + sağ üstten sızan sıcak altın ışık. Düz renk yerine
     bu ışık, pencereyi "kutu" olmaktan çıkarıp derinlikli gösteriyor. */
  background:
    radial-gradient(120% 92% at 88% 4%,rgba(224,189,127,.14) 0%,rgba(224,189,127,0) 58%),
    linear-gradient(150deg,#111a33 0%,#0a1020 58%,#151d38 100%);
  color:#f3f1ea;border:1px solid rgba(212,175,110,.3);border-radius:22px;
  box-shadow:0 34px 90px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.04) inset;
  transform:translateY(16px) scale(.975);transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.cpop-ac .cpop{transform:none}
.cpop:focus{outline:none}
.cpop-btn:focus-visible,.cpop-yok:focus-visible,.cpop-x:focus-visible{
  outline:2px solid #e0bd7f;outline-offset:3px}

/* ================= GÖRSEL SÜTUNU =================
   Kural (Tahsin, 8 Eyl 2026): "fotoğrafları sığdır ayrıca kırpma."
   Bu yüzden ön görsel object-fit:CONTAIN ile oturur — tarayıcı hiçbir şey
   kesmez, kare bütün hâlde görünür. Kadraj kararı çalışma anında değil,
   _popup-gorsel.js'te bir kez ve bilerek verilmiştir (hepsi 660x820).

   Görsel MUTLAK konumlanır: uygulama ekranları upuzun dikey kareler; akışta
   bırakılınca pencerenin boyunu kendileri belirleyip ekrana sığmayan, kaydırma
   çubuklu dev bir kutu yapıyorlardı. Böylece boyu METİN sütunu belirler. */
.cpop-gorsel{position:relative;overflow:hidden;border-radius:22px 0 0 22px;
  background:#080d1a;min-height:330px;border-right:1px solid rgba(212,175,110,.26)}

/* Zemin: aynı karenin bulanık, koyulaştırılmış, büyütülmüş kopyası. Contain'den
   artan ince boşluğu doldurur ve görselin rengini panele taşır.
   HAREKET SADECE BURADA: ağır ağır süzülür. Ön görsel oynatılsaydı büyütmek,
   büyütmek de kırpmak gerekirdi. blur() canlandırılmaz (her karede yeniden
   hesaplanır, telefonu kilitler); yalnızca transform oynatılıyor. */
.cpop-zemin{position:absolute;inset:0;background-size:cover;background-position:center;
  filter:blur(26px) saturate(1.35) brightness(.5);
  transform:scale(1.35);will-change:transform;
  animation:cpop-suzul 34s ease-in-out infinite alternate}
@keyframes cpop-suzul{
  from{transform:scale(1.32) translate3d(-2%,-1.5%,0)}
  to{transform:scale(1.5) translate3d(2%,2%,0)}}

/* Kareler üst üste durur, sırayla görünür olur (çapraz geçiş). */
.cpop-kare{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;display:block;opacity:0;
  transition:opacity 1s ease;will-change:opacity}
.cpop-kare.cpop-etkin{opacity:1}

/* Görselin metne bakan kenarı yumuşasın — kolaj gibi değil, tek parça dursun */
.cpop-gorsel::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,rgba(8,13,26,0) 62%,rgba(8,13,26,.55) 100%)}

/* Sağ sütun ferah dursun: kapatma düğmesine çarpmasın diye üstte fazladan pay. */
.cpop-govde{padding:38px 40px 34px;display:flex;flex-direction:column;justify-content:center;gap:13px}

/* Üst etiket, önünde kısa bir altın çizgiyle — dergi künyesi gibi. */
.cpop-ust{display:flex;align-items:center;gap:10px;
  font-size:.685rem;letter-spacing:.19em;text-transform:uppercase;
  color:#dfc086;font-weight:700}
.cpop-ust::before{content:"";width:22px;height:1px;flex:none;
  background:linear-gradient(90deg,rgba(224,189,127,.15),#dfc086)}

/* Başlık serif: merak uyandıran cümle, reklam sloganı gibi değil bir dergi
   spotu gibi okunsun diye. Georgia her Windows/Mac'te var, Türkçe harfleri tam. */
.cpop-baslik{margin:0;font-family:Georgia,'Times New Roman',serif;
  font-size:1.5rem;line-height:1.3;font-weight:600;color:#fdfbf6;letter-spacing:-.008em}
.cpop-metin{margin:0;font-size:.945rem;line-height:1.68;color:#b9c1d4;max-width:38ch}

.cpop-btn{display:inline-block;align-self:flex-start;margin-top:10px;
  padding:14px 30px;border-radius:999px;
  background:linear-gradient(135deg,#eccb92 0%,#d8ad68 48%,#c2954f 100%);
  color:#131b33;font-weight:700;font-size:.95rem;letter-spacing:.01em;
  text-decoration:none;text-align:center;
  box-shadow:0 10px 26px rgba(180,140,74,.34),0 1px 0 rgba(255,255,255,.5) inset;
  transition:transform .18s,box-shadow .18s,filter .18s}
.cpop-btn:hover{transform:translateY(-2px);filter:brightness(1.05);
  box-shadow:0 15px 34px rgba(180,140,74,.46),0 1px 0 rgba(255,255,255,.6) inset}
/* "Şimdi değil" görünür ama sessiz: altı çizili link yerine ince alt vuruş. */
.cpop-yok{align-self:flex-start;background:none;border:0;padding:2px 0;cursor:pointer;
  color:#7e879e;font-size:.83rem;font-family:inherit;
  border-bottom:1px solid rgba(126,135,158,.34);transition:color .16s,border-color .16s}
.cpop-yok:hover{color:#cfd5e4;border-bottom-color:rgba(207,213,228,.6)}

/* --- Kapatma: 5 sn dolan halka, sonra × --- */
.cpop-x{position:absolute;top:16px;right:16px;width:40px;height:40px;z-index:2;
  border:0;padding:0;border-radius:50%;background:rgba(6,10,22,.5);cursor:default;
  display:grid;place-items:center;color:#e8e4d8;transition:background .18s,color .18s}
.cpop-x-hazir{cursor:pointer;background:rgba(255,255,255,.07)}
.cpop-x-hazir:hover{background:#e0bd7f;color:#101830}
.cpop-halka{position:absolute;inset:0;width:40px;height:40px;transform:rotate(-90deg)}
.cpop-halka circle{fill:none;stroke-width:2.5;cx:20;cy:20;r:17}
.cpop-halka-iz{stroke:rgba(255,255,255,.16)}
.cpop-halka-dolu{stroke:#e0bd7f;stroke-linecap:round;
  stroke-dasharray:106.8;stroke-dashoffset:106.8;
  animation:cpop-dol 5s linear forwards}
@keyframes cpop-dol{to{stroke-dashoffset:0}}
.cpop-sn{font-size:.82rem;font-weight:700;color:#e0bd7f}
.cpop-x-im{display:none;font-size:1.5rem;line-height:1}
.cpop-x-hazir .cpop-sn,.cpop-x-hazir .cpop-halka{display:none}
.cpop-x-hazir .cpop-x-im{display:block}

@media (max-width:640px){
  .cpop{grid-template-columns:1fr;max-height:88vh}
  /* Mobilde görsel geniş bir şerit. Kare yine CONTAIN — ortada tam boyuyla
     durur, iki yanını bulanık zemin doldurur; telefon çerçevesi gibi okunur.
     Şerit 190'dan 236'ya çıkarıldı: 0.8 oranındaki kare daha az cüce kalsın. */
  .cpop-gorsel{border-radius:22px 22px 0 0;min-height:0;height:236px;
    border-right:0;border-bottom:1px solid rgba(212,175,110,.26)}
  .cpop-zemin{filter:blur(20px) saturate(1.35) brightness(.5)}
  /* Açık zeminli görsellerin üstünde × kayboluyordu: koyu daire + ince halka. */
  .cpop-x{background:rgba(10,15,30,.62);box-shadow:0 0 0 1px rgba(255,255,255,.22)}
  .cpop-x-hazir{background:rgba(10,15,30,.78)}
  .cpop-gorsel::after{background:linear-gradient(180deg,rgba(8,13,26,0) 62%,rgba(8,13,26,.6) 100%)}
  .cpop-govde{padding:24px 22px 24px}
  .cpop-baslik{font-size:1.24rem}
  .cpop-metin{max-width:none}
  .cpop-btn{align-self:stretch;padding:14px 20px}
}

@media (prefers-reduced-motion:reduce){
  .cpop-ov,.cpop,.cpop-btn,.cpop-kare{transition:none}
  .cpop-halka-dolu{animation:none;stroke-dashoffset:0}
  /* Zemin sabit durur; kare değişimini JS zaten hiç başlatmıyor. */
  .cpop-zemin{animation:none;transform:scale(1.35)}
}