/* ============================================================================
   Otohepsi Panel — ortak tasarım sistemi (AYDINLIK tema)
   Beyaz/açık zemin, monokrom; ANA BUTON rengi #212121. Üst şerit (topbar) koyu
   kalır (beyaz logo). app/site, app ve sihirbaz paneli bu dosyayı <head>'de
   link'ler. Butonlar/anahtarlar/segmentler tek kaynaktan.
   ============================================================================ */

:root{
    --bg:#f6f6f7;          /* sayfa zemini */
    --surface:#ffffff;     /* panel yüzeyi / kart */
    --card:#ffffff;        /* kart */
    --surface-2:#f1f1f2;   /* yükseltilmiş yüzey / hover / track-off alanları */
    --sel:#212121;         /* segmented seçili (monokrom koyu) */
    --line:#e5e5e5;        /* ince kenarlık */
    --ink:#1a1a1a;         /* birincil metin */
    --muted:#6b7280;       /* ikincil metin */
    --accent:#212121;      /* ANA buton + aktif durum */
    --accent-h:#000000;    /* hover */
    --accent-ink:#ffffff;  /* aksan üstü metin */
    --danger:#dc2626;      /* uyarı / sil */
    --danger-h:#b91c1c;
    --ok:#047857;          /* başarı */
    --radius:14px;
    --radius-sm:10px;
    --shadow:0 1px 2px rgba(0,0,0,.05);
    --glow:0 0 0 3px rgba(33,33,33,.14);  /* focus halkası (monokrom) */
}

/* --- Butonlar ------------------------------------------------------------- */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    background:var(--accent);color:var(--accent-ink);font-weight:500;
    padding:.7rem 1.25rem;border:1px solid transparent;border-radius:10px;cursor:pointer;
    font-size:.95rem;line-height:1;font-family:inherit;
    transition:background .14s,box-shadow .14s,transform .08s,border-color .14s,color .14s;
    -webkit-tap-highlight-color:transparent;
}
.btn:hover{background:var(--accent-h);transform:translateY(-1px);}
.btn:active{transform:scale(.98);}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;}

/* İkincil — beyaz yüzey */
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--line);}
.btn.ghost:hover{background:var(--bg);}

/* Yıkıcı — kırmızı */
.btn.danger{background:var(--danger);color:#fff;border-color:transparent;}
.btn.danger:hover{background:var(--danger-h);}

/* Tam genişlik (form altı birincil aksiyon — üstteki input'tan ayrık dursun) */
.btn.block{display:flex;width:100%;margin-top:1rem;}

/* Yükleme durumu — spinner (tüm panellerde ortak) */
.btn.loading{color:transparent !important;position:relative;pointer-events:none;}
.btn.loading::after{content:"";position:absolute;top:50%;left:50%;width:16px;height:16px;
    margin:-8px 0 0 -8px;border:2px solid rgba(255,255,255,.55);border-top-color:#fff;
    border-radius:50%;animation:teslaSpin .7s linear infinite;}
@keyframes teslaSpin{to{transform:rotate(360deg);}}

/* --- Form elemanları ------------------------------------------------------ */
input,textarea,select{
    width:100%;padding:.72rem .8rem;background:#fff;color:var(--ink);
    border:1px solid var(--line);border-radius:var(--radius-sm);font-size:.96rem;
    font-family:inherit;transition:border-color .15s,box-shadow .15s;
}
input::placeholder,textarea::placeholder{color:#9aa1ab;}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--ink);box-shadow:var(--glow);}
textarea{min-height:100px;resize:vertical;}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--accent);}
input[type=color]{padding:.2rem;height:44px;cursor:pointer;}

/* Native select — özel ok */
select{
    appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:2.3rem;cursor:pointer;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat:no-repeat;background-position:right .8rem center;
}

label{display:block;font-weight:600;font-size:.86rem;margin:.9rem 0 .35rem;color:#374151;}

/* --- Toggle switch -------------------------------------------------------- */
.switch{position:relative;width:52px;height:30px;flex:none;cursor:pointer;display:inline-block;}
.switch input{opacity:0;width:0;height:0;position:absolute;}
.switch .track{position:absolute;inset:0;background:#d4d4d8;border-radius:999px;transition:background .2s;}
.switch .track::before{content:"";position:absolute;width:24px;height:24px;left:3px;top:3px;
    background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.3);}
.switch input:checked + .track{background:var(--accent);}
.switch input:checked + .track::before{transform:translateX(22px);}
.switch input:focus-visible + .track{box-shadow:var(--glow);}

/* Etiketli switch satırı */
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;
    padding:.9rem 0;border-top:1px solid var(--line);}
.switch-row .sw-label{display:flex;flex-direction:column;}
.switch-row .sw-label strong{font-size:.95rem;color:var(--ink);}
.switch-row .sw-label small{color:var(--muted);font-size:.8rem;margin-top:.1rem;}

/* --- Segmented control (seçili = koyu, monokrom) -------------------------- */
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);
    border-radius:12px;padding:3px;gap:2px;}
.seg .seg-item{appearance:none;border:0;background:transparent;color:var(--muted);
    font:inherit;font-weight:600;font-size:.9rem;padding:.55rem 1.1rem;border-radius:9px;
    cursor:pointer;transition:background .15s,color .15s;white-space:nowrap;}
.seg .seg-item:hover{color:var(--ink);}
.seg .seg-item.active{background:var(--accent);color:#fff;}
.seg.block{display:flex;}
.seg.block .seg-item{flex:1;text-align:center;}

/* --- Seçilebilir chip ----------------------------------------------------- */
.chk{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--line);
    border-radius:999px;padding:.5rem .9rem;cursor:pointer;background:#fff;
    color:var(--ink);font-size:.9rem;transition:border-color .15s,background .15s;}
