/* clou.tr engine chrome — admin panel, demo ribbon, toast, edit affordances.
   Namespaced .clou-* so it never collides with theme styles. */
.clou-demo-ribbon{position:fixed;left:0;right:0;bottom:0;z-index:9000;display:flex;gap:1rem;align-items:center;justify-content:center;
  flex-wrap:wrap;padding:.55rem 1rem;font:500 13px/1.3 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:rgba(17,20,26,.92);color:#f3f4f6;backdrop-filter:blur(8px);border-top:1px solid rgba(255,255,255,.12)}
.clou-demo-ribbon strong{color:#fff}
.clou-demo-actions{display:flex;gap:.4rem}
.clou-demo-ribbon button{cursor:pointer;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff;
  border-radius:7px;padding:.32rem .7rem;font:600 12px system-ui;transition:.15s}
.clou-demo-ribbon button:hover{background:rgba(255,255,255,.16)}
.clou-demo-ribbon button[data-act=admin]{background:#fff;color:#111}
body.has-ribbon{padding-bottom:52px}

.clou-toast{position:fixed;left:50%;bottom:74px;transform:translate(-50%,16px);z-index:9999;max-width:90vw;
  background:#111418;color:#fff;padding:.7rem 1.1rem;border-radius:10px;font:500 14px system-ui;box-shadow:0 10px 30px rgba(0,0,0,.3);
  opacity:0;transition:.3s}
.clou-toast.show{opacity:1;transform:translate(-50%,0)}

.clou-admin{position:fixed;top:0;right:0;bottom:0;z-index:9500;width:340px;max-width:92vw;display:flex;flex-direction:column;
  background:#15181d;color:#e8eaed;box-shadow:-12px 0 40px rgba(0,0,0,.35);transform:translateX(102%);transition:transform .25s ease;
  font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.clou-admin.open{transform:translateX(0)}
.clou-admin-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.1rem;border-bottom:1px solid #262b32}
.clou-admin-head strong{font-size:15px;letter-spacing:.3px}
.clou-x{background:none;border:0;color:#9aa3ad;font-size:18px;cursor:pointer;line-height:1}
.clou-x:hover{color:#fff}
.clou-admin-body{padding:1.1rem;overflow:auto}
.clou-sec{margin:1.3rem 0 .6rem;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#7c8691}
.clou-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.clou-toggle{padding:.7rem .9rem;background:#1c2127;border:1px solid #262b32;border-radius:10px;font-weight:600;cursor:pointer}
.clou-toggle input{width:42px;height:24px;appearance:none;background:#3a424c;border-radius:20px;position:relative;cursor:pointer;transition:.2s}
.clou-toggle input:checked{background:#46b3a4}
.clou-toggle input::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:.2s}
.clou-toggle input:checked::after{left:20px}
.clou-hint{margin:.6rem 0 0;font-size:12px;color:#8b949e}
.clou-swatches{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.clou-sw{display:flex;align-items:center;gap:.5rem;padding:.5rem .6rem;background:#1c2127;border:1px solid #262b32;border-radius:9px;
  color:#cdd3da;cursor:pointer;font:600 12.5px system-ui;text-align:left;transition:.15s}
.clou-sw span{width:18px;height:18px;border-radius:50%;flex:0 0 auto;background:var(--a);box-shadow:inset 0 0 0 3px var(--b),0 0 0 1px rgba(255,255,255,.15)}
.clou-sw:hover{border-color:#3a444f}
.clou-sw.active{border-color:#46b3a4;background:#1e2a29}
.clou-actions{display:flex;flex-direction:column;gap:.5rem}
.clou-btn{padding:.7rem;border-radius:9px;border:0;background:#46b3a4;color:#06120f;font:700 13px system-ui;cursor:pointer;transition:.15s}
.clou-btn:hover{filter:brightness(1.06)}
.clou-btn.ghost{background:#1c2127;color:#cdd3da;border:1px solid #2c333b}
.clou-btn.ghost:hover{background:#222831}

/* edit affordances */
body.clou-editing [data-edit]{outline:1.5px dashed rgba(70,179,164,.6);outline-offset:3px;border-radius:3px;cursor:text}
body.clou-editing [data-edit]:hover{outline-color:#46b3a4;background:rgba(70,179,164,.07)}
body.clou-editing [data-edit]:focus{outline:2px solid #46b3a4;background:rgba(70,179,164,.1)}
body.clou-editing .clou-img-edit{outline:2px dashed rgba(70,179,164,.7);outline-offset:3px;cursor:pointer;position:relative}
body.clou-editing .clou-img-edit::after{content:"Görseli değiştir";position:absolute;inset:auto 0 0 0;background:rgba(17,20,26,.8);color:#fff;
  font:600 11px system-ui;padding:.3rem;text-align:center;pointer-events:none}
@media(max-width:520px){.clou-swatches{grid-template-columns:1fr}}

/* clou.tr brand credit — permanent footer on every site (kept in delivered export) */
.clou-credit{background:var(--surface-2,#f1efe9);border-top:1px solid var(--border,#e4e1d9);color:var(--muted,#5d6b6f)}
.clou-credit-inner{max-width:1180px;margin:0 auto;padding:1rem 1.25rem;display:flex;align-items:center;gap:1rem 1.4rem;flex-wrap:wrap;
  font:500 13.5px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.clou-credit-brand{display:inline-flex;align-items:center;background:#fff;border:1px solid rgba(16,18,22,.08);
  border-radius:11px;padding:.5rem .8rem;box-shadow:0 4px 14px -8px rgba(16,18,22,.25);transition:transform .15s,box-shadow .15s}
.clou-credit-brand:hover{transform:translateY(-1px);box-shadow:0 8px 20px -10px rgba(16,18,22,.35)}
.clou-credit-logo{height:23px;width:auto;display:block}
.clou-credit-text{margin:0;flex:1 1 320px;min-width:240px}
.clou-credit-text a{color:var(--brand,#2f8f83);text-decoration:none;font-weight:600}
.clou-credit-text a:hover{text-decoration:underline}
.clou-credit-text strong{color:var(--text,#1f2a2e)}
.clou-credit-cta{margin-left:auto;display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1rem;border-radius:999px;
  background:var(--brand,#2f8f83);color:var(--on-brand,#fff);text-decoration:none;font-weight:700;font-size:13px;white-space:nowrap;transition:.15s}
.clou-credit-cta:hover{filter:brightness(1.07)}
.clou-credit .ic-sm{width:15px;height:15px}
@media(max-width:640px){.clou-credit-cta{margin-left:0}}