/* ============================================================
   HURMİLLET — KAPAK & STÜDYO STİLLERİ (assets/css/cover.css)
   ============================================================
   v196 — magazine.css'teki "v190 — MAGAZİN KAPAĞI" bölümü bu dosyaya
   taşındı (birebir aynı kurallar). NEDEN: admin/kapak.php (Dergi Kapağı
   Stüdyosu) magazine.css'i YÜKLEMİYORDU — .mc-el position:absolute
   tanımsız kaldığı için önizlemede TÜM öğeler arka plan görselinin
   ALTINDA, belge akışında yığılı duruyordu; left/top/% ve sürükleme
   hiçbir görsel etki üretmiyordu (v193-v195 düzeltmelerinin kullanıcıda
   etki etmemesinin KÖK NEDENİ). Bu dosya artık HEM ön yüzde (magazine.php
  _enqueue) HEM stüdyoda (admin/kapak.php) yüklenir — tek kaynak.
   ============================================================ */
/* ============================================================
   v190 — MAGAZİN KAPAĞI (.mag-cover)
   Yalnız ana sayfada (body.mag-home.mc-on), yalnız ≥1100px.
   ≤1099px'te kapak gizli — mevcut üst şerit aynen yaşar.
   Dinamik parçalar (genişlik, padding-left, mc-on geçişleri) hm_cover_css()
   ile inline basılır; burada yalnız STATİK yapı.
   ============================================================ */
.mag-cover{z-index:1001}
.mag-cover::before{display:none} /* klasik panelin kırmızı sol çizgisi kapakta yok */
/* ============================================================
   v193 — KAPAK KATMAN DENETİMİ + SARMALAYICI DÜZELTMESİ
   (1) .mc-cover-in: PHP hm_cover_html() 'mc-cover-in' sınıfını basıyordu,
       CSS ise '.mag-cover-in' tanımlıydı — sarmalayıcı stilsizdi; arka plan
       bulanıklığı (transform:scale) panel dışına taşıyabiliyordu. İki ad da
       tanınır; overflow:hidden taşmayı kırpar (stüdyo JS çizimi de aynı
       sarmalayıcıyı üretir).
   (2) Stüdyoda KATMAN yönetimi: denetçi Katman düğmeleri (kapak.js),
       seçili öğenin örtük altından sürüklenmesi + ok tuşları. CSS tarafı
       yalnız .mc-cover-in kırpma düzeltmesidir — katman sırası değişmedi:
       .mc-bg z:0 < .mc-frame z:5 < .mc-els z:6 (öğeler 1..N).
   ============================================================ */
.mag-cover-in,.mc-cover-in{position:absolute;inset:0;overflow:hidden}
/* --- arka plan katmanları --- */
.mc-bg{position:absolute;inset:0;z-index:0}
.mc-bgimg{position:absolute;inset:0;background-repeat:no-repeat;background-size:cover;will-change:transform}
.mc-bgov,.mc-bgvig{position:absolute;inset:0}
.mc-bgvig{background:linear-gradient(180deg,rgba(0,0,0,0) 52%,rgba(0,0,0,.62) 100%)}
/* --- ince dergi çerçevesi --- */
.mc-frame{position:absolute;z-index:5;pointer-events:none;border-radius:2px}
/* --- öğe katmanı --- */
.mc-els{position:absolute;inset:0;z-index:6}
.mc-el{position:absolute;box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}
.mc-el a{color:inherit;text-decoration:none}
.mc-el a:hover{text-decoration:underline}
.mc-el img{display:block;width:100%;height:auto}
.mc-el p{margin:0}
/* barkod — currentColor öğe renginden gelir (yönetilebilir) */
.mc-bar{display:block;width:100%;height:100%;min-height:18px;background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 4px,currentColor 4px 5px,transparent 5px 9px,currentColor 9px 12px,transparent 12px 14px)}
/* --- stüdyo önizlemesi (admin/kapak.php) --- */
.kp-stage{position:relative!important;top:auto!important;bottom:auto!important;left:auto!important;right:auto!important;display:block!important;height:780px;border-radius:14px;box-shadow:0 18px 60px rgba(0,0,0,.45)}
.kp-stage .mc-el{cursor:grab;touch-action:none}
.kp-stage .mc-el.kp-drag{cursor:grabbing}
/* v194 — seçim çerçevesi DÜZELTİLDİ: JS 'kp-sel' sınıfı basıyor, CSS 'mc-sel'
 * bekliyordu — seçim v190'dan beri asla görünmüyordu. Her iki ad da tanınır. */