.chk:hover{border-color:#d0d0d2;}
.chk input{accent-color:var(--accent);}
.chk:has(input:checked){border-color:var(--accent);background:#fafafa;}
.chk.dim{opacity:.5;}

/* --- Kartlar / yüzeyler --------------------------------------------------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
    padding:1.75rem;box-shadow:var(--shadow);color:var(--ink);}
h1{margin:0 0 1.25rem;font-size:1.5rem;letter-spacing:-.02em;color:var(--ink);}
h2,h3{color:var(--ink);}

/* Bilgi kutuları */
.ok{background:#ecfdf5;border:1px solid #a7f3d0;color:#047857;
    padding:.7rem 1rem;border-radius:var(--radius-sm);margin-bottom:1rem;font-size:.92rem;}
.err,.errors{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;
    padding:.7rem 1rem;border-radius:var(--radius-sm);margin-bottom:1rem;font-size:.92rem;}

/* ajax-form.js toast'ları — ÜSTTEN açılan (top-center), ikon + mesaj. PREMIUM KOYU: siyah zemin,
   beyaz/gri metin. DİKKAT: koyu stil YALNIZ toast'a (.toast-stack .toast) uygulanır; taban
   .ok/.err/.info (inline flash kutuları, ~30 sayfa) DEĞİŞMEZ — açık renk kalır. */
.toast-stack{position:fixed;bottom:1.1rem;left:50%;transform:translateX(-50%);z-index:9999;
    display:flex;flex-direction:column;align-items:center;gap:.5rem;max-width:min(92vw,440px);}
.toast-stack .toast{display:flex;align-items:flex-start;gap:.55rem;margin-bottom:0;
    animation:toast-in .22s ease;line-height:1.45;font-weight:500;
    background:#1a1a1a;color:#fff;border:1px solid rgba(255,255,255,.10);border-radius:12px;
    padding:.8rem .95rem;box-shadow:0 14px 36px -10px rgba(0,0,0,.55);}
.toast-stack .toast .toast-msg{color:#f3f4f6;}
/* Durum ikonu renk aksanı (koyu zeminde canlı). */
.toast-stack .toast.ok .toast-ic{color:#34d399;}
.toast-stack .toast.err .toast-ic{color:#f87171;}
.toast-stack .toast.info .toast-ic{color:#93c5fd;}
.toast-ic{flex:none;display:inline-flex;margin-top:.02rem;}
.toast-msg{flex:1;min-width:0;}
/* ALTTAN açılır: aşağıdan yukarı kayarak gelir (toast-in), aşağı kayıp solarak gider (toast-out). */
@keyframes toast-in{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
@keyframes toast-out{from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(12px);}}
.toast-stack .toast.toast-hide{animation:toast-out .2s ease forwards;}

/* Tablolar */
table{width:100%;border-collapse:collapse;}
th,td{text-align:left;padding:.8rem;border-bottom:1px solid var(--line);font-size:.92rem;color:var(--ink);}
th{color:var(--muted);font-weight:600;}

.muted{color:var(--muted);}
a{color:var(--ink);}

/* --- Ayar satırı (Tesla): başlık + açıklama solda, kontrol/aksiyon sağda, ayraçlı --- */
.srow{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0;border-top:1px solid var(--line);}
.srow:first-of-type{border-top:0;}
.srow-main{display:flex;flex-direction:column;gap:.15rem;min-width:0;}
.srow-label{font-weight:600;font-size:.95rem;color:var(--ink);display:inline-flex;align-items:center;gap:.4rem;}
.srow-desc{color:var(--muted);font-size:.82rem;line-height:1.45;}
.srow-action{flex:none;}

/* --- ⓘ bilgi ipucu (hover tooltip) --- */
.info-i{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;
    border:1px solid var(--line);color:var(--muted);font-size:.66rem;font-weight:700;font-style:normal;
    cursor:help;position:relative;flex:none;line-height:1;}
.info-i::after{content:"i";}
.info-i:hover{color:var(--ink);border-color:var(--muted);}
.info-i[data-tip]:hover::before{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 9px);
    transform:translateX(-50%);background:#1a1a1a;color:#fff;font-size:.78rem;font-weight:500;line-height:1.45;
    white-space:normal;width:220px;padding:.55rem .7rem;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.3);z-index:40;}
.info-i[data-tip]{}  /* ipucu metni data-tip attribute'unda */

/* --- Küçük satır-içi aksiyon butonu (liste/tablo satırlarında Düzenle/Sil/Yayınla vb.) ---
   Önceden pages/services/service_regions/slides/reviews/menus/page_edit içinde ayrı ayrı
   tanımlıydı (madde 41) — tek kaynak burada, dosyalarda sadece class referansı kalır. */
.mini-btn{display:inline-flex;align-items:center;gap:.3rem;padding:.4rem .7rem;border-radius:8px;font-size:.84rem;
    font-weight:600;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);cursor:pointer;}
.mini-btn:hover{background:var(--bg);}
.mini-btn.ok{color:#047857;border-color:#a7f3d0;background:#ecfdf5;}
.mini-btn.danger{color:#b91c1c;border-color:#fecaca;background:#fef2f2;}
.mini-btn.danger:hover{background:#fee2e2;}
.mini-btn[disabled]{opacity:.4;cursor:not-allowed;}
.mini-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* --- Liste tablosu (WP "Yazılar" tarzı) — pages/services/service_regions ortak sözleşme --- */
.svc-table{width:100%;border-collapse:collapse;margin-top:1rem;}
.svc-table th{text-align:left;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
    font-weight:700;padding:.6rem .7rem;border-bottom:1px solid var(--line);}
.svc-table td{padding:.8rem .7rem;border-bottom:1px solid var(--line);font-size:.93rem;vertical-align:middle;}
.svc-table tr:hover td{background:var(--surface-2);}

/* --- Yatay kaydırma sarmalayıcı (madde 45): dar ekranda tablo taşmasın --- */
.table-scroll{overflow-x:auto;}

/* --- Boş liste kutusu (madde 42): services/reviews/gallery/slides ortak kapsayıcı --- */
.panel-empty{color:var(--muted);padding:2rem;text-align:center;border:1px dashed var(--line);border-radius:12px;margin-top:1rem;}

/* --- Nötr bilgi kutusu (madde 46): ne başarı ne hata, sadece bilgilendirme --- */
.info{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;
    padding:.7rem 1rem;border-radius:var(--radius-sm);margin-bottom:1rem;font-size:.92rem;}

/* ============================================================================
   İçerik Ayarları / Editor ortak bileşenleri (SectionSchema + _section_form)
   .tc-* = theme content; .drawer = editor alt/yan paneli; .sticky-save = uzun
   formlarda altta yapışkan Kaydet. Mobil-öncelikli: 16px input (iOS zoom yok),
   44px dokunma hedefi.
   ========================================================================== */
.tc-block{border:1px solid var(--line);border-radius:14px;margin-bottom:.9rem;overflow:hidden;background:var(--surface);}
.tc-sum{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:1rem 1.1rem;cursor:pointer;font-weight:700;color:var(--ink);list-style:none;}
.tc-sum::-webkit-details-marker{display:none;}
.tc-compact .tc-sum{cursor:default;padding-bottom:.4rem;}
.tc-name{font-size:1rem;}
.tc-chev{color:var(--muted);transition:transform .2s;}
.tc-block[open] .tc-chev{transform:rotate(180deg);}
.tc-form{padding:0 1.1rem 1.1rem;border-top:1px solid var(--line);}
/* Compact (drawer) modu — Canva paneli hissi: kutu-içinde-kutu YOK (drawer zaten çerçeve),
   bölüm adı tekrarlanmaz, sekmeler en üstte yapışkan, alanlar ferah. */
.tc-compact{border:0;border-radius:0;background:transparent;margin:0;overflow:visible;}
.tc-compact .tc-form{border-top:0;padding:0 0 .4rem;}
/* Drawer sekme barı — beyaz sticky bar (altındaki içeriği scroll'da örter) + içinde gri segmented
   track; sekmelerin ALTINA belirgin boşluk (içerik yapışmasın). Canva paneli hissi. */
.tc-compact .tc-tabs-bar{position:sticky;top:0;z-index:6;background:var(--surface);padding:.35rem 0 1.25rem;margin:0;}
.tc-compact .tc-tabs{margin:0;}
.tc-compact .tc-field{margin:1rem 0;}
.tc-field{margin:.9rem 0;}
.tc-lbl{display:block;margin:0 0 .35rem;font-size:.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;}
/* Masaüstünde rafine, kompakt tipografi (daha estetik, drawer'da ferah); ≤860px'te global
   kural 16px'e yükseltir (iOS zoom koruması). */
.tc-form input[type=text],.tc-form input[type=number],.tc-form textarea,.tc-form select{width:100%;padding:.46rem .62rem;font-size:.82rem;line-height:1.45;border:1px solid var(--line);border-radius:9px;}
.tc-form textarea{resize:vertical;min-height:0;}
.tc-chk{display:inline-flex;align-items:center;gap:.5rem;font-size:.95rem;}
/* Alan altı gri yardım metni (etiketin ne işe yaradığını açıklar) */
.tc-hint{display:block;margin:.35rem 0 0;font-size:.76rem;color:var(--muted);line-height:1.4;}
/* Boolean alanlar toggle (.tc-onoff) olarak basılır → grid'de tam genişlik satır */
.tc-fields-grid .tc-onoff{grid-column:1/-1;margin:0;}
.tc-img{display:flex;flex-direction:column;gap:.5rem;}
.tc-img-prev{width:100%;max-width:220px;aspect-ratio:16/10;object-fit:cover;border-radius:10px;border:1px solid var(--line);cursor:zoom-in;}
.tc-img-lb{position:fixed;inset:0;z-index:2000;background:rgba(10,10,10,.9);display:flex;align-items:center;justify-content:center;padding:2rem;opacity:0;visibility:hidden;transition:opacity .2s ease;}
.tc-img-lb.show{opacity:1;visibility:visible;}
.tc-img-lb img{max-width:92vw;max-height:88vh;border-radius:10px;}
.tc-img-lb-close{position:absolute;top:1.2rem;right:1.4rem;width:40px;height:40px;border-radius:999px;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;}
.tc-img-lb-close:hover{background:var(--accent,#f97316);}
.tc-file{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.55rem .9rem;border:1px dashed var(--line);border-radius:9px;font-weight:600;font-size:.84rem;color:var(--muted);cursor:pointer;background:var(--surface);}
.tc-file:hover{color:var(--ink);border-color:var(--ink);}
.tc-file svg{flex:none;}
/* Görsel içinde ✕ overlay (büyük çarpı, görselin köşesinde) — onay modalıyla kaldırır. */
.tc-img-prev-wrap{position:relative;display:inline-block;line-height:0;}
.tc-img-x{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;border:0;
    background:rgba(10,10,10,.6);color:#fff;font-size:1.05rem;line-height:1;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;transition:background .15s;}
.tc-img-x:hover{background:#dc2626;}
.tc-file input[type=file]{display:none;}
.tc-rm{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--muted);}
.rep-row{display:flex;gap:.4rem;align-items:flex-start;margin-bottom:.5rem;}
.rep-row input,.rep-row textarea{flex:1;}
/* Sil (✕): küçük, sessiz yuvarlak ikon-buton — hover'da kırmızılaşır. Kocaman kutu değil. */
.rep-del,.repobj-del{flex:none;width:28px;height:28px;min-height:28px;padding:0;border:0;border-radius:999px;
    background:transparent;color:var(--muted);font-size:.85rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.rep-del:hover,.repobj-del:hover{background:#fef2f2;color:var(--danger);}
/* Ekle butonları: kompakt, ikonlu his ("+" işareti), kesikli çerçeve — ikincil aksiyon dili. */
.rep-add,.repobj-add{font-size:.8rem;padding:.4rem .7rem;min-height:30px;border-style:dashed;color:var(--muted);font-weight:600;}
.rep-add:hover,.repobj-add:hover{color:var(--ink);border-color:var(--ink);background:var(--surface);}
/* Tekrarlı KARTLAR (SSS, istatistik vb.): dikey düzen — her alan kendi satırında etiketli,
   uzun alanlar textarea; başlıkta sıra no + sil. Yan yana dar kutular UX sorunuydu. */
.rep-obj-row{display:flex;flex-direction:column;gap:.55rem;border:1px solid var(--line);border-radius:12px;padding:.9rem;margin-bottom:.7rem;background:var(--surface);}
.rep-obj-head{display:flex;align-items:center;justify-content:flex-start;gap:.5rem;cursor:pointer;user-select:none;}
.rep-obj-summary{flex:1;min-width:0;font-size:.85rem;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rep-obj-caret{flex:none;color:var(--muted);transition:transform .15s ease;}
.rep-obj-row.is-open .rep-obj-caret{transform:rotate(180deg);}
/* Accordion: kart alanları yalnız AÇIKKEN görünür; kapalıyken kompakt başlık (sürükle-sırala kolay). */
.rep-obj-row:not(.is-open) .rep-obj-field{display:none;}
.rep-obj-row:not(.is-open){gap:0;padding:.6rem .9rem;}
/* Kısa alanlar (sayı/seçim/onay) yer varsa yan yana — ör. "Geçiş Efekti" + "Geçiş Süresi" tek satır.
   Dar panelde (mobil/dar drawer) tek sütuna düşer. Uzun/görsel/metin alanları tam genişlik. */
.tc-fields-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;}
/* Grid'in kendi `gap`'i TEK boşluk kaynağıdır — alanların `.tc-compact .tc-field{margin:1rem}`
   payı grid gap'in ÜstÜne binip alanlar arası boşluğu ~2.9rem'e şişiriyordu (grid gap + üst
   margin + alt margin). Grid içinde margin'i sıfırla; boşluk yalnız gap'ten gelsin (regresyon
   düzeltmesi — "input araları çok açıldı"). */
.tc-fields-grid > .tc-field{grid-column:1 / -1;margin:0;}
.tc-fields-grid > .tc-field--half{grid-column:span 1;}
@media(max-width:360px){ .tc-fields-grid{grid-template-columns:1fr;} .tc-fields-grid > .tc-field--half{grid-column:1 / -1;} }
.rep-obj-no{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:.78rem;font-weight:700;}
/* Sürükle tutamacı (kart sıralama) — yalnız bu tutamaçtan sürüklenir (metin seçimi bozulmaz). */
.drag-handle{display:inline-flex;align-items:center;color:var(--muted);cursor:grab;touch-action:none;flex:none;}
.drag-handle:active{cursor:grabbing;}
.drag-handle:hover{color:var(--ink);}
.rep-obj-row[draggable="true"]{opacity:.6;}
.rep-obj-field{display:flex;flex-direction:column;gap:.25rem;}
.rep-obj-lbl{font-size:.76rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;}

/* Akıllı bağlantı (CTA link) combobox: "Sayfa ara…" + açılır öneri listesi (sayfa/WhatsApp/Telefon).
   Monokrom; medya picker popover'ıyla uyumlu. Gizli input token taşır, görünür input etiket. */
.tc-link{position:relative;}
.tc-link-input{width:100%;}
.tc-link-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:30;max-height:260px;overflow-y:auto;
    background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:.35rem;
    box-shadow:0 14px 40px -12px rgba(0,0,0,.28);}
.tc-link-opt{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;border:0;background:none;cursor:pointer;
    padding:.5rem .55rem;border-radius:9px;color:var(--ink);}
.tc-link-opt:hover,.tc-link-opt:focus,.tc-link-opt.is-active{background:var(--surface-2);}
.tc-link-opt.is-active .tc-link-opt-ic{color:var(--ink);}
.tc-link-opt-ic{flex:none;display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;
    border-radius:7px;background:var(--surface-2);color:var(--muted);}
.tc-link-opt:hover .tc-link-opt-ic{color:var(--ink);}
.tc-link-opt-main{display:flex;flex-direction:column;min-width:0;line-height:1.25;}
.tc-link-opt-lbl{font-size:.9rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tc-link-opt-hint{font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* "Ayarlar" accordion'u: bölüm-seviyesi ayarlar (efekt/süre/boyut) — varsayılan kapalı, başlığa tıkla aç. */
.tc-settings-acc{margin-top:1rem;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden;}
.tc-acc-head{display:flex;align-items:center;gap:.55rem;width:100%;border:0;background:none;cursor:pointer;user-select:none;
    padding:.8rem .9rem;color:var(--ink);font-weight:600;font-size:.9rem;}
.tc-acc-head:hover{background:var(--surface-2);}
.tc-acc-title{flex:1;text-align:left;}
.tc-acc-head svg{flex:none;color:var(--muted);}
.tc-acc-caret{transition:transform .15s ease;}
.tc-acc-head[aria-expanded="true"] .tc-acc-caret{transform:rotate(180deg);}
.tc-acc-body{padding:.2rem .9rem 1rem;}
/* Stil sekmesi — tema/seçim renk önizleme karesi (gradient dahil gerçek görünüm). Landing
   page'deki .vxe-sw ile aynı desen: native <input type=color> görünmez şekilde TAM ÜSTÜNE
   bindirilir (tıklamayı yakalar, native picker açar) — ikinci, çirkin gri kutu kalmaz. */
.tc-color-prev{position:relative;display:inline-block;width:44px;height:36px;border-radius:8px;
    border:1px solid var(--line);background:repeating-conic-gradient(var(--surface-2) 0% 25%, var(--surface) 0% 50%) 50%/12px 12px;
    flex:none;overflow:hidden;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;}
.tc-color-prev:hover{transform:translateY(-1px);box-shadow:0 6px 16px -8px rgba(0,0,0,.4);}
.tc-savewrap{margin-top:1rem;}
.tc-save{min-height:44px;}
@media(max-width:719px){.tc-savewrap .tc-save{width:100%;}}

/* Uzun formlarda altta yapışkan Kaydet şeridi (drawer formları). AKILLI: varsayılan gizli
   (alta kaymış + saydam); formda değişiklik olunca .show ile efektle yukarı gelir, değişiklik
   geri alınınca aynı efektle kaybolur (assets/panel/section-form.js dirty takibi). */
.sticky-save{position:sticky;bottom:0;background:var(--surface);padding:.8rem 0 calc(20px + env(safe-area-inset-bottom));margin-top:1rem;border-top:1px solid var(--line);z-index:5;
    box-shadow:0 -10px 18px -12px rgba(0,0,0,.18);
    transform:translateY(120%);opacity:0;pointer-events:none;transition:transform .28s cubic-bezier(.33,1,.5,1),opacity .22s ease;}
.sticky-save.show{transform:translateY(0);opacity:1;pointer-events:auto;}
.sticky-save .btn{width:100%;min-height:46px;font-size:1rem;}

/* ============================================================================
   EDİTÖR PANEL SÖZLEŞMESİ — TEK MANTIK (DRY), üç panel de aynı:
     Bölümler     → .tc-ed__side  / .tc-side-head / .tc-side-body
     Bölüm Ekle   → .tc-add-box   / .tc-add-head  / .tc-add-grid
     Bölüm Düzenle→ .drawer-box   / .drawer-head  / .drawer-body
   Kural: kap DEFINITE yükseklikli flex-kolon (mobilde tam ekran, ilgili @media'larda);
   BAŞLIK flex:none (kaydırma alanının dışında sabit); GÖVDE flex:1 + min-height:0 +
   overflow-y:auto (tek güvenilir kaydırma kabı). INDEFINITE yükseklik (max-height+auto)
   ya da başlığın flex:none olmaması kaydırmayı bozuyordu — o yüzden sözleşme burada,
   tek kaynakta. Panel-özel stiller (animasyon, zemin, yerleşim) kendi kurallarında kalır. */
.drawer-head,.tc-add-head,.tc-add-note,.tc-side-head{flex:none;}
/* drawer-body ve tc-add-grid HER genişlikte kaydırma kabı (panel/modal hep flex-kolon).
   .tc-side-body'yi BURAYA KOYMA: masaüstünde (≥1024) "Bölümler" asıl kaydırmayı aside'da
   (.tc-ed__side{overflow-y:auto}) yapar; body'ye de overflow verilince hover satırının
   translateX(2px)'i sağdan kırpılıyor + iç içe scroll bozuluyordu. tc-side-body sözleşmesi
   editor.php'de yalnız ≤1023 (mobil overlay) kapsamında. */
.drawer-body,.tc-add-grid{flex:1;min-height:0;overflow-y:auto;
    -webkit-overflow-scrolling:touch;overscroll-behavior:contain;}

/* Drawer: <600px alt-sayfa (bottom sheet), >=600px editor'da sağ panel/merkez modal. */
.drawer{position:fixed;inset:0;z-index:80;display:none;}
.drawer.open,.drawer.closing{display:block;}
/* Arka plan KİLİDİ (iOS dahil): body sabitlenir — scroll konumu JS'te saklanıp geri yüklenir
   (overflow:hidden iOS Safari'de yetmez; position:fixed tekniği kesin çözümdür). */
body.tc-drawer-open{position:fixed;left:0;right:0;width:100%;overflow:hidden;}
.drawer-bg{position:absolute;inset:0;background:rgba(10,10,10,.45);animation:drawer-fade .28s ease both;}
.drawer.closing .drawer-bg{animation:drawer-fade-out .24s ease both;}
@keyframes drawer-fade{from{opacity:0;}to{opacity:1;}}
@keyframes drawer-fade-out{from{opacity:1;}to{opacity:0;}}
/* MOBİL: TAM EKRAN (inset:0, köşe yuvarlaması YOK) — alttan %100 kayarak AÇILIR, aşağı kayarak
   KAPANIR. Kullanıcı kararı: bölüm panelleri telefonda tam ekran app gibi açılsın. */
.drawer-box{position:absolute;background:var(--surface);display:flex;flex-direction:column;box-shadow:0 -18px 44px -20px rgba(0,0,0,.35);
    inset:0;border-radius:0;padding-top:env(safe-area-inset-top);
    animation:drawer-up .34s cubic-bezier(.22,.9,.3,1) both;}
.drawer.closing .drawer-box{animation:drawer-down .26s cubic-bezier(.55,0,.85,.4) both;}
@keyframes drawer-down{from{transform:translateY(0);}to{transform:translateY(100%);}}
/* Tutamaç çubuğu yok — temiz üst (başlık + kapat zaten var); "Menü Öğesi Ekle" sheet'iyle tutarlı. */
.drawer-box::before{content:none;}
/* Mobilde arka plan karartması hafif — üstteki önizleme (düzenlenen bölüm) görünür kalsın. */
@media(max-width:700px){.drawer-bg{background:rgba(10,10,10,.15);}}
@keyframes drawer-up{from{transform:translateY(100%);}to{transform:translateY(0);}}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:1rem 1.25rem .85rem;border-bottom:1px solid var(--line);flex:none;}
.drawer-title{font-weight:800;font-size:1.02rem;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.drawer-close{width:36px;height:36px;flex:none;border-radius:999px;border:0;background:var(--surface-2);color:var(--muted);font-size:1.15rem;line-height:1;cursor:pointer;transition:background .14s,color .14s;}
.drawer-close:hover{background:var(--line);color:var(--ink);}
/* Gövde TEK scroll kabı. KRİTİK (bug düzeltmesi): önceden .tc-compact/.tc-form zinciri
   `flex:1;display:flex` ile içeriği drawer-body'nin tam yüksekliğine SABİTLİYORDU — uzun
   formlarda (çok alanlı/SSS/istatistik bölümleri) içerik görünmez biçimde taşıyor, scroll
   DEVREYE GİRMİYOR, alttaki etiketler/alanlar kesiliyordu. Artık içerik DOĞAL AKAR; min-height:0
   ile drawer-body gerçekten kaydırılabilir olur, tüm etiketler erişilir. */
/* padding-bottom YOK (kritik): Kaydet şeridi position:sticky;bottom:0 ile tam dibe yapışsın —
   eski calc(1rem+safe-area) alt padding'i, yapışkan şeridin ALTINDA bir boşluk bırakıyor ve
   scroll'da iç içerik o boşluktan şeridin arkasından sızıyordu. Safe-area artık şeridin kendi
   padding'inde. */
/* Gövde paneli doldurur (flex:1), kendi içinde kaydırır. padding-bottom:0 (kritik) — Kaydet
   şeridi dibe tam yapışsın, scroll'da içerik şeridin arkasından sızmasın. */
/* Kaydırma sözleşmesi (flex:1;min-height:0;overflow-y:auto;...) ORTAK blokta — bkz. "EDİTÖR
   PANEL SÖZLEŞMESİ". Burada yalnız gövdeye özel yerleşim: yan padding + Kaydet şeridi için
   dikey flex. */
.drawer-body{padding:0 1.25rem 0;display:flex;flex-direction:column;}
/* Fragment kökü + form, gövdenin tüm yüksekliğini doldurur (flex-shrink:0 → içerik görünmez
   biçimde ezilmez, uzun formlarda scroll çalışır). Kaydet şeridi margin-top:auto ile panelin EN
   altına iner (tam-boy panelde içerik üstte, aksiyon altta — native mobil form dili). */
.drawer-body .tc-compact{display:flex;flex-direction:column;flex:1 0 auto;min-height:0;}
.drawer-body .tc-compact .tc-form{display:flex;flex-direction:column;flex:1 0 auto;min-height:0;}
/* margin-top:auto: Kaydet şeridi HER ZAMAN panelin dibinde (kısa formda da, uzun formda da aynı
   yerde) — kullanıcı kararı: "bazen üstte bazen altta açılıyordu, hep sabit dipte açılsın".
   position:sticky;bottom:0 uzun formda kaydırırken de dibe yapışık tutar; alttaki 20px boşluk
   (sticky-save'in alt padding'i) ile dibe sıfır yapışmaz, efektle yukarı kayarak gelir. */
.drawer-body .sticky-save{margin-top:auto;margin-left:-1.25rem;margin-right:-1.25rem;
    padding-left:1.25rem;padding-right:1.25rem;}
@media(min-width:701px){
  .drawer-box{left:auto;top:0;bottom:0;right:0;width:440px;max-height:none;border-radius:0;
      animation:drawer-in .24s ease both;padding-top:0;
      box-shadow:-12px 0 32px -18px rgba(0,0,0,.25);border-left:1px solid var(--line);}
  .drawer.closing .drawer-box{animation:drawer-out .2s ease both;}
  .drawer-box::before{display:none;}
  /* Masaüstünde karartma yok — sol önizleme etkileşime açık görünür (Canva paneli hissi). */
  .drawer-bg{background:transparent;animation:none;}
  @keyframes drawer-in{from{transform:translateX(30px);opacity:.6;}to{transform:translateX(0);opacity:1;}}
  @keyframes drawer-out{from{transform:translateX(0);opacity:1;}to{transform:translateX(30px);opacity:0;}}
}

/* iframe içi bölüm vurgusu (preview-bridge kendi stilini enjekte eder; bu sınıf panel tarafı
   bölüm listesi hover durumu için). */
/* Bölüm satırı (editör sağ liste) — ikon + ad(+alt not) + sürükle/badge. Modern kart dili. */
.tc-hl-row{border:1px solid var(--line);border-radius:12px;padding:.7rem .85rem;display:flex;align-items:center;gap:.65rem;cursor:pointer;background:var(--surface);margin-bottom:.45rem;color:var(--ink);width:100%;text-align:left;
    transition:border-color .14s,background .14s,box-shadow .14s,transform .12s;}
.tc-hl-row:hover,.tc-hl-row:focus-visible,.tc-hl-row.active{border-color:#2563eb;background:rgba(37,99,235,.06);box-shadow:0 0 0 1px #2563eb inset;transform:translateX(2px);outline:none;}
.tc-hl-row:hover .go,.tc-hl-row.active .go{color:#2563eb;}
.tc-hl-row.is-added{border-style:solid;}
.tc-row-ic{flex:none;color:var(--muted);width:18px;height:18px;}
.tc-hl-row:hover .tc-row-ic,.tc-hl-row.active .tc-row-ic{color:#2563eb;}
.tc-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem;}
/* Liste satırı metinleri (Bölümler paneli + Hızlı erişim) — kompakt, göze hoş (kullanıcı
   geri bildirimi: "metinler büyük"). Gerçek <input>/<textarea> metni buna dahil DEĞİL — iOS
   zoom-on-focus koruması (16px, aşağıda @media max-width:860px) bilerek dokunulmadan kalır. */
.tc-row-name{font-weight:600;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tc-row-sub{font-size:.72rem;color:var(--muted);}
.tc-row-badge{display:inline-block;font-size:.68rem;font-weight:700;color:#2563eb;background:rgba(37,99,235,.1);border-radius:999px;padding:.05rem .45rem;}
.tc-hl-row .go{flex:none;color:var(--muted);font-size:1.1rem;}
.tc-drag{flex:none;color:#c0c4cc;cursor:grab;display:inline-flex;margin:-.2rem .1rem -.2rem -.2rem;padding:.2rem;border-radius:6px;}
.tc-drag:hover{color:var(--ink);background:var(--surface-2);}
.tc-drag:active{cursor:grabbing;}

/* "+ Bölüm Ekle" butonu (liste altı) — kesikli, belirgin, ikincil aksiyon. */
.tc-add-btn{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;margin:.3rem 0 .2rem;
    padding:.7rem 1rem;border:1.5px dashed var(--line);border-radius:12px;background:var(--surface);color:var(--ink);
    font-weight:700;font-size:.9rem;cursor:pointer;min-height:44px;transition:border-color .14s,background .14s,color .14s;}
.tc-add-btn:hover{border-color:#2563eb;color:#2563eb;background:rgba(37,99,235,.05);}

/* Veri/kısayol kartı (drawer üstü): ikon kutusu + başlık + "ne işe yarar" alt notu + ok.
   Düz ghost buton yerine — usta neyin nereden yönetildiğini kartta okur. */
.tc-ds-card{display:flex;align-items:center;gap:.7rem;margin:.9rem 0 .35rem;padding:.75rem .85rem;
    border:1px solid var(--line);border-radius:12px;background:var(--surface-2);text-decoration:none;color:var(--ink);
    transition:border-color .14s,background .14s,transform .12s;}
.tc-ds-card + .tc-ds-card{margin-top:.45rem;}
.tc-ds-card:hover{border-color:var(--ink);background:var(--surface);transform:translateX(2px);}
.tc-ds-ic{flex:none;width:38px;height:38px;border-radius:10px;background:var(--surface);border:1px solid var(--line);
    display:inline-flex;align-items:center;justify-content:center;color:var(--muted);}
.tc-ds-card:hover .tc-ds-ic{color:var(--ink);border-color:var(--ink);}
.tc-ds-ic svg{width:18px;height:18px;}
.tc-ds-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem;}
.tc-ds-main strong{font-size:.85rem;font-weight:700;}
.tc-ds-main span{font-size:.72rem;color:var(--muted);line-height:1.4;}
.tc-ds-go{flex:none;color:var(--muted);font-size:1.15rem;}
.tc-ds-card:hover .tc-ds-go{color:var(--ink);}

/* "Bu Bölümü Sil" (drawer formu) — sessiz kırmızı metin-buton. */
.tc-del-section{display:inline-flex;align-items:center;gap:.4rem;margin:1rem 0 .2rem;padding:.5rem .2rem;
    border:0;background:none;color:var(--danger);font-weight:600;font-size:.86rem;cursor:pointer;}
.tc-del-section:hover{text-decoration:underline;}

/* Bölüm ekleme modalı — mobil bottom-sheet / masaüstü merkez; ikonlu tür kartları grid.
   Menü sayfasındaki "Menü Öğesi Ekle" sheet'iyle AYNI dil: backdrop fade + kart slide-up,
   z-index editörün sağ paneli/backdrop'unun (94/95) ÜstÜnde (önceki 92 altında kalıyordu:
   "siyah transparan oluyor ama hiçbir şey açılmıyor"). */
.tc-add-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:stretch;justify-content:center;
    background:rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;}
.tc-add-modal.show{opacity:1;visibility:visible;}
/* MOBİL (≤700px): TAM EKRAN — köşe yuvarlaması YOK, %100 yükseklik (kullanıcı kararı). */
.tc-add-box{background:var(--surface);width:100%;max-width:none;height:100dvh;height:100vh;max-height:none;border-radius:0;
    padding-top:env(safe-area-inset-top);
    display:flex;flex-direction:column;overflow:hidden;
    transform:translateY(100%);transition:transform .28s cubic-bezier(.16,.84,.44,1);}
.tc-add-modal.show .tc-add-box{transform:translateY(0);}
@media(min-width:701px){.tc-add-modal{align-items:center;padding:2rem;}
    .tc-add-box{max-width:520px;height:auto;max-height:76vh;border-radius:16px;padding-top:0;transform:translateY(18px);}
    .tc-add-modal.show .tc-add-box{transform:none;}}
.tc-add-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.2rem .8rem;border-bottom:1px solid var(--line);}
.tc-add-close{width:36px;height:36px;border-radius:999px;border:0;background:var(--surface-2);color:var(--muted);font-size:1.2rem;line-height:1;cursor:pointer;}
.tc-add-note{padding:.8rem 1.2rem 0;margin:0;font-size:.86rem;}
/* Kaydırma sözleşmesi ORTAK blokta (flex:1 + overflow-y:auto). Burada yalnız grid yerleşimi. */
.tc-add-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;padding:.9rem 1.2rem 1.3rem;}
@media(min-width:600px){.tc-add-grid{grid-template-columns:repeat(3,1fr);}}
.tc-add-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:92px;padding:1rem .6rem;
    border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font-weight:600;font-size:.84rem;text-align:center;cursor:pointer;
    transition:border-color .14s,background .14s,transform .12s;}
.tc-add-card:hover{border-color:#2563eb;background:rgba(37,99,235,.05);transform:translateY(-2px);}
.tc-add-card svg{color:var(--muted);width:24px;height:24px;}
.tc-add-card:hover svg{color:#2563eb;}
.tc-hl-row .sub{display:block;font-weight:500;font-size:.78rem;color:var(--muted);margin-top:.15rem;}
.tc-hl-row .go{color:var(--muted);flex:none;}

/* Mobil dokunma/zoom temelleri — panel geneli. */
.btn{min-height:44px;}
.btn.sm,.mini-btn{min-height:36px;}
@media(max-width:860px){
  input[type=text],input[type=number],input[type=email],input[type=tel],input[type=url],input[type=password],input[type=time],textarea,select,
  .tc-form input[type=text],.tc-form input[type=number],.tc-form textarea,.tc-form select{font-size:14px;}
}

/* İçerik/Stil sekmeleri (_section_form) — ikonlu segment, aktifte beyaz kart + yumuşak gölge. */
.tc-tabs{display:flex;gap:.25rem;background:var(--surface-2);border:1px solid var(--line);border-radius:13px;padding:.34rem;margin:.9rem 0 .2rem;}
.tc-tab{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border:0;background:transparent;border-radius:10px;padding:.58rem .8rem;font-size:.88rem;font-weight:700;color:var(--muted);cursor:pointer;min-height:40px;transition:background .15s,color .15s,box-shadow .15s,transform .1s;}
.tc-tab svg{flex:none;opacity:.7;transition:opacity .15s;}
.tc-tab:hover{color:var(--ink);}
.tc-tab:active{transform:scale(.98);}
.tc-tab.active{background:var(--surface);color:var(--accent);box-shadow:0 2px 7px rgba(0,0,0,.13),0 0 0 1px var(--line);}
.tc-tab.active svg{opacity:1;}

/* Stil sekmesi renk alanı — önizleme karesi + seçici + hex durumu + sessiz sıfırlama. */
.tc-color{display:flex;align-items:center;gap:.6rem;}
/* Görünmez overlay — .tc-color-prev'in tam üstünü kaplar, tıklamayı/native renk seçiciyi
   yakalar ama kendi görsel kutusu yok (bkz. .tc-color-prev yorum notu). */
.tc-color-swatch{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0;}
.tc-color-state{font-size:.78rem;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;}
/* "Temaya döndür": küçük, sessiz ikonlu metin-buton (kocaman ghost buton değil) — hover'da belirir. */
.tc-color-clear{display:inline-flex;align-items:center;gap:.3rem;flex:none;border:0;background:none;padding:.3rem .45rem;
    border-radius:7px;font-size:.74rem;font-weight:600;color:var(--muted);cursor:pointer;min-height:0;white-space:nowrap;
    transition:color .14s,background .14s;}
.tc-color-clear:hover{color:var(--ink);background:var(--surface-2);}
.tc-color-clear svg{flex:none;}
/* Boyut/boşluk segment kontrolü — landing'deki stil kartındaki .vxe-segs ile aynı dil. */
.tc-segs{display:flex;background:var(--surface-2);border-radius:10px;padding:3px;gap:3px;}
.tc-segs .tc-seg{flex:1;text-align:center;font-size:.8rem;font-weight:600;color:var(--muted);
    padding:.6rem .4rem;border:0;background:none;border-radius:8px;cursor:pointer;white-space:nowrap;min-height:0;
    transition:color .12s,background .12s;}
.tc-segs .tc-seg:hover{color:var(--ink);}
.tc-segs .tc-seg.on{background:var(--surface);color:var(--ink);font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.12);}
/* Google arama sonucu (SERP) önizlemesi — SEO panelinde "Google'da nasıl görünür" örneği. */
.tc-serp{margin:.9rem 0 1rem;}
.tc-serp-lbl{display:block;font-size:.72rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);margin:0 0 .5rem;}
.tc-serp-card{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:.9rem 1rem;}
.tc-serp-top{display:flex;align-items:center;gap:.55rem;margin:0 0 .5rem;}
.tc-serp-fav{flex:none;width:26px;height:26px;border-radius:50%;background:var(--surface-2);color:var(--ink);font-weight:700;font-size:.8rem;display:flex;align-items:center;justify-content:center;}
.tc-serp-site{display:flex;flex-direction:column;line-height:1.2;min-width:0;}
.tc-serp-name{font-size:.8rem;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tc-serp-url{font-size:.72rem;color:#5f6368;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tc-serp-title{color:#1a0dab;font-size:1.08rem;line-height:1.3;margin:.1rem 0 .25rem;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;}
.tc-serp-desc{color:#4d5156;font-size:.84rem;line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}

/* Ortam kitaplığı picker'ı (görsel seç/yükle) */
.tc-mp{position:fixed;inset:0;z-index:90;display:none;align-items:flex-end;justify-content:center;background:rgba(10,10,10,.45);}
.tc-mp.show{display:flex;}
.tc-mp-box{background:var(--surface);width:100%;max-height:80dvh;max-height:80vh;border-radius:16px 16px 0 0;display:flex;flex-direction:column;overflow:hidden;}
@media(min-width:600px){.tc-mp{align-items:center;padding:2rem;}.tc-mp-box{max-width:560px;border-radius:16px;max-height:76vh;}}
.tc-mp-head{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.1rem;border-bottom:1px solid var(--line);flex:none;}
.tc-mp-close{width:38px;height:38px;border-radius:999px;border:0;background:var(--surface-2);font-size:1.25rem;line-height:1;cursor:pointer;color:var(--ink);}
.tc-mp-up{display:flex;flex-direction:column;align-items:center;gap:.2rem;margin:1rem 1.1rem .4rem;padding:1rem;border:1.5px dashed var(--line);border-radius:12px;cursor:pointer;color:var(--ink);font-weight:700;font-size:.92rem;text-align:center;}
.tc-mp-up:hover{border-color:var(--ink);}
.tc-mp-up em{font-style:normal;font-weight:500;font-size:.78rem;}
.tc-mp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;padding:1rem 1.1rem 1.2rem;overflow-y:auto;}
@media(min-width:600px){.tc-mp-grid{grid-template-columns:repeat(4,1fr);}}
.tc-mp-note{grid-column:1/-1;text-align:center;padding:1rem 0;}
.tc-mp-cell{position:relative;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;background:var(--surface-2);cursor:pointer;aspect-ratio:1/1;}
.tc-mp-cell:hover{border-color:var(--ink);}
.tc-mp-cell img{width:100%;height:100%;object-fit:cover;display:block;}
.tc-mp-loading{display:flex;align-items:center;justify-content:center;}
.tc-mp-spin{width:26px;height:26px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--ink);animation:tcspin .7s linear infinite;}
@keyframes tcspin{to{transform:rotate(360deg);}}

/* Uzun-bas sürükle: "kalkan" satır (lift) + yapısal uyarı balonu + pasif satır + toggle satırı. */
.tc-hl-row{position:relative;touch-action:pan-y;user-select:none;-webkit-user-select:none;}
/* Kalkan satır: transform'u JS yönetir (parmağı birebir takip) — CSS geçişi KAPALI ki gecikme
   hissi olmasın; bırakınca .drop ile kısa geçiş açılır, satır yerine yumuşakça oturur. */
.tc-hl-row.lift{box-shadow:0 14px 30px -10px rgba(0,0,0,.35),0 0 0 1px #2563eb inset;border-color:#2563eb;background:var(--surface);z-index:5;cursor:grabbing;transition:none;will-change:transform;}
/* Bırakma: hafif esneyerek (overshoot) küçülüp yerine oturur — net "bırakıldı" hissi. */
.tc-hl-row.lift.drop{transition:transform .26s cubic-bezier(.34,1.45,.64,1),box-shadow .26s ease;box-shadow:0 0 0 1px #2563eb inset;}
.tc-hl-row.is-off{opacity:.55;}
.tc-row-badge.off{color:#b45309;background:#fffbeb;}
.tc-warn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(0);transform-origin:center;
    background:#111827;color:#fff;font-size:.78rem;font-weight:600;padding:.45rem .8rem;border-radius:8px;white-space:nowrap;
    box-shadow:0 8px 20px -8px rgba(0,0,0,.4);transition:transform .22s cubic-bezier(.34,1.4,.64,1);pointer-events:none;z-index:6;}
.tc-warn.show{transform:translate(-50%,-50%) scale(1);}
.tc-onoff{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1.1rem 0 .2rem;
    padding:.8rem .9rem;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);}
.tc-onoff-lbl{display:flex;flex-direction:column;gap:.1rem;min-width:0;}
.tc-onoff-lbl strong{font-size:.9rem;color:var(--ink);}
.tc-onoff-lbl small{font-size:.76rem;color:var(--muted);line-height:1.35;}
/* Ayar/içerik boolean toggle'ı — bölüm görünürlüğü "Sitede göster" toggle'ından (gri kart)
   GÖRSEL OLARAK AYRILIR: kartsız, hafif inline satır + üstte ince ayraç; switch biraz küçük.
   Böylece "içerik ayarı" ile "bölümü aç/kapat" karışmaz (monokrom korunur). */
.tc-onoff--field{background:transparent;border:0;border-radius:0;border-top:1px solid var(--line);
    padding:.5rem .15rem;margin:-.45rem 0 0;}
.tc-onoff--field .tc-onoff-lbl strong{font-weight:600;}
.tc-onoff--field .switch{transform:scale(.86);transform-origin:right center;}