/* ── GENOM STUDIO v2 ── */
:root{
  --gs-bar-h:52px;
  --gs-ink:#f2f2f4;
  --gs-bg:#0c0c0e;
  --gs-bg2:#16161a;
  --gs-line:rgba(255,255,255,.12);
  --gs-line2:rgba(255,255,255,.07);
  --gs-red:#e11;
  --gs-dim:rgba(255,255,255,.55);
}
body.gs-editing{ padding-top:var(--gs-bar-h); }
body.gs-editing.gs-ins-open #gs-page{ margin-right:340px; transition:margin .2s ease; }

/* ── Toolbar ── */
.gs-bar{
  position:fixed; top:0; left:0; right:0; height:var(--gs-bar-h); z-index:100000;
  display:flex; align-items:center; gap:1rem; padding:0 .9rem;
  background:var(--gs-bg); border-bottom:1px solid var(--gs-line);
  font-family:Poppins,system-ui,sans-serif; color:var(--gs-ink);
  box-shadow:none;
}
.gs-bar-l,.gs-bar-c,.gs-bar-r{ display:flex; align-items:center; gap:.5rem; }
.gs-bar-c{ flex:1; justify-content:center; }
.gs-bar-r{ justify-content:flex-end; }
.gs-bar-brand{ display:inline-flex; align-items:center; gap:.45rem; font-weight:700; font-size:.85rem; letter-spacing:.02em; }
.gs-bar-brand i{ color:var(--gs-red); }

