/* ===================== Genel ===================== */
html { font-size: 14px; }
@media (min-width: 768px) { html { font-size: 15px; } }
body { background: #f5f6fa; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }

.pts-navbar { background: linear-gradient(90deg, #6a11cb, #2575fc); }
.pts-hero { padding: 1.5rem 0 .5rem; }

/* ===================== Galeri ===================== */
.template-card { transition: transform .15s, box-shadow .15s; border: 0; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.template-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,.12); }
.template-thumb { background: #e9ecef; display: flex; align-items: center; justify-content: center; padding: 12px; border-radius: .375rem .375rem 0 0; }
.template-thumb canvas { max-width: 100%; height: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.18)); }
.admin-thumb { display: flex; }

/* ===================== Editör (ortak) ===================== */
.pte-editor { position: relative; overflow: auto; background: #dfe3ea;
    background-image: radial-gradient(#c9ced8 1px, transparent 1px); background-size: 16px 16px; }
.pte-canvas-holder { min-width: 100%; min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; width: max-content; }
.pte-canvas-holder canvas { background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,.18); touch-action: none; cursor: default; }
.pte-text-editor { position: absolute; z-index: 10; border: 2px solid #1e88e5; background: rgba(255,255,255,.95);
    resize: none; padding: 2px; line-height: 1.25; outline: none; }

/* ===================== Stüdyo (kullanıcı) ===================== */
.studio-main { flex: 1; display: flex; }
.studio-layout { display: flex; flex: 1; height: calc(100vh - 56px); width: 100%; }
.studio-panel { width: 300px; flex-shrink: 0; background: #fff; border-right: 1px solid #dee2e6; padding: 1rem; display: flex; flex-direction: column; overflow-y: auto; }
.studio-canvas { flex: 1; min-width: 0; }
.photo-tray { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 6px; }
.photo-tray img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; cursor: pointer; border: 2px solid transparent; }
.photo-tray img:hover { border-color: #2575fc; }
.photo-tray img { touch-action: none; user-select: none; -webkit-user-drag: none; }
.tray-ghost { position: fixed; width: 72px; height: 72px; object-fit: cover; border-radius: 6px; pointer-events: none;
    transform: translate(-50%, -50%); opacity: .85; box-shadow: 0 6px 18px rgba(0,0,0,.3); z-index: 2000; border: 2px solid #43a047; }
.pte-canvas-holder canvas { user-select: none; -webkit-user-select: none; }
.kvkk-text { max-height: 260px; overflow-y: auto; white-space: pre-wrap; background: #f8f9fa; padding: .75rem; border-radius: .375rem; }

/* ---- Mobil: canvas üstte (baş parmakla erişilebilir), araç paneli altta ---- */
@media (max-width: 768px) {
    .studio-layout { flex-direction: column; height: auto; min-height: 100dvh; }
    .studio-canvas { order: -1; height: 55dvh; min-height: 300px; border-bottom: 1px solid #dee2e6; }
    .studio-panel { width: 100%; border-right: 0; padding: .75rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom, 20px)); }
    .studio-panel .btn, .studio-panel .form-control { min-height: 44px; font-size: 16px; } /* iOS zoom + dokunmatik */
    .studio-panel .btn-sm { min-height: 40px; }
    .photo-tray { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); }
    .kvkk-text { max-height: 45vh; }

    /* Yönetim: sidebar → üst navigasyon, tasarımcı → dikey kaydırma */
    .admin-wrapper { flex-direction: column; }
    .admin-sidebar { width: 100%; height: auto; position: static; padding: .5rem 0 0; }
    .admin-sidebar .nav { flex-direction: row !important; flex-wrap: wrap; gap: .25rem; padding: 0 .5rem; }
    .admin-sidebar .nav-link { padding: .45rem .65rem; border-left: 0 !important; border-radius: .375rem; font-size: .82rem; }
    .admin-sidebar hr { display: none; }
    .admin-brand { padding: 0 .5rem .4rem; font-size: 1rem; }
    .admin-content { padding: .75rem; }

    /* Tasarım editörü: canvas ilk, paneller ardışık (scroll) */
    .designer { flex-direction: column; height: auto; }
    .designer-center { order: -1; min-height: 55dvh; }
    .designer-left, .designer-right { width: 100% !important; max-height: none !important; border: 0; border-bottom: 1px solid #dee2e6; padding: .65rem; }
    .designer-toolbar { padding: .35rem .4rem; gap: .2rem; overflow-x: auto; flex-wrap: nowrap; }
    .designer-toolbar .btn { font-size: .75rem; padding: .3rem .5rem; white-space: nowrap; }
    .designer-toolbar .btn-sm { font-size: .72rem; padding: .25rem .45rem; }
    .designer-toolbar .vr { display: none; }
    .designer-h { margin: .4rem 0 .2rem; }

    /* Galeri kartları: 2 sütun */
    .col-6 { width: 50%; }
    .pts-hero { padding: .75rem 0 0; }
    .pts-hero h1 { font-size: 1.4rem; }
    .pts-hero .lead { font-size: .95rem; }

    /* Katman listesi: daha kompakt */
    .layer-list { max-height: 180px; }
    .stat-card { margin-bottom: .5rem; }

    /* Ana sayfa: adım kutuları alt alta */
    .pts-seo .row { flex-direction: column; }
}

/* ===================== Bakım ===================== */
.maintenance-body { background: linear-gradient(135deg, #6a11cb, #2575fc); color: #fff; align-items: center; justify-content: center; }
.maintenance-box { max-width: 560px; padding: 2rem; margin: auto; }

/* ===================== Admin ===================== */
.admin-body { background: #f1f3f7; }
.admin-wrapper { display: flex; min-height: 100vh; }
.admin-sidebar { width: 230px; flex-shrink: 0; background: #1f2433; color: #cfd3dc; padding-top: 1rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.admin-brand { font-weight: 700; color: #fff; font-size: 1.15rem; padding: 0 1rem 1rem; }
.admin-sidebar .nav-link { color: #cfd3dc; padding: .55rem 1rem; border-left: 3px solid transparent; }
.admin-sidebar .nav-link:hover { background: rgba(255,255,255,.05); color: #fff; }
.admin-sidebar .nav-link.active { background: rgba(255,255,255,.08); color: #fff; border-left-color: #2575fc; }
.admin-content { flex: 1; min-width: 0; padding: 1.75rem; }
.admin-content.p-0 { padding: 0; }
.admin-content.p-0 > .alert { margin: .75rem; }
.stat-card { border: 0; box-shadow: 0 1px 4px rgba(0,0,0,.06); }

/* Tasarım editörü */
.designer { display: flex; height: 100vh; }
.designer-left, .designer-right { width: 270px; flex-shrink: 0; background: #fff; padding: .9rem; overflow-y: auto; }
.designer-left { border-right: 1px solid #dee2e6; }
.designer-right { border-left: 1px solid #dee2e6; }
.designer-center { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.designer-toolbar { background: #fff; border-bottom: 1px solid #dee2e6; padding: .45rem .6rem; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.designer-canvas { flex: 1; min-height: 0; }
.designer-h { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #6c757d; margin: .75rem 0 .4rem; }
.layer-list { max-height: 280px; overflow-y: auto; }
.layer-list .list-group-item { cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===================== Hukuki bilgi bandı ===================== */
.legal-banner { background: linear-gradient(90deg, #232526, #414345); color: #e0e0e0;
    text-align: center; padding: 7px 40px 7px 16px; font-size: .82rem; position: relative; line-height: 1.4; }
.legal-banner-close { position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: none; border: 0; color: #999; font-size: 1.1rem; cursor: pointer; padding: 4px 8px; border-radius: 4px; }
.legal-banner-close:hover { color: #fff; background: rgba(255,255,255,.1); }