/* © 2026 IG Tools — All rights reserved. */
/* Lyrics Video — the editor shell (UI_RULES.md: one top bar, stage, dock tabs that open bottom sheets).
   The top bar / dock rules are the same ones Retro Effect's shell.css uses, so the tool looks like its siblings. */
/* lyric fonts: Montserrat 800 italic (the site's own latin file first) and Lora italic; Turkish letters come from the latin-ext
   subsets (claude-notes/fonts_turkish_subset.md: one @font-face per subset, with unicode-range) */
@font-face{font-family:"LV Mont";src:url(../fonts/montserrat-800i-latin.woff) format('woff'),url(https://cdn.jsdelivr.net/npm/@fontsource/montserrat/files/montserrat-latin-800-italic.woff2) format('woff2');font-weight:800;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"LV Mont";src:url(https://cdn.jsdelivr.net/npm/@fontsource/montserrat/files/montserrat-latin-ext-800-italic.woff2) format('woff2');font-weight:800;font-style:italic;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* more lyric fonts (Osman 2026-10-27: "daha iyi yazi fontlari"): Playfair Display (Zarif), Anton (Manşet), Kaushan Script
   (Fırça), Space Mono (Mono), Unbounded (Geniş) — all with Turkish letters (latin-ext); fetched only when used */
@font-face{font-family:"LV Serif";src:url(https://cdn.jsdelivr.net/npm/@fontsource/playfair-display/files/playfair-display-latin-700-italic.woff2) format('woff2');font-weight:700;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"LV Serif";src:url(https://cdn.jsdelivr.net/npm/@fontsource/playfair-display/files/playfair-display-latin-ext-700-italic.woff2) format('woff2');font-weight:700;font-style:italic;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"LV Anton";src:url(https://cdn.jsdelivr.net/npm/@fontsource/anton/files/anton-latin-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"LV Anton";src:url(https://cdn.jsdelivr.net/npm/@fontsource/anton/files/anton-latin-ext-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"LV Brush";src:url(https://cdn.jsdelivr.net/npm/@fontsource/kaushan-script/files/kaushan-script-latin-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"LV Brush";src:url(https://cdn.jsdelivr.net/npm/@fontsource/kaushan-script/files/kaushan-script-latin-ext-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"LV Mono";src:url(https://cdn.jsdelivr.net/npm/@fontsource/space-mono/files/space-mono-latin-700-normal.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"LV Mono";src:url(https://cdn.jsdelivr.net/npm/@fontsource/space-mono/files/space-mono-latin-ext-700-normal.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"LV Wide";src:url(https://cdn.jsdelivr.net/npm/@fontsource/unbounded/files/unbounded-latin-800-normal.woff2) format('woff2');font-weight:800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"LV Wide";src:url(https://cdn.jsdelivr.net/npm/@fontsource/unbounded/files/unbounded-latin-ext-800-normal.woff2) format('woff2');font-weight:800;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--logo:#E8445A}

/* ---- top bar ---- */
.mcs-top{display:flex;align-items:center;gap:6px;min-height:calc(56px + var(--ad-handle,0px));padding:var(--ad-handle,0px) 8px 0;box-sizing:border-box;position:relative;z-index:30;margin:calc(var(--ad-gap,0px) - 26px) -18px 18px;
  background:var(--chrome-solid,var(--panel));border-bottom:1px solid var(--line)}
.mcs-home{order:1;display:flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 10px;border:0;border-radius:12px;background:none;color:var(--accent);cursor:pointer}
.mcs-tool{order:3;display:flex;align-items:center;gap:8px;font:700 17px/1 var(--sans);color:var(--text);padding-left:2px}
.mcs-tool svg{flex:none;color:var(--logo)}
.mcs-new{order:2;display:none}
.mcs-mode{order:3;display:none;gap:2px;padding:3px;border-radius:13px;background:var(--fill)}
.mcs-mode button{min-height:40px;padding:0 9px;border:0;border-radius:10px;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:6px;font:600 13px/1 var(--sans);cursor:pointer}
.mcs-mode button.on{background:var(--panel);color:var(--text);box-shadow:var(--sh)}
#mcsDl{order:5;margin-left:auto;display:none}
.mcs-lang{order:6;display:flex;align-items:center;gap:2px;margin-left:auto;background:var(--fill);border-radius:10px;padding:2px 2px 2px 8px}
.mcs-globe{display:flex;color:var(--muted)}
.mcs-lang button{border:0;background:none;color:var(--muted);font:600 13px/1 var(--sans);padding:8px 10px;border-radius:8px;cursor:pointer}
.mcs-lang button.on{background:var(--panel);color:var(--text);box-shadow:var(--sh)}
.mcs-newbtn{display:flex!important;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0;border:0;border-radius:12px!important;background:none;box-shadow:none;color:var(--text);cursor:pointer;font:600 14px/1 var(--sans)}
.mcs-newt{display:none}
.wrap>header{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mcs-ask{text-align:center;padding:4px 0 6px}
.mcs-ask-ic{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:18px;background:rgba(255,59,48,.12);color:#FF3B30;margin-bottom:10px}
.mcs-ask b{display:block;font:700 19px/1.2 var(--sans);color:var(--text)}
.mcs-ask p{margin:8px 0 0;font:400 14px/1.45 var(--sans);color:var(--muted)}
.mcs-ask-btns{display:flex;gap:8px;margin-top:18px}
.mcs-ask-btns .ig-btn{flex:1;min-height:52px}
.ig-btn.mcs-danger{background:#FF3B30;color:#fff}
.lv-tagline{max-width:560px;margin:2px auto 14px;text-align:center;color:var(--muted);font:400 15px/1.45 var(--sans)}
.drop .icon.dz-tool{color:var(--logo)}

/* ---- editor (body.ready) ---- */
.lv-stage{display:none}
body.ready .lv-stage{display:block}
body.ready{padding:var(--ad-top,0px) 0 calc(84px + var(--ad-bot,0px))!important}
body.ready .mcs-top{margin:0;position:sticky;top:var(--ad-top,0px)}
body.ready .wrap{padding:0 12px}
body.ready .mcs-tool,body.ready .mcs-lang{display:none}
body.ready .mcs-new,body.ready #mcsDl,body.ready .mcs-mode{display:flex}
body.ready .drop,body.ready .lv-tagline{display:none}
@media(max-width:380px){.mcs-mode button span,.mcs-top .ig-btn.pri span{display:none}.mcs-top .ig-btn.pri{padding:0;width:44px}}

.lv-box{position:relative;margin:10px auto 0;width:fit-content;max-width:100%;touch-action:manipulation}
.lv-box canvas{display:block;max-width:100%;max-height:max(300px,calc(100vh - 330px));max-height:max(300px,calc(100dvh - 330px));border-radius:14px;background:#000;box-shadow:var(--sh-hi,0 8px 30px rgba(0,0,0,.25))}
.lv-hint{position:absolute;left:12px;top:12px;max-width:70%;padding:7px 11px;border-radius:12px;background:rgba(28,28,30,.72);color:#fff;font:600 13px/1.3 var(--sans);display:none}
.lv-hint.on{display:block}
/* player row + Kırp: Retro Effect's (retroeffect/styles.css .vpctl / .vptrim), so both tools look and work the same */
.lv-ctl,.lv-trimwrap{max-width:900px;margin-left:auto;margin-right:auto}
.vpctl{display:flex;align-items:center;gap:10px;margin-top:8px}
.vpctl input[type=range]{flex:1;min-width:60px}
.vpctl .vptime{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.vpctl .btn-ghost{min-width:40px;min-height:40px;padding:7px 10px;display:flex;align-items:center;justify-content:center}
.btn-ghost{background:var(--panel);border:1px solid var(--line);color:var(--text);font-size:13px;font-weight:500;border-radius:var(--r-control);cursor:pointer;box-shadow:var(--sh)}
.btn-ghost:active{transform:scale(.96)}
.slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:var(--r-pill);background:var(--fill);border:none;outline:none}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;cursor:pointer;border:.5px solid rgba(0,0,0,.06);box-shadow:0 1px 3px rgba(0,0,0,.2),0 3px 8px rgba(0,0,0,.14)}
.slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;cursor:pointer;border:.5px solid rgba(0,0,0,.06);box-shadow:0 1px 3px rgba(0,0,0,.2),0 3px 8px rgba(0,0,0,.14)}
.vttop{display:flex;align-items:baseline;justify-content:space-between;margin-top:12px;font-size:12px;color:var(--muted)}
.vttop .vtl{font-weight:600}.vttop .vtxt{font-variant-numeric:tabular-nums}
.vptrim{position:relative;height:40px;margin:4px 12px 0;touch-action:none;user-select:none;-webkit-user-select:none}
.vptrim .vtk{position:absolute;left:0;right:0;top:15px;height:10px;border-radius:5px;background:var(--line)}
.vptrim .vtsel{position:absolute;top:11px;height:18px;border-top:3px solid var(--accent);border-bottom:3px solid var(--accent);background:rgba(0,122,255,.16);box-sizing:border-box}
.vptrim .vth{position:absolute;top:5px;width:16px;height:30px;margin-left:-8px;border-radius:6px;background:var(--accent);cursor:ew-resize;touch-action:none;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.vptrim .vth::after{content:'';position:absolute;left:6px;top:9px;width:4px;height:12px;border-left:1.5px solid #fff;border-right:1.5px solid #fff;box-sizing:border-box}
.lv-trimwrap[hidden]{display:none}
.lv-dur{display:flex;align-items:center;gap:8px;max-width:900px;margin:8px auto 0;font-size:12px;color:var(--muted)}
.lv-dur .vtl{font-weight:600;margin-right:auto}
.lv-dur .v{min-width:48px;text-align:center;font:600 13px/1 var(--mono,ui-monospace,monospace);color:var(--text)}
.lv-dur .lv-nudge{min-width:44px;min-height:40px}
.lv-durfit{min-height:40px;padding:0 12px;border:0;border-radius:10px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);font:600 13px/1 var(--sans);cursor:pointer}
.lv-durfit[hidden]{display:none}
body.mcs-prev .lv-dur{display:none!important}
body.mcs-prev .lv-trimwrap{display:none!important}
/* full screen: the canvas box; iOS Safari has no element fullscreen → fixed class */
.vpfsx{display:none;position:absolute;top:12px;right:12px;z-index:3;width:40px;height:40px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:18px;cursor:pointer}
.lv-box:fullscreen,.lv-box.vpfs{position:fixed;inset:0;z-index:2147483000;width:100vw;height:100vh;max-width:none;margin:0;display:flex;justify-content:center;align-items:center;background:#000}
.lv-box:fullscreen canvas,.lv-box.vpfs canvas{max-width:100vw;max-height:100vh;border-radius:0;box-shadow:none}
.lv-box:fullscreen .vpfsx,.lv-box.vpfs .vpfsx{display:block}
/* theme button (Retro Effect's top bar) */
.mcs-theme{order:6;margin-left:auto;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:12px;background:none;color:var(--text);cursor:pointer;padding:0;margin-left:auto}
/* theme + TR/EN sit together on the right (Osman 2026-10-27: the sun icon floated in the middle of the landing bar) */
.mcs-lang{margin-left:0}
body.ready .mcs-theme{display:none}
@media(min-width:900px){body.ready .mcs-theme{display:flex;margin-left:6px}}
@media(min-width:900px){body.lv-step .mcs-theme{margin-left:auto}}   /* Şarkı step: no İndir button to push them right */
.lv-time{display:flex;justify-content:space-between;margin-top:4px;font:600 12px/1 var(--mono,ui-monospace,Menlo,monospace);color:var(--muted)}

/* dock */
.mcs-dock{display:none}
body.ready .mcs-dock{display:flex;position:fixed;left:0;right:0;bottom:var(--ad-bot,0px);z-index:30;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));
  background:var(--chrome-solid,var(--panel));border-top:1px solid var(--line)}
.mcs-tab{flex:1;min-height:56px;border:0;border-radius:12px;background:transparent;color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:600 12px/1 var(--sans);cursor:pointer}
.mcs-tab.on{color:var(--accent);background:var(--fill)}
body.mcs-prev .mcs-dock{display:none!important}
@media(min-width:900px){body.ready .mcs-dock{max-width:560px;margin:0 auto;border:1px solid var(--line);border-radius:18px;bottom:calc(14px + var(--ad-bot,0px));box-shadow:var(--sh-hi)}}
@media(min-width:900px){
  .mcs-top{padding:0 max(20px,calc((100% - 1100px)/2));gap:10px}
  body.ready .mcs-tool,body.ready .mcs-lang{display:flex}
  body.ready #mcsDl{margin-left:auto}
  .mcs-new{order:4;margin-left:6px}
  .mcs-newbtn{padding:0 16px;border:1px solid var(--line)!important;border-radius:22px!important;background:var(--panel)!important;box-shadow:var(--sh)!important;min-height:40px}
  .mcs-newt{display:inline}
  body.ready .mcs-lang{margin-left:0}
}

/* sheets */
.ig-sheet.mcs-s .ig-sh-box{max-height:62vh}
/* a tab sheet never blocks the video: scrub / play while it is open; anything else you touch closes it (app.js) */
.ig-sheet.mcs-s{pointer-events:none}
.ig-sheet.mcs-s .ig-sh-box{pointer-events:auto}
@media(min-width:900px){.ig-sheet.mcs-s .ig-sh-box{top:auto;bottom:var(--sh-b,96px);left:auto;right:var(--sh-r,24px);transform:none;max-height:var(--sh-mh,calc(100vh - 200px))}}
.lv-in{display:flex;gap:8px}
.lv-in input[type=url],.lv-in input[type=text],.lv-ta{flex:1;min-width:0;height:46px;border:1px solid var(--line);border-radius:12px;background:var(--fill);color:var(--text);font:500 16px/1.2 var(--sans);padding:0 12px;outline:0;box-sizing:border-box}
.lv-ta{height:120px;padding:10px 12px;resize:vertical;width:100%;font:500 15px/1.4 var(--sans)}
.lv-in input:focus,.lv-ta:focus{border-color:var(--logo)}
.lv-song{display:flex;gap:12px;align-items:center;margin-top:12px;padding:10px;border-radius:14px;background:var(--fill)}
.lv-song img{width:60px;height:60px;border-radius:10px;object-fit:cover;flex:none;background:#333}
.lv-song b{display:block;font:700 16px/1.2 var(--sans)}
.lv-song small{display:block;color:var(--muted);font:500 13px/1.3 var(--sans);margin-top:2px}
.lv-ok{color:#1E8E3E;font:600 12px/1.3 var(--sans);margin-top:4px}
.lv-warn{color:#C46A00;font:600 12px/1.3 var(--sans);margin-top:4px}
.lv-msg{margin:10px 2px 0;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,#ff453a 12%,transparent);font:500 14px/1.4 var(--sans)}
.lv-sub{font:400 13px/1.45 var(--sans);color:var(--muted);margin:6px 0 0}
.lv-range{display:flex;align-items:center;gap:8px;margin-top:8px}
.lv-range input[type=range]{flex:1;accent-color:var(--logo)}
.lv-range .v{min-width:56px;text-align:right;font:600 14px/1 var(--mono,ui-monospace,monospace)}
.lv-nudge{min-width:44px;min-height:40px;border:0;border-radius:10px;background:var(--fill);color:var(--text);font:700 15px/1 var(--sans);cursor:pointer}
.lv-sw{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:6px 12px;border-radius:14px;background:var(--fill);margin:0 0 8px;font:600 15px/1.25 var(--sans)}
.lv-sw small{display:block;font:500 12px/1.3 var(--sans);color:var(--muted);margin-top:2px}
.lv-sw input{appearance:none;-webkit-appearance:none;width:51px;height:31px;border-radius:16px;background:var(--fill-hi,rgba(120,120,128,.32));position:relative;flex:none;cursor:pointer;transition:background .2s}
.lv-sw input::after{content:"";position:absolute;left:2px;top:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:left .2s}
.lv-sw input:checked{background:#34C759}
.lv-sw input:checked::after{left:22px}
.lv-chips{display:flex;flex-wrap:wrap;gap:6px}
.lv-chip{min-height:38px;padding:0 12px;border-radius:19px;border:1px solid var(--line);background:var(--panel);color:var(--text);font:600 13px/1 var(--sans);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.lv-chip.on{background:var(--text);color:var(--panel);border-color:var(--text)}
.lv-chip i{width:16px;height:16px;border-radius:50%;display:inline-block;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.lv-line{padding:10px;border-radius:14px;background:var(--fill);margin:0 0 8px}
.lv-line .hd{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.lv-line .tm{font:600 13px/1 var(--mono,ui-monospace,monospace);min-width:52px}
.lv-line .sp{flex:1}
.lv-line input[type=text]{width:100%;height:40px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);font:500 15px/1.2 var(--sans);padding:0 10px;box-sizing:border-box;margin-bottom:8px}
.lv-line .words{display:flex;flex-wrap:wrap;gap:5px}
.lv-line .words button{min-height:32px;padding:0 9px;border-radius:9px;border:1px solid var(--line);background:var(--panel);color:var(--text);font:600 12.5px/1 var(--sans);cursor:pointer}
.lv-line .words button.on{background:var(--logo);border-color:var(--logo);color:#fff}
.lv-line.cur{outline:2px solid var(--logo)}
.lv-seg2{display:flex;background:var(--panel);border-radius:10px;padding:2px;gap:2px}
.lv-seg2 button{min-height:34px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:600 12.5px/1 var(--sans);padding:0 10px;cursor:pointer}
.lv-seg2 button.on{background:var(--fill-hi,rgba(120,120,128,.25));color:var(--text)}
.lv-file{display:flex;align-items:center;gap:10px}
.lv-file .nm{flex:1;min-width:0;font:600 14px/1.3 var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-pbar{height:6px;border-radius:3px;background:rgba(120,120,128,.25);overflow:hidden;margin:12px 0 4px;display:none}
.proc-modal.lv-p .lv-pbar{display:block}
.lv-pbar i{display:block;height:100%;width:0;background:var(--logo);border-radius:3px;transition:width .2s}
.lv-cancel{display:none;margin:12px auto 0}
.proc-modal.lv-p .lv-cancel{display:inline-flex}

/* YouTube player for the preview song (visible, >=200px tall as YouTube's rules ask) */
.lv-yt{max-width:760px;margin:12px auto 0;display:flex;align-items:center;gap:12px}
.lv-yt[hidden]{display:none}
.lv-yt #lvYtP,.lv-yt iframe{width:356px;max-width:62%;height:200px;border:0;border-radius:12px;background:#000;flex:none}
.lv-yt small{color:var(--muted);font:500 12.5px/1.35 var(--sans)}
.lv-ig{margin:0 0 10px;padding-left:20px;display:flex;flex-direction:column;gap:10px;font:500 14.5px/1.4 var(--sans)}

/* the "Nasıl" note is for the landing page only (Retro Effect hides it in the editor too) */
body.ready .wrap>.note{display:none}

/* the stand-alone "Otto Tools" strip (shared/sitebar.js) is not used here: the top bar already has Ana sayfa (same as Retro Effect shell.css) */
.igsb{display:none!important}

/* ================= v2 — simpler flow (Osman 2026-10-27: "tool cok karisik ... daha kolay kullanimli", design/lyrics-video S1–S7, P1–P3) ================= */
/* landing: 1 Video · 2 Şarkı · 3 İndir */
.lv-steps{display:flex;justify-content:center;gap:14px;margin:14px 0 0;font:600 13px/1 var(--sans);color:var(--muted)}
.lv-steps span{display:flex;align-items:center;gap:6px}
.lv-steps b{width:24px;height:24px;border-radius:12px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font:700 12px/1 var(--sans)}
body.ready .lv-steps{display:none}

/* step 2: the song (full page, the editor waits behind it) */
.lv-stepw{display:none}
body.lv-step .lv-stepw{display:block;max-width:960px;margin:12px auto 24px;padding:0 4px}
body.lv-step .lv-stage,body.lv-step .mcs-dock,body.lv-step #mcsDl,body.lv-step .mcs-mode{display:none!important}
.lv-dots{display:flex;gap:6px;margin:4px 0 10px}
.lv-dots i{width:8px;height:8px;border-radius:4px;background:var(--line)}
.lv-dots i.on{width:22px;background:var(--accent)}
.lv-stepw h2{margin:0;font:800 24px/1.15 var(--sans);letter-spacing:-.3px}
.lv-stepw h3,.ig-sheet .lv-linesbox h3{margin:16px 0 0;font:800 18px/1.2 var(--sans)}
.lv-st-grid{display:block}
@media(min-width:900px){.lv-st-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:start}.lv-stepw h2{font-size:30px}.lv-st-b h3{margin-top:4px}}
.lv-paste{display:flex;align-items:center;gap:8px;height:54px;margin-top:14px;padding:0 6px 0 12px;border:1.5px solid var(--line);border-radius:14px;background:var(--panel)}
.lv-paste:focus-within{border-color:var(--accent)}
.lv-paste .lv-yticon{color:var(--muted);display:flex}
.lv-paste input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--text);font:500 16px/1 var(--sans);outline:0}
.lv-pastebtn{display:flex;align-items:center;gap:6px;min-height:42px;padding:0 12px;border:0;border-radius:10px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);font:600 14px/1 var(--sans);cursor:pointer}
.lv-msg.wait{background:var(--fill)}
.lv-tip{display:flex;gap:8px;align-items:flex-start;margin-top:12px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--accent) 8%,var(--panel));color:var(--text);font:500 13.5px/1.4 var(--sans)}
.lv-tip svg{flex:none;margin-top:1px;color:var(--accent)}
.lv-tip.warm{background:#FFF6E5;color:#5C3A00;margin-top:0}
.lv-tip.warm svg{color:#B86E00}
[data-theme="dark"] .lv-tip.warm{background:#3A2C12;color:#FFE2A8}
.lv-song{background:var(--panel);box-shadow:var(--sh)}
.lv-ok{display:flex;align-items:center;gap:4px}
.lv-x{flex:none;width:44px;height:44px;border:0;border-radius:12px;background:var(--fill);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer}
.lv-file{margin-top:12px}
.lv-filebtn{flex:1;display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border:1px dashed var(--line);border-radius:14px;color:var(--text);cursor:pointer}
.lv-lines{margin-top:10px;max-height:min(46vh,420px);overflow:auto;border-radius:16px;background:var(--panel);box-shadow:var(--sh);-webkit-overflow-scrolling:touch}
.lv-lr{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:0 14px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--text);font:500 15px/1.3 var(--sans);text-align:left;cursor:pointer}
.lv-lr:last-child{border-bottom:0}
.lv-lr time{flex:none;width:44px;font:600 12px/1 var(--mono,ui-monospace,monospace);color:var(--muted)}
.lv-lr span{flex:1;min-width:0}
.lv-lr i{flex:none;width:22px;height:22px;border-radius:11px;border:2px solid var(--line);box-sizing:border-box}
.lv-lr.on{background:color-mix(in srgb,var(--accent) 9%,transparent)}
.lv-lr.on i{border:7px solid var(--accent)}
.lv-prim{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;margin-top:14px;border:0;border-radius:16px;background:var(--accent);color:#fff;font:600 17px/1 var(--sans);cursor:pointer}
.lv-prim:disabled{background:var(--fill);color:var(--muted);cursor:default}
.lv-link{display:block;width:100%;min-height:44px;margin-top:4px;border:0;background:none;color:var(--accent);font:600 15px/1 var(--sans);cursor:pointer}

/* Sözler: one card per line, words as chips (coloured = in front of the person) */
.lv-card{padding:10px 12px;margin:10px 0 0;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.lv-ch{display:flex;align-items:center;gap:8px}
.lv-ch b{flex:1;min-width:0;font:600 14px/1.3 var(--sans)}
.lv-ct{flex:none;min-height:32px;padding:0 8px;border:0;border-radius:8px;background:var(--fill);color:var(--muted);font:600 12px/1 var(--mono,ui-monospace,monospace);cursor:pointer}
.lv-ch .lv-x{width:40px;height:40px}
.lv-card input[type=text]{width:100%;height:42px;margin-top:8px;border:1px solid var(--line);border-radius:10px;background:var(--fill);color:var(--text);font:500 15px/1.2 var(--sans);padding:0 10px;box-sizing:border-box}
.lv-cw{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.lv-cw button{display:inline-flex;align-items:center;gap:5px;min-height:38px;padding:0 11px;border:1px solid var(--line);border-radius:10px;background:var(--fill);color:var(--text);font:700 13px/1 var(--sans);text-transform:uppercase;cursor:pointer}
.lv-cw button.f{background:#FFF1D2;border-color:#E8A53A;color:#5C3A00}
[data-theme="dark"] .lv-cw button.f{background:#4A3510;border-color:#E8A53A;color:#FFE2A8}
.lv-syncrow{display:flex;align-items:center;gap:8px;margin-top:14px;padding:10px 12px;border-radius:14px;background:var(--fill)}
.lv-syncrow>div{flex:1;min-width:0}
.lv-syncrow b{display:block;font:600 14px/1.3 var(--sans)}
.lv-syncrow small{display:block;font:500 12px/1.3 var(--sans);color:var(--muted)}
.lv-syncrow .v{min-width:52px;text-align:center;font:600 13px/1 var(--mono,ui-monospace,monospace)}
.lv-more{margin-top:14px}
.lv-more summary{min-height:44px;display:flex;align-items:center;font:600 14px/1 var(--sans);color:var(--accent);cursor:pointer}

/* Stil */
.lv-two{display:flex;gap:8px}
.lv-two button{flex:1;min-height:48px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);cursor:pointer}
.lv-two button.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--panel));color:var(--accent)}
.lv-two .lv-bold{font:italic 800 18px/1 "LV Mont",Montserrat,sans-serif;text-transform:uppercase}
.lv-two .lv-serif{font:italic 700 18px/1 "LV Serif","Playfair Display",Georgia,serif}
.lv-vrow{display:flex;align-items:center;gap:10px;min-height:44px}
.lv-vrow>span:first-of-type{width:56px;font:500 13.5px/1 var(--sans)}
.lv-vrow input{flex:1}
.lv-vrow .v{width:44px;text-align:right;font:600 12px/1 var(--mono,ui-monospace,monospace);color:var(--muted)}

/* İndir */
.lv-qgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.lv-qgrid button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:68px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);cursor:pointer}
.lv-qgrid button b{font:600 13.5px/1 var(--sans)}
.lv-qgrid button small{font:500 10.5px/1 var(--sans);color:var(--muted)}
.lv-qgrid button.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--panel));color:var(--accent)}
.lv-ignote{display:flex;gap:12px;align-items:flex-start;margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:14px}
.lv-ignote b{font:600 14px/1.3 var(--sans)}
.lv-ignote p{margin:3px 0 0;font:400 13px/1.45 var(--sans);color:var(--muted)}
.lv-igic{flex:none;width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,#8A3FFC,#FF4D8D 55%,#FF9A3D);color:#fff;display:flex;align-items:center;justify-content:center}

/* palette chips: two dots (big words / small words) */
.lv-pal i+i{margin-left:-8px}
.lv-pal i{box-shadow:0 0 0 2px var(--panel),0 0 0 3px rgba(0,0,0,.15)}

/* landing = the shared entry screen (shared/entryfan.js), like Retro Effect: the old header stays in the DOM off-screen
   (h1 for SEO, TR/EN handlers), the "Nasıl" note is not shown */
.wrap>header{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap>.note{display:none!important}

/* a hidden line (eye off): stays in the list, faded, its words not shown in the video */
.lv-card.lv-off{opacity:.55}
.lv-card.lv-off .lv-cw{display:none}
.lv-card.lv-off .lv-ch b{text-decoration:line-through;text-decoration-thickness:1.5px}
.lv-yt small.lv-yterr{color:#C2410C}

/* the YouTube player floats while it is off screen and the preview plays (≥200 px tall: YouTube's minimum player size) */
.lv-yt.lv-ytfloat{position:fixed;z-index:31;right:12px;bottom:calc(92px + var(--ad-bot,0px) + env(safe-area-inset-bottom,0px));margin:0;
  padding:6px;border-radius:16px;background:var(--panel);box-shadow:var(--sh-hi);max-width:none}
.lv-yt.lv-ytfloat small{display:none}
.lv-yt.lv-ytfloat #lvYtP,.lv-yt.lv-ytfloat iframe{width:356px;max-width:calc(100vw - 36px);height:200px}
@media(min-width:900px){.lv-yt.lv-ytfloat{right:auto;left:16px;bottom:calc(16px + var(--ad-bot,0px))}}   /* the empty left side, not over the player buttons */

/* PC: the text under the tool (SEO prose, promo) in the same centred 760px column as every other tool
   (colorgrade/shell.css) — it sat on the left edge of the wide page (Osman, 2026-10-27: "alttaki yazılar ortada değil") */
@media(min-width:900px){
  body .promo,body .wrap>.seo{max-width:760px;margin-left:auto;margin-right:auto}
}

/* The entry screen (shared/entryfan.js) replaces the old "Fotoğraf ekle" box once the page's scripts have loaded; until then
   the old box is not shown, so the old look never flashes for a second (Osman, 2026-10-27: "1-2 sn eskisi görünüyor").
   If the entry script never runs, the box shows anyway after 3 s. */
@keyframes efShow{to{visibility:visible}}
body:not(.ready) #drop{visibility:hidden;animation:efShow 0s 3s forwards}
body:not(.ready) .ef-btns>#drop{visibility:visible;animation:none}

/* font picker: a grid of samples, each in its own font */
.lv-fonts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.lv-font{min-height:64px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;padding:6px 4px}
.lv-font b{line-height:1.05;white-space:nowrap}
.lv-font span{font:500 11.5px/1 var(--sans);color:var(--muted)}
.lv-font.on{border-color:var(--text);box-shadow:inset 0 0 0 1px var(--text)}
/* music-video offset (YouTube video longer than the track) */
.lv-clip{margin-top:10px;padding:10px 12px;border-radius:14px;background:var(--fill);display:flex;flex-direction:column;gap:8px}
.lv-clip b{display:block;font:600 14px/1.3 var(--sans)}
.lv-clip small{display:block;font:500 12px/1.35 var(--sans);color:var(--muted)}
.lv-cliprow{display:flex;align-items:center;gap:8px}
.lv-cliprow .v{min-width:64px;text-align:center;font:600 13px/1 var(--mono,ui-monospace,monospace)}
.lv-cliprow .ig-btn{margin-left:auto}
.lv-tapnow{min-height:84px;border:0;border-radius:16px;background:var(--accent,#007AFF);color:#fff;font:700 22px/1.1 var(--sans);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer}
.lv-tapnow small{color:rgba(255,255,255,.85);font:500 13px/1.3 var(--sans);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 10px}
/* control bar on the video (Osman 2026-10-27: "bu barı video üstüne alalım, tam ekranda bar görünmüyor") */
.lv-box .lv-ctl{position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;max-width:none;padding:28px 10px 10px;gap:8px;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.6));border-radius:0 0 14px 14px;transition:opacity .25s}
.lv-box .lv-ctl .btn-ghost{background:rgba(0,0,0,.38);border:0;color:#fff;box-shadow:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lv-box .lv-ctl .vptime{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.lv-box:fullscreen .lv-ctl,.lv-box.vpfs .lv-ctl{border-radius:0;padding:40px max(16px,env(safe-area-inset-left)) max(14px,env(safe-area-inset-bottom))}
.lv-box.lv-idle .lv-ctl{opacity:0;pointer-events:none}
.lv-box.lv-idle{cursor:none}
/* line marks on the seek bar */
.lv-scrubw{position:relative;flex:1;min-width:60px;display:flex;align-items:center}
.lv-scrubw input[type=range]{flex:1;width:100%;min-width:0}
.lv-marks{position:absolute;left:12px;right:12px;top:50%;height:0;pointer-events:none}
.lv-mk{position:absolute;top:-13px;width:16px;height:26px;margin-left:-8px;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto}
.lv-mk::before{content:"";position:absolute;left:6.5px;top:6px;width:3px;height:14px;border-radius:2px;background:#F5B83D;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.lv-mk:hover::before{background:#FFD36B;height:16px;top:5px}
.lv-card{cursor:pointer}
/* the line on screen right now */
.lv-card.lv-now{border-color:#F5B83D;box-shadow:0 0 0 2px #F5B83D}
/* text colours: two compact rows, each opening a swatch grid */
.lv-colrow{display:flex;align-items:center;gap:10px;margin:4px 0}
.lv-collbl{flex:1;min-width:0;font:600 14px/1.2 var(--sans);color:var(--text)}
.lv-colsw{width:52px;height:38px;border-radius:11px;border:2px solid var(--line);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);cursor:pointer;padding:0}
.lv-gradbtn{height:38px;padding:0 12px;border-radius:11px;border:1px solid var(--line);background:var(--panel);color:var(--muted);font:600 13px/1 var(--sans);cursor:pointer;white-space:nowrap}
.lv-gradbtn.on{color:var(--text);border-color:var(--accent,#007AFF)}
.lv-colpop{display:flex;flex-wrap:wrap;gap:8px;padding:10px;border-radius:14px;background:var(--fill);margin:2px 0 8px}
.lv-colpop[hidden]{display:none}
.lv-colpop button,.lv-colpop label{position:relative;width:36px;height:36px;border-radius:10px;border:2px solid transparent;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);cursor:pointer;padding:0;flex:none}
.lv-colpop .on{border-color:var(--text);box-shadow:inset 0 0 0 2px var(--panel)}
.lv-colpop .lv-cover{width:auto;padding:0 10px}
.lv-colpop .lv-cover span{font:700 11px/1 var(--sans);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.lv-colpop label.lv-custom{background:conic-gradient(#FF2D2D,#FFD12D,#3DFF5A,#2DE3FF,#3D5BFF,#D42DFF,#FF2D2D)}
.lv-colpop label.lv-custom input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}

/* edit area (Osman 2026-10-27: "9:16'da play slider çok küçük; edit alanı 16:9 olsun, play bar da 16:9 içinde, video ortada 9:16
   oynasın"): the box is as wide as the editor, the frame sits centred in it, the control bar spans the whole box.
   On a computer the box is 16:9; on a phone it is the screen's width. */
.lv-box{width:100%;max-width:960px;display:flex;justify-content:center;align-items:center;background:#000;border-radius:14px;overflow:hidden;box-shadow:var(--sh-hi,0 8px 30px rgba(0,0,0,.25))}
.lv-box canvas{border-radius:0;box-shadow:none}
@media(min-width:900px){
  .lv-box{aspect-ratio:16/9;width:min(960px,100%,calc((100vh - 300px)*16/9));width:min(960px,100%,calc((100dvh - 300px)*16/9))}
  .lv-box canvas{max-width:100%;max-height:100%}
}
.lv-box:fullscreen,.lv-box.vpfs{aspect-ratio:auto;border-radius:0}
/* font: one button with the chosen sample; it opens the grid */
.lv-fontbtn{display:flex;align-items:center;gap:8px;height:42px;padding:0 10px 0 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer;max-width:62%}
.lv-fontbtn b{line-height:1;white-space:nowrap}
.lv-fontbtn span{font:500 12.5px/1 var(--sans);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-fontbtn[aria-expanded=true]{border-color:var(--accent,#007AFF)}
.lv-fonts[hidden]{display:none}
.lv-fonts{margin:6px 0 10px;padding:10px;border-radius:14px;background:var(--fill)}

/* Sözler sheet: about two line cards tall, so it covers less of the video (Osman 2026-10-27: "2 panel gözüksün, şu an 3") —
   it scrolls, and follows the line on screen */
.ig-sheet.mcs-s.lv-lyrsh .ig-sh-box{max-height:min(44vh,400px)}
@media(min-width:900px){.ig-sheet.mcs-s.lv-lyrsh .ig-sh-box{max-height:min(430px,calc(100vh - 200px))}}
/* the chips are upper-cased in JS (Turkish rules only for Turkish words) */
.lv-cw button{text-transform:none}
/* background AI progress (under the player and in the song step) */
.lv-aibar{position:relative;max-width:960px;margin:8px auto 0;height:22px;border-radius:11px;background:var(--fill);overflow:hidden}
.lv-aibar[hidden]{display:none}
.lv-aibar i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#7A5CFF,#E8445A);opacity:.35;transition:width .3s}
.lv-aibar span{position:relative;display:block;text-align:center;font:600 11.5px/22px var(--sans);color:var(--text)}
/* the sample is the song's first word: keep a long one inside its tile */
.lv-font b,.lv-fontbtn b{max-width:100%;overflow:hidden;text-overflow:ellipsis}
/* Kırp + Süre on one line; on a narrow phone Süre drops under Kırp */
.lv-tdrow{display:flex;align-items:flex-end;flex-wrap:wrap;gap:6px 16px;max-width:900px;margin:0 auto}
.lv-tdrow .lv-trimwrap{flex:1 1 260px;min-width:0;margin:0}
.lv-tdrow .lv-dur{flex:none;margin:0 0 2px auto}
.lv-tdrow .lv-dur .vtl{margin-right:2px}
/* Instagram steps (download window + after the download) */
.lv-igbox{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.lv-igwarn{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:14px;background:#FFF6E5;color:#5C3A00}
.lv-igwarn b{display:block;font:700 14px/1.3 var(--sans)}
.lv-igwarn p{margin:4px 0 0;font:500 12.5px/1.45 var(--sans)}
[data-theme="dark"] .lv-igwarn{background:#3A2A0A;color:#FFE2A8}
.lv-igbox .lv-ig{margin:0}
/* phone editor: the frame + its bar + Kırp/Süre fit the screen above the dock; with a tab sheet open the frame shrinks into the
   space above the sheet and Kırp / Süre step aside */
@media(max-width:899px){
  .lv-box canvas{max-height:max(260px,calc(100vh - 300px));max-height:max(260px,calc(100dvh - 300px))}
  body.lv-sheeton .lv-box canvas{max-height:max(180px,calc(100vh - var(--lv-sh,50vh) - 76px));max-height:max(180px,calc(100dvh - var(--lv-sh,50vh) - 76px))}
  body.lv-sheeton .lv-tdrow,body.lv-sheeton .lv-aibar-stage{display:none}
  .lv-box{transition:none}
}
.lv-cspd{display:flex;align-items:center;gap:10px;margin-top:8px}
.lv-cspd>span:first-child{font:500 12.5px/1 var(--sans);color:var(--muted);min-width:58px}
.lv-cspd input{flex:1;min-width:0}
.lv-cspd .v{min-width:38px;text-align:right;font:600 12.5px/1 var(--mono,ui-monospace,monospace)}
.lv-curve .v{min-width:52px;text-align:right;font:600 13px/1 var(--mono,ui-monospace,monospace)}