.gs-bar-btn{
  display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
  background:transparent; color:var(--gs-ink); border:1px solid var(--gs-line);
  padding:.45rem .7rem; border-radius:8px; font-size:.76rem; font-weight:500;
  font-family:inherit; text-decoration:none; transition:.15s;
}
.gs-bar-btn:hover:not(:disabled){ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.25); }
.gs-bar-btn:disabled{ opacity:.32; cursor:default; }
.gs-bar-btn i{ font-size:.8rem; }
.gs-bar-add{ border-color:rgba(238,17,17,.5); }
.gs-bar-add:hover:not(:disabled){ background:rgba(238,17,17,.14); }
.gs-bar-pub{ background:var(--gs-red); border-color:var(--gs-red); font-weight:600; }
.gs-bar-pub:hover:not(:disabled){ background:#ff2424; }
.gs-bar-exit{ width:38px; justify-content:center; padding:.45rem 0; }
.gs-bar-exit:hover{ background:rgba(255,255,255,.08); }
.gs-bar-dirty{ font-size:.68rem; color:var(--gs-dim); padding-right:.3rem; white-space:nowrap; }
.gs-bar-dirty.on{ color:#ffb020; }
.gs-ico{ padding:.45rem .55rem; }
.gs-bar-sep{ width:1px; height:22px; background:var(--gs-line); margin:0 .15rem; flex:0 0 auto; }
.gs-bar-count{ font-size:.7rem; color:var(--gs-dim); white-space:nowrap; display:inline-flex; align-items:center; gap:.35rem; }
.gs-bar-count i{ font-size:.7rem; }

.gs-dev{ display:inline-flex; gap:2px; background:var(--gs-bg2); border:1px solid var(--gs-line); border-radius:8px; padding:2px; }
.gs-dev-btn{ cursor:pointer; background:transparent; border:none; color:var(--gs-dim); padding:.35rem .55rem; border-radius:7px; font-size:.78rem; transition:.14s; }
.gs-dev-btn:hover{ color:#fff; }
.gs-dev-btn.on{ background:var(--gs-red); color:#fff; }

body.gs-dev-tablet #gs-page{ max-width:768px; margin-left:auto; margin-right:auto; outline:1px solid var(--gs-line); outline-offset:0; transition:max-width .25s ease; }
body.gs-dev-mobile #gs-page{ max-width:390px; margin-left:auto; margin-right:auto; outline:1px solid var(--gs-line); outline-offset:0; transition:max-width .25s ease; }
body.gs-dev-tablet.gs-ins-open #gs-page,
body.gs-dev-mobile.gs-ins-open #gs-page{ margin-right:auto; }

/* ── Sayfa seçici ── */
.gs-switch{ position:relative; }
.gs-switch-btn{
  display:inline-flex; align-items:center; gap:.45rem; cursor:pointer;
  background:var(--gs-bg2); color:var(--gs-ink); border:1px solid var(--gs-line);
  padding:.4rem .7rem; border-radius:8px; font-size:.76rem; font-family:inherit; max-width:240px;
}
.gs-switch-btn span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:150px; }
.gs-sw-caret{ font-size:.6rem; opacity:.6; transition:.2s; }
.gs-switch.open .gs-sw-caret{ transform:rotate(180deg); }
.gs-switch-menu{
  display:none; position:absolute; top:calc(100% + 6px); left:0; min-width:260px; max-height:60vh; overflow:auto;
  background:var(--gs-bg2); border:1px solid var(--gs-line); border-radius:8px; padding:.35rem;
  box-shadow:none;
}
.gs-switch.open .gs-switch-menu{ display:block; }
.gs-sw-item{
  display:flex; align-items:center; gap:.55rem; padding:.5rem .6rem; border-radius:8px;
  color:var(--gs-ink); text-decoration:none; font-size:.78rem;
}
.gs-sw-item:hover{ background:rgba(255,255,255,.07); }
.gs-sw-item.on{ background:rgba(238,17,17,.16); }
.gs-sw-pub{ color:#39d353; font-size:.5rem; }
.gs-sw-draft{ color:var(--gs-dim); font-size:.5rem; }
.gs-sw-empty{ padding:.7rem; font-size:.75rem; color:var(--gs-dim); }

/* ── Wrapblock ── */
.gs-wrapblock{ position:relative; outline:1px dashed transparent; transition:outline .12s; }
.gs-wrapblock:hover{ outline:1px dashed rgba(238,17,17,.5); outline-offset:-1px; }
.gs-wrapblock.sel{ outline:2px solid var(--gs-red); outline-offset:-2px; }
.gs-wb-body{ cursor:pointer; }
.gs-wb-tag{
  position:absolute; top:0; left:0; z-index:30; transform:translateY(-100%);
  background:var(--gs-red); color:#fff; font-size:.62rem; font-weight:600; letter-spacing:.03em;
  padding:.2rem .5rem; border-radius:5px 5px 0 0; font-family:Poppins,sans-serif;
  opacity:0; transition:.12s; pointer-events:none;
}
.gs-wrapblock:hover .gs-wb-tag, .gs-wrapblock.sel .gs-wb-tag{ opacity:1; }
.gs-wb-tools{
  position:absolute; top:8px; right:8px; z-index:31; display:flex; gap:4px;
  opacity:0; transition:.12s; font-family:Poppins,sans-serif;
}
.gs-wrapblock:hover .gs-wb-tools, .gs-wrapblock.sel .gs-wb-tools{ opacity:1; }
.gs-wb-btn{
  width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; background:rgba(12,12,14,.92); color:#fff; border:1px solid var(--gs-line);
  border-radius:7px; font-size:.72rem; transition:.12s; backdrop-filter:blur(4px);
}
.gs-wb-btn:hover:not(:disabled){ background:#000; border-color:rgba(255,255,255,.35); }
.gs-wb-btn:disabled{ opacity:.3; cursor:default; }
.gs-wb-edit:hover{ background:var(--gs-red); border-color:var(--gs-red); }
.gs-wb-del:hover{ background:#c0392b; border-color:#c0392b; }

/* ── Boş tuval ── */
.gs-canvas-empty{
  min-height:60vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1rem; color:var(--gs-dim); font-family:Poppins,sans-serif; text-align:center;
}
.gs-canvas-empty i{ font-size:2.6rem; opacity:.4; }
.gs-canvas-empty p{ font-size:.95rem; margin:0; }
.gs-ce-btn{
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; font-family:inherit;
  background:var(--gs-red); color:#fff; border:none; padding:.7rem 1.3rem; border-radius:8px;
  font-size:.85rem; font-weight:600;
}
.gs-ce-btn:hover{ background:#ff2424; }

/* ── Inspector ── */
.gs-inspector{
  position:fixed; top:var(--gs-bar-h); right:0; bottom:0; width:340px; z-index:99999;
  background:var(--gs-bg2); border-left:1px solid var(--gs-line);
  font-family:Poppins,system-ui,sans-serif; color:var(--gs-ink);
  display:flex; flex-direction:column; transform:translateX(100%); transition:transform .2s ease;
  box-shadow:none;
}
.gs-inspector.open{ transform:translateX(0); }
.gs-ins-head{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.9rem 1rem; border-bottom:1px solid var(--gs-line); font-size:.85rem; font-weight:600;
}
.gs-ins-head i{ color:var(--gs-red); margin-right:.35rem; }
.gs-ins-x{ cursor:pointer; background:transparent; border:none; color:var(--gs-dim); font-size:1rem; }
.gs-ins-x:hover{ color:#fff; }
.gs-ins-body{ flex:1; overflow:auto; padding:1rem; }
.gs-ins-none{ font-size:.8rem; color:var(--gs-dim); }

.gs-f{ margin-bottom:1rem; }
.gs-f-lbl{ display:block; font-size:.72rem; font-weight:600; color:var(--gs-dim); margin-bottom:.35rem; letter-spacing:.02em; }
.gs-f-in{
  width:100%; box-sizing:border-box; background:var(--gs-bg); color:var(--gs-ink);
  border:1px solid var(--gs-line); border-radius:8px; padding:.55rem .65rem;
  font-size:.82rem; font-family:inherit; resize:vertical;
}
.gs-f-in:focus{ outline:none; border-color:var(--gs-red); }
.gs-f-rich,.gs-f-json{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.74rem; line-height:1.5; }
.gs-f-err{ color:#ff6b6b; font-size:.68rem; margin-top:.3rem; min-height:.9rem; }
.gs-f-hint{ font-size:.66rem; color:var(--gs-dim); margin-top:.3rem; opacity:.8; }
.gs-f-img{ display:flex; flex-direction:column; gap:.55rem; }
.gs-f-imgprev{ border:1px solid var(--gs-line2); border-radius:8px; overflow:hidden; background:#000; }
.gs-f-imgprev img{ display:block; width:100%; max-height:160px; object-fit:cover; }
.gs-f-imgbtns{ display:flex; gap:.45rem; }
.gs-f-libbtn,.gs-f-upbtn,.gs-f-clrbtn{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; cursor:pointer;
  background:var(--gs-bg); color:var(--gs-ink); border:1px solid var(--gs-line); border-radius:8px;
  padding:.5rem .4rem; font-size:.72rem; font-family:inherit; transition:.14s;
}
.gs-f-libbtn:hover,.gs-f-upbtn:hover{ border-color:var(--gs-red); background:rgba(238,17,17,.1); }
.gs-f-libbtn i,.gs-f-upbtn i{ color:var(--gs-red); }
.gs-f-clrbtn{ flex:0 0 38px; }
.gs-f-clrbtn:hover{ border-color:#c0392b; color:#ff8a80; }
.gs-f-imgurl{ font-size:.72rem; }

.gs-f-toggle{
  display:inline-flex; align-items:center; gap:.6rem; cursor:pointer; font-family:inherit;
  background:var(--gs-bg); border:1px solid var(--gs-line); border-radius:30px; padding:.35rem .7rem .35rem .4rem;
  color:var(--gs-dim); font-size:.78rem;
}
.gs-f-knob{ width:34px; height:18px; border-radius:999px; background:rgba(255,255,255,.18); position:relative; transition:.18s; flex:0 0 auto; }
.gs-f-knob::after{ content:''; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; transition:.18s; }
.gs-f-toggle.on{ color:#fff; border-color:var(--gs-red); }
.gs-f-toggle.on .gs-f-knob{ background:var(--gs-red); }
.gs-f-toggle.on .gs-f-knob::after{ left:18px; }

/* ── Medya kütüphanesi modal ── */
.gs-media-ov{
  display:none; position:fixed; inset:0; z-index:100003; background:rgba(0,0,0,.66);
  backdrop-filter:blur(4px); align-items:flex-start; justify-content:center; padding:5vh 1rem;
  font-family:Poppins,system-ui,sans-serif;
}
.gs-media-ov.open{ display:flex; }
.gs-media{
  width:100%; max-width:820px; max-height:86vh; display:flex; flex-direction:column;
  background:var(--gs-bg2); border:1px solid var(--gs-line); border-radius:8px; overflow:hidden;
  box-shadow:none;
}
.gs-media-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.2rem; border-bottom:1px solid var(--gs-line); color:var(--gs-ink); font-size:.95rem; font-weight:600;
}
.gs-media-head i{ color:var(--gs-red); margin-right:.35rem; }
.gs-media-head-r{ display:flex; align-items:center; gap:.6rem; }
.gs-media-up{
  display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; font-family:inherit;
  background:var(--gs-red); color:#fff; border:none; padding:.5rem .9rem; border-radius:8px; font-size:.76rem; font-weight:600;
}
.gs-media-up:hover{ background:#ff2424; }
.gs-media-up:disabled{ opacity:.5; cursor:default; }
.gs-media-x{ cursor:pointer; background:transparent; border:none; color:var(--gs-dim); font-size:1.1rem; }
.gs-media-x:hover{ color:#fff; }
.gs-media-body{ overflow:auto; padding:1.2rem; min-height:200px; }
.gs-media-load,.gs-media-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; min-height:200px; color:var(--gs-dim); font-size:.85rem; }
.gs-media-empty i{ font-size:2.4rem; opacity:.4; }
.gs-media-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:.7rem; }
.gs-media-item{
  cursor:pointer; padding:0; border:2px solid transparent; border-radius:8px; overflow:hidden;
  background:#000; aspect-ratio:1/1; transition:.14s;
}
.gs-media-item:hover{ border-color:var(--gs-red); }
.gs-media-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.gs-spin{ animation:gsSpin 1s linear infinite; }
@keyframes gsSpin{ to{ transform:rotate(360deg); } }

/* ── Bölüm seçici ── */
.gs-pick-ov{
  display:none; position:fixed; inset:0; z-index:100001; background:rgba(0,0,0,.62);
  backdrop-filter:blur(4px); align-items:flex-start; justify-content:center; padding:6vh 1rem;
  font-family:Poppins,system-ui,sans-serif;
}
.gs-pick-ov.open{ display:flex; }
.gs-pick{
  width:100%; max-width:680px; max-height:80vh; overflow:hidden; display:flex; flex-direction:column;
  background:var(--gs-bg2); border:1px solid var(--gs-line); border-radius:8px;
  box-shadow:none;
}
.gs-pick-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.2rem; border-bottom:1px solid var(--gs-line); color:var(--gs-ink);
  font-size:.95rem; font-weight:600;
}
.gs-pick-head i{ color:var(--gs-red); margin-right:.4rem; }
.gs-pick-x{ cursor:pointer; background:transparent; border:none; color:var(--gs-dim); font-size:1.1rem; }
.gs-pick-x:hover{ color:#fff; }
.gs-pick-body{ overflow:auto; padding:1.2rem; }
.gs-pick-grp{ margin-bottom:1.3rem; }
.gs-pick-grp h4{ font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--gs-dim); margin:0 0 .6rem; }
.gs-pick-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:.6rem; }
.gs-pick-card{
  display:flex; flex-direction:column; align-items:center; gap:.55rem; cursor:pointer;
  background:var(--gs-bg); color:var(--gs-ink); border:1px solid var(--gs-line);
  border-radius:8px; padding:1rem .6rem; font-size:.74rem; font-family:inherit; text-align:center; transition:.14s;
}
.gs-pick-card:hover{ border-color:var(--gs-red); background:rgba(238,17,17,.1); }
.gs-pick-card i{ font-size:1.3rem; color:var(--gs-red); }

/* ── Toast ── */
html .in-toast{ z-index:100004; }

.gs-pick--narrow{ max-width:480px; }
.gs-set-actions{ display:flex; gap:.6rem; margin-top:1.4rem; }
.gs-set-actions .gs-bar-btn{ flex:1; justify-content:center; }
.gs-f-in:disabled{ opacity:.6; cursor:not-allowed; }
.gs-sw-pub{ color:#39d353; font-size:.6rem; }
.gs-sw-draft{ color:var(--gs-dim); font-size:.6rem; }
body.gs-is-dirty #gsSaveD{ border-color:#ffb020; color:#ffb020; }

.gs-legal-note{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:100001;
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; max-width:min(720px, calc(100vw - 32px));
  background:var(--gs-bg2); color:var(--gs-ink); border:1px solid var(--gs-line); border-radius:8px;
  padding:.75rem 1rem; font-family:Poppins,system-ui,sans-serif; font-size:.8rem; line-height:1.5;
}
.gs-legal-note > i{ color:var(--gs-red); }
.gs-legal-note span{ flex:1; min-width:220px; }
.gs-legal-note code{ font-size:.72rem; background:rgba(255,255,255,.06); padding:.05rem .35rem; border-radius:5px; }
.gs-legal-note-btn{ color:#fff; background:var(--gs-red); border-radius:8px; padding:.4rem .8rem; text-decoration:none; font-weight:600; font-size:.76rem; white-space:nowrap; }
.gs-legal-note-btn:hover{ filter:brightness(1.1); }

@media(max-width:720px){
  body.gs-editing.gs-ins-open #gs-page{ margin-right:0; }
  .gs-inspector{ width:100%; }
  .gs-bar{ gap:.3rem; padding:0 .45rem; }
  .gs-bar-l,.gs-bar-c,.gs-bar-r{ gap:.3rem; }
  .gs-bar-c{ flex:0 1 auto; }
  .gs-bar-txt,.gs-dev,.gs-bar-count,.gs-bar-sep,.gs-bar-dirty,#gsPreview,.gs-bar-brand{ display:none; }
  .gs-bar-btn{ padding:.45rem .55rem; }
  .gs-bar-exit{ width:auto; padding:.45rem .55rem; }
  .gs-switch-btn{ padding:.4rem .5rem; max-width:34vw; }
  .gs-switch-btn span{ max-width:20vw; }
  .gs-switch-menu{ min-width:220px; max-width:calc(100vw - 16px); }
}