/* embed.html — Bizi Tanıtın / Banner & Embed Kit.
   style.css üstüne kurulur (section/container/btn ortak). */

.embed-intro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.embed-step{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:22px 20px;text-align:left}
.embed-step .es-num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:11px;background:var(--brand-600);color:#fff;font-weight:700;font-family:'Poppins',sans-serif;margin-bottom:12px}
.embed-step h3{margin:0 0 6px;font-size:1.05rem}
.embed-step p{margin:0;color:var(--text-2);font-size:.94rem;line-height:1.5}

/* kontrol çubuğu */
.embed-controls{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:flex-end;justify-content:center;margin:6px auto 30px;max-width:760px}
.embed-ctl{display:flex;flex-direction:column;gap:6px}
.embed-ctl label{font-size:.82rem;font-weight:600;color:var(--text-2)}
.embed-ctl input{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:12px;padding:10px 14px;font-size:.95rem;min-width:240px}
.embed-ctl input:focus{outline:2px solid var(--brand-600);outline-offset:1px}
.seg{display:inline-flex;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:4px}
.seg button{border:0;background:transparent;color:var(--text-2);font-weight:600;font-size:.9rem;padding:8px 16px;border-radius:9px;cursor:pointer;font-family:inherit}
.seg button.is-active{background:var(--brand-600);color:#fff}

/* galeri */
.banner-cat{margin-top:36px}
.banner-cat > h3{font-size:1.15rem;margin:0 0 4px;display:flex;align-items:center;gap:10px}
.banner-cat > p{color:var(--text-2);margin:0 0 18px;font-size:.92rem}
.banner-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;align-items:start}
.banner-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.bc-preview{padding:18px;display:flex;align-items:center;justify-content:center;min-height:150px;background:
  linear-gradient(45deg,#0000 25%,rgba(128,128,128,.06) 0 50%,#0000 0 75%,rgba(128,128,128,.06) 0) 0/22px 22px}
.bc-preview img{max-width:100%;height:auto;box-shadow:0 6px 22px rgba(20,24,32,.10);border-radius:4px}
.bc-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-top:1px solid var(--border)}
.bc-meta .bc-name{font-weight:700;font-size:.95rem}
.bc-meta .bc-dim{color:var(--text-2);font-size:.8rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.bc-actions{display:flex;gap:8px;padding:0 16px 16px}
.bc-actions .btn{flex:1;justify-content:center;padding:10px 12px;font-size:.9rem}
.btn-copy{background:var(--brand-600);color:#fff;border:0;border-radius:11px;cursor:pointer;font-family:inherit;font-weight:600;display:inline-flex;align-items:center;gap:7px}
.btn-copy.copied{background:#12a150}
.btn-dl{border:1px solid var(--border);background:transparent;color:var(--text);border-radius:11px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-weight:600}
.bc-actions svg{width:15px;height:15px}

/* kod ön-izleme (accordion) */
.bc-code{margin:0 16px 16px;display:none}
.bc-code.open{display:block}
.bc-code pre{margin:0;background:var(--code-bg,#0d1117);color:#c9d1d9;border-radius:12px;padding:14px;font-size:.72rem;line-height:1.55;overflow:auto;white-space:pre;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.bc-toggle-code{background:none;border:0;color:var(--brand-600);font-weight:600;font-size:.82rem;cursor:pointer;padding:0 16px 14px;text-align:left;font-family:inherit}

/* widget bölümü */
.widget-demo{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;margin-top:24px}
.widget-stage{display:flex;align-items:center;justify-content:center;padding:30px;background:var(--surface);border:1px solid var(--border);border-radius:20px;min-height:220px}
.widget-code-box{background:#0d1117;border-radius:16px;padding:18px;position:relative}
.widget-code-box pre{margin:0;color:#c9d1d9;font-size:.8rem;line-height:1.6;overflow:auto;white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.widget-code-box .btn-copy{position:absolute;top:12px;right:12px;padding:8px 12px;font-size:.8rem}

/* kullanım kuralları */
.rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px}
.rule-col{border:1px solid var(--border);border-radius:16px;padding:20px}
.rule-col h4{margin:0 0 12px;display:flex;align-items:center;gap:8px}
.rule-col ul{margin:0;padding-left:18px}
.rule-col li{margin:7px 0;color:var(--text-2);line-height:1.5}
.rule-do h4{color:#12a150}
.rule-dont h4{color:#e5484d}

.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:#141820;color:#fff;padding:12px 20px;border-radius:12px;font-weight:600;font-size:.92rem;box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:.28s;z-index:120}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:820px){
  .embed-intro-grid{grid-template-columns:1fr}
  .widget-demo{grid-template-columns:1fr}
  .rules-grid{grid-template-columns:1fr}
}