/* Demo sayfasındaki "Kendi isimlerinizle deneyin" çubuğu ve formu. Şablondan bağımsız, sade bir görünüm. */
.try { --t-ink:#1d1b19; --t-line:#e4e0da; --t-acc:#1d1b19; font:500 15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--t-ink); }
body:has(.try) .invite { padding-bottom:calc(120px + env(safe-area-inset-bottom)); }
body:has(.try) .music { bottom:calc(84px + env(safe-area-inset-bottom)); }
.try-bar { position:fixed; left:50%; bottom:calc(14px + env(safe-area-inset-bottom)); z-index:66; translate:-50% 0; display:flex; gap:6px; width:max-content; max-width:calc(100vw - 20px);
  padding:6px; border-radius:99px; background:rgb(255 255 255 / .9); box-shadow:0 10px 30px rgb(0 0 0 / .22), 0 0 0 1px rgb(0 0 0 / .06); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.try-bar > * { display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 16px; border:0; border-radius:99px; font-family:inherit; font-size:14px; font-weight:600; line-height:1.1; text-decoration:none; cursor:pointer; white-space:nowrap; }
.try-open { background:var(--t-acc); color:#fff; }
.try-open svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.try-order { background:#25d366; color:#fff; }
.try-order:hover { background:#1fb457; }
@media (max-width:400px) { .try-bar > * { padding:0 12px; font-size:13px; } .try-open svg { display:none; } }

.try-sheet { position:fixed; left:0; right:0; bottom:0; z-index:80; display:grid; gap:12px; width:min(100%,520px); max-height:88svh; margin:0 auto; overflow:auto;
  padding:18px 18px calc(18px + env(safe-area-inset-bottom)); border-radius:20px 20px 0 0; background:#fff; color:var(--t-ink); box-shadow:0 -10px 40px rgb(0 0 0 / .25);
  animation:trUp .35s cubic-bezier(.2,.8,.2,1); }
.try-sheet[hidden] { display:none; }
@keyframes trUp { from { transform:translateY(40px); opacity:0; } }
.try-shade { position:fixed; inset:0; z-index:79; background:rgb(0 0 0 / .35); }
.try-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.try-head b { display:block; font-size:18px; }
.try-head small { color:#7a746c; font-size:13px; }
.try-x { width:38px; height:38px; flex:none; border:0; border-radius:50%; background:#f2efea; color:var(--t-ink); font-size:22px; line-height:1; cursor:pointer; }
.try-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.try-grid[hidden] { display:none; }
.try-f { display:grid; gap:4px; min-width:0; font-size:13px; color:#5d5750; }
.try-f.wide { grid-column:1/-1; }
.try-f input, .try-f select { width:100%; min-width:0; min-height:46px; padding:8px 12px; border:1px solid var(--t-line); border-radius:10px; background:#faf9f7; color:var(--t-ink); font-family:inherit; font-size:16px; font-weight:500; }
.try-f input:focus, .try-f select:focus { outline:none; border-color:var(--t-ink); background:#fff; }
.try-colors { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; border:0; }
.try-colors legend { margin-bottom:6px; font-size:13px; color:#5d5750; }
.try-colors label { position:relative; display:flex; align-items:center; gap:6px; padding:5px 10px 5px 5px; border:1px solid var(--t-line); border-radius:99px; cursor:pointer; font-size:13px; }
.try-colors input { position:absolute; opacity:0; }
.try-colors span { width:24px; height:24px; border-radius:50%; background:conic-gradient(var(--a) 0 50%, var(--b) 0 75%, var(--c) 0); box-shadow:inset 0 0 0 1px rgb(0 0 0 / .1); }
.try-colors label:has(input:checked) { border-color:var(--t-ink); box-shadow:0 0 0 1px var(--t-ink); }
.try-colors label:has(input:focus-visible) { outline:2px solid #3b82f6; outline-offset:2px; }
.try-check { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:14px; cursor:pointer; }
.try-check input { width:20px; height:20px; margin:0; accent-color:var(--t-acc); }
.try-check small { flex-basis:100%; padding-left:30px; font-size:12px; color:#5d5750; }
.try-go { min-height:52px; border:0; border-radius:12px; background:var(--t-acc); color:#fff; font-family:inherit; font-size:16px; font-weight:600; cursor:pointer; }
.try-note { margin:0; color:#7a746c; font-size:12.5px; text-align:center; }