.kp-stage .mc-sel,.kp-stage .mc-el.kp-sel{outline:2px dashed #4da3ff;outline-offset:4px}
/* v194 — ARKA PLAN BENZERİ ÖĞE (mc-bglike): kapağı ≥%90 kaplayan görsel/video
 * SEÇİLİ DEĞİLKEN imleç olaylarını YUTMAZ — altındaki logo/başlık doğrudan
 * tıklanıp sürüklenür. Seçilince (kp-sel) etkileşimli olur (listeden seçilir). */
.kp-stage .mc-el.mc-bglike:not(.kp-sel){pointer-events:none}
.kp-stage .kp-empty{opacity:.55;font-style:italic}
.kp-stage .mc-el img{pointer-events:none}
/* ============================================================
   v191 — görsel yükseklik/sığdırma + YouTube öğesi
   .mc-el img zaten width:100%;height:auto (oran korunur). mc-h
   sınıfı (h>0) img'i kutu yüksekliğine zorlar + object-fit
   (--mcf custom property inline stilden gelir: cover/contain/fill).
   ============================================================ */
.mc-t-image{--mcf:cover}
.mc-t-image.mc-h img{height:100%;object-fit:var(--mcf)}
.mc-t-youtube{aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000}
.mc-t-youtube iframe{width:100%;height:100%;display:block;border:0;border-radius:inherit}
/* ============================================================
   v192 — (1) arka plan görseli artık <img.mc-bgsrc> (referrerpolicy=
   no-referrer — hotlink korumalı harici kaynaklar da çıkar);
   (2) HARF KATMANI .mc-ltr (her harf kendi z-index'iyle öğelerin
   arasına girer: F z:70 öne / B z:0 arkaya); (3) stüdyo: kapalı
   öğe sönük, harf imleci, liste sürükleme göstergeleri.
   ============================================================ */
.mc-bgimg{overflow:hidden}
.mc-bgsrc{display:block;width:100%;height:100%;object-fit:cover}
.mc-ltr{position:relative;display:inline-block}
/* kapalı öğe ön yüzde basılmaz; stüdyoda sönük görünür (seçilebilir) */
.kp-stage .mc-el.kp-off{opacity:.3!important;outline:1.5px dashed rgba(255,255,255,.45);outline-offset:3px}
.kp-stage .mc-ltr{cursor:pointer;user-select:none}
.kp-stage .mc-el .mc-ltr{transition:color .12s}
.kp-stage .mc-el.kp-sel .mc-ltr:hover{color:#4da3ff}
/* öğe listesi sürükle-bırak göstergeleri */
.kp-item{transition:border-color .1s,background .1s}
.kp-item.kp-dragging{opacity:.45}
.kp-item.kp-over{border-color:#4da3ff;box-shadow:0 -2px 0 0 #4da3ff inset}
.kp-item.off b{opacity:.45;text-decoration:line-through}
.kp-item .kp-eye{width:26px;height:26px;padding:0;font-size:13px;line-height:1}
.kp-item .kp-grip{cursor:grab;color:#5a6578;font-size:13px;flex:0 0 auto;user-select:none}
/* v194 — KAYAN SEÇİM ÇERÇEVESİ: seçili öğenin üstünde YÜZEN çerçeve —
 * öğe tam kaplayan bir görselin altında kalsa bile seçim daima görünür */
.kp-selbox{position:absolute;z-index:8000;pointer-events:none;outline:2.5px dashed #4da3ff;outline-offset:1px;border-radius:3px}
.kp-selbox i{position:absolute;left:-1px;top:-24px;max-width:100%;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#0b2a4a;background:#4da3ff;border-radius:6px 6px 6px 0;padding:3px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* v194 — uyarı içindeki tek tıklık düzeltme düğmesi */
.kp-warnfix{display:inline-block;font-size:11px;font-weight:800;color:#ffd76a;background:rgba(255,215,106,.14);border:1px solid rgba(255,215,106,.5);border-radius:8px;padding:4px 10px;margin:2px 4px 2px 0;cursor:pointer}
.kp-warnfix:hover{background:rgba(255,215,106,.28);color:#fff}
/* 100 hazır yazı stili kataloğu */
.kp-cats{display:flex;gap:4px;flex-wrap:wrap;margin:8px 0 4px}
.kp-cat{font-size:11px;padding:4px 10px;border-radius:999px;border:1px solid #232a38;background:#171c27;color:#aab3c2;cursor:pointer}
.kp-cat:hover{border-color:#39445a}
.kp-cat.on{border-color:#4da3ff;color:#fff;background:rgba(77,163,255,.12)}
.kp-styles{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px;margin:6px 0 2px;max-height:340px;overflow:auto;padding:2px}
.kp-sty{border:1px solid #232a38;border-radius:10px;background:#171c27;padding:10px 6px 7px;cursor:pointer;text-align:center;overflow:hidden}
.kp-sty:hover{border-color:#4da3ff;background:rgba(77,163,255,.07)}
.kp-sty .pv{display:block;font-size:24px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kp-sty small{display:block;font-size:9px;color:#8a93a3;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ============================================================
   v196 — STÜDYO SAHNE ZEMİNİ: admin/kapak.php'de .mag-panel tabanı
   YOKTUR (magazine.css yüklenmez) — sahneye koyu dergi zemini burada
   verilir. Ayrıca ≤1099px'teki .mag-cover{display:none} kuralı stüdyo
   önizlemesini ASLA gizlememelidir (dar panel penceresi).
   ============================================================ */
.kp-stage{background:linear-gradient(168deg,#12151d 0%,#0e1116 58%);color:#fff}
@media(max-width:1099px){.kp-stage{display:block!important}}

/* ============================================================
   v196 — 30 HAZIR DERGİ KAPAĞI ŞABLONU (Canva tarzı seçki)
   Canlı küçük önizlemeler: dış kutu sabit genişlik, iç tam boy sahnedir
   (transform:scale ile küçültülür). Tüm etkileşim kapalıdır.
   ============================================================ */
.kp-tplcats{display:flex;gap:4px;flex-wrap:wrap;margin:8px 0 6px}
.kp-tpls{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px;margin:6px 0 2px;max-height:560px;overflow:auto;padding:2px}
.kp-tpl{border:1px solid #232a38;border-radius:12px;background:#171c27;padding:7px 7px 8px;cursor:pointer;text-align:left;transition:border-color .12s,transform .12s}
.kp-tpl:hover{border-color:#4da3ff;transform:translateY(-2px)}
.kp-tpl:hover .kp-tplv{border-color:#4da3ff}
.kp-tplv{position:relative;display:block;width:100%;height:212px;border-radius:8px;overflow:hidden;border:1px solid #232a38;background:#0e1116}
.kp-tplv-in{position:absolute;left:0;top:0;transform-origin:top left}
.kp-tplv *{pointer-events:none!important}
.kp-tplv .kp-el{cursor:auto}
.kp-tpl b{display:block;font-size:11.5px;font-weight:700;color:#e8eaed;margin-top:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kp-tpl small{display:block;font-size:9.5px;color:#8a93a3;margin-top:2px;letter-spacing:.04em;text-transform:uppercase}

/* ============================================================
   v196 — GÖRSEL ARKA PLANINI TEMİZLE (Canva "BG Remover" tarzı)
   Tarayıcıda kromale análisis: kenarlardan flood-fill veya renk
   eşleme ile silme; sonuç uploads/kapak/ altına PNG olarak kaydedilir.
   ============================================================ */
.kp-modal{position:fixed;inset:0;z-index:9000;background:rgba(4,7,12,.72);display:flex;align-items:center;justify-content:center;padding:18px}
.kp-modal[hidden]{display:none}
.kp-modal-card{background:#141824;border:1px solid #2a3346;border-radius:16px;max-width:860px;width:100%;max-height:calc(100vh - 40px);overflow:auto;padding:18px 20px;box-shadow:0 24px 80px rgba(0,0,0,.6)}
.kp-modal-card h3{margin:0 0 10px;font-size:15px;color:#fff}
.kp-bgrm-body{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:14px;align-items:start}
.kp-bgrm-cvwrap{background:repeating-conic-gradient(#1c2230 0 25%,#171c27 0 50%) 0 0/18px 18px;border:1px solid #232a38;border-radius:12px;overflow:auto;max-height:60vh;display:flex;align-items:flex-start;justify-content:center}
.kp-bgrm-cvwrap canvas{max-width:100%;display:block}
.kp-bgrm-side .kp-row{margin:6px 0}
.kp-bgrm-side small{display:block;color:#8a93a3;font-size:11px;line-height:1.5;margin:2px 0 8px}
.kp-bgrm-acts{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.kp-bgrm-stat{margin-top:8px;font-size:11.5px;color:#8a93a3}
.kp-bgrm-stat.ok{color:#7ee0a2}
.kp-bgrm-stat.err{color:#ff7b7b}
@media(max-width:760px){.kp-bgrm-body{grid-template-columns:1fr}}

/* v196 — geri al / yinele düğmeleri + öğe listesi bağlantı rozetleri */
.kp-undoredo{display:flex;gap:5px}
.kp-undoredo button{width:30px;height:30px;padding:0;font-size:14px;line-height:1}
.kp-undoredo button:disabled{opacity:.35;cursor:default}
.kp-linktag{font-size:8.5px;font-weight:800;letter-spacing:.04em;border-radius:5px;padding:2px 5px;flex:0 0 auto;background:#12314e;color:#7ec3ff}
.kp-linktag.yt{background:#3a1520;color:#ff8fa3}