/* ===========================================================
   GURIZON · Logo → Vektör (AI logo vectorization) page styles
   Shared by TR (/logo-vektore-cevirme) and EN (/en/ai-logo-to-vector)
   Relies on global tokens from gurizon.css (--red-*, --ink-*, --grad-red, etc.)
   Only page-specific components live here; everything else is reused.
   =========================================================== */

/* ---- shared spec chips (also used in logo-tasarimi but page-scoped there) ---- */
.spec-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.spec{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line);
  border-radius:999px;background:rgba(255,255,255,.03);font-size:13px;font-weight:600;color:var(--mute)}
.spec i{color:var(--red-500)}

/* ============ HERO ============ */
.lv-hero{position:relative;overflow:hidden}
.lv-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:46px;align-items:center}
@media(max-width:900px){.lv-hero-grid{grid-template-columns:1fr;gap:34px}}
/* tighter, less overwhelming headline on this page */
.lv-hero h1{font-size:clamp(33px,4.4vw,56px);line-height:1.07;margin-bottom:20px}
.lv-hero .eyebrow{margin-bottom:20px}

.lv-hero h1 .strike{position:relative;color:var(--mute-2);font-weight:800}
.lv-hero h1 .strike::after{content:"";position:absolute;left:-2%;right:-2%;top:54%;height:3px;
  background:var(--grad-red-soft);transform:rotate(-3deg);border-radius:3px}
/* static headline gradient — own class (NOT .gradient-text) so no global
   typewriter/cycling script can ever hook it; fixed red gradient, no animation */
.lv-hero h1 .lv-grad{
  background:linear-gradient(120deg,#ef4444 0%,#dc2626 50%,#7f1d1d 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:none}
/* hero subtitle: muted body, brand-red highlights (index1-mix forces a dark color; override) */
.lv-hero .hero-sub{color:#9a9aa3 !important;max-width:540px;font-size:16px;line-height:1.6}
.lv-hero .hero-sub strong{color:#f87171 !important;font-weight:700}

/* hero trust row (static) */
.lv-hero-trust{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:26px;
  padding-top:22px;border-top:1px solid var(--line)}
.lv-hero-trust .stars{color:#facc15;font-size:14px;letter-spacing:2px}
.lv-hero-trust .t{font-size:13px;color:var(--mute)}
.lv-hero-trust .t b{color:#fff}
.lv-hero-trust .sep{width:1px;height:18px;background:var(--line)}

/* ===========================================================
   HERO "VECTORIZATION" ANIMATION (.lvz) — explains the service:
   blurry AI raster → scan → outline draws itself → anchor nodes pop
   → gradient fill → vector selection box → format outputs. 7s loop.
   No changing text; all graphics. Static fallback for reduced-motion.
   =========================================================== */
.lvz{position:relative;border:1px solid var(--line);border-radius:24px;overflow:hidden;
  padding:34px 32px 24px;box-shadow:0 40px 90px -42px rgba(0,0,0,.9);
  display:flex;flex-direction:column;justify-content:center;
  background:radial-gradient(120% 90% at 80% -12%,rgba(239,68,68,.16),transparent 60%),
    linear-gradient(165deg,rgba(22,22,24,.96),rgba(8,8,9,.98))}
.lvz-grid{position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:24px 24px;
  -webkit-mask:radial-gradient(circle at 50% 44%,#000,transparent 74%);
  mask:radial-gradient(circle at 50% 44%,#000,transparent 74%)}

.lvz-svg{position:relative;z-index:2;display:block;width:100%;max-width:360px;margin:0 auto;height:auto;aspect-ratio:1/1}

/* scanning beam */
.lvz-scan{position:absolute;left:9%;right:9%;top:6%;height:34%;z-index:3;pointer-events:none;border-radius:50%;
  background:linear-gradient(180deg,transparent,rgba(239,68,68,.32),transparent);filter:blur(3px);
  opacity:0;animation:lvzScan 7s ease-in-out infinite}
@keyframes lvzScan{
  0%{opacity:0;transform:translateY(-45%)}
  6%{opacity:1}
  30%{transform:translateY(235%);opacity:1}
  34%{opacity:0;transform:translateY(235%)}
  100%{opacity:0;transform:translateY(-45%)}
}

/* raster (blurry AI png) */
.lvz-raster{fill:#d4d4d8;filter:blur(3.5px);opacity:0;animation:lvzRaster 7s ease-in-out infinite}
@keyframes lvzRaster{0%,16%{opacity:.85}32%{opacity:0}86%{opacity:0}100%{opacity:.85}}

/* outline draws itself */
.lvz-path{fill:none;stroke:url(#lvzGrad);stroke-width:4;stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;opacity:0;filter:drop-shadow(0 0 6px rgba(239,68,68,.55));
  animation:lvzDraw 7s ease-in-out infinite}
@keyframes lvzDraw{
  0%{stroke-dashoffset:1;opacity:0}
  26%{stroke-dashoffset:1;opacity:1}
  56%{stroke-dashoffset:0;opacity:1}
  88%{stroke-dashoffset:0;opacity:1}
  96%{opacity:0}
  100%{stroke-dashoffset:1;opacity:0}
}

/* gradient fill appears */
.lvz-fill{fill:url(#lvzGrad);opacity:0;transform-box:fill-box;transform-origin:center;
  filter:drop-shadow(0 8px 26px rgba(220,38,38,.45));animation:lvzFill 7s ease-in-out infinite}
@keyframes lvzFill{
  0%,54%{opacity:0;transform:scale(.94)}
  68%{opacity:1;transform:scale(1)}
  86%{opacity:1;transform:scale(1)}
  96%{opacity:0;transform:scale(.94)}
  100%{opacity:0}
}

/* vector selection box + corner handles */
.lvz-bbox{fill:none;stroke:rgba(239,68,68,.6);stroke-width:1.5;stroke-dasharray:5 5;opacity:0;
  animation:lvzBox 7s ease-in-out infinite}
.lvz-h{fill:var(--ink);stroke:var(--red-500);stroke-width:2;opacity:0;animation:lvzBox 7s ease-in-out infinite}
@keyframes lvzBox{0%,60%{opacity:0}66%{opacity:1}86%{opacity:1}94%{opacity:0}100%{opacity:0}}

/* anchor nodes pop in (staggered) while the outline draws */
.lvz-node{fill:var(--ink);stroke:var(--red-500);stroke-width:2.5;transform-box:fill-box;transform-origin:center;
  opacity:0;transform:scale(0);animation:lvzNode 7s ease-in-out infinite}
.lvz-node.n2{animation-delay:.18s}
.lvz-node.n3{animation-delay:.36s}
.lvz-node.n4{animation-delay:.54s}
@keyframes lvzNode{
  0%,30%{opacity:0;transform:scale(0)}
  36%{opacity:1;transform:scale(1.5)}
  40%{transform:scale(1)}
  88%{opacity:1;transform:scale(1)}
  95%,100%{opacity:0;transform:scale(0)}
}

/* format output chips light up in sequence */
.lvz-formats{position:relative;z-index:2;display:flex;justify-content:center;gap:8px;margin-top:14px}
.lvz-fmt{font:700 11px "JetBrains Mono",monospace;color:#a1a1aa;padding:5px 11px;border-radius:8px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);opacity:.45;animation:lvzFmt 7s ease-in-out infinite}
.lvz-fmt.f2{animation-delay:.12s}.lvz-fmt.f3{animation-delay:.24s}.lvz-fmt.f4{animation-delay:.36s}
@keyframes lvzFmt{
  0%,62%{opacity:.45;color:#a1a1aa;border-color:var(--line);box-shadow:none;transform:translateY(0)}
  72%{opacity:1;color:#fff;border-color:var(--red-600);box-shadow:0 0 16px rgba(239,68,68,.5);transform:translateY(-3px)}
  84%{opacity:1;color:#fca5a5;border-color:var(--red-800);transform:translateY(0)}
  94%,100%{opacity:.45;color:#a1a1aa;border-color:var(--line)}
}

.lvz-cap{position:relative;z-index:2;text-align:center;margin-top:14px;
  font:600 12px "JetBrains Mono",monospace;color:var(--mute-2);letter-spacing:.3px}
.lvz-cap b{color:#fff}

@media(max-width:560px){.lvz{padding:18px}.lvz-svg{max-width:230px}}

/* reduced motion — show the finished vector, no looping */
@media(prefers-reduced-motion:reduce){
  .lvz-scan{display:none}
  .lvz-raster{opacity:0;animation:none}
  .lvz-path{stroke-dashoffset:0;opacity:1;animation:none}
  .lvz-fill{opacity:1;transform:none;animation:none}
  .lvz-bbox,.lvz-h{opacity:1;animation:none}
  .lvz-node{opacity:1;transform:scale(1);animation:none}
  .lvz-fmt{opacity:1;color:#fff;animation:none}
}

/* ============ TICKER (page tweaks reuse global .ticker) ============ */

/* ============ BEFORE / AFTER COMPARE SLIDER ============ */
.lv-compare-wrap{max-width:760px;margin:0 auto}
.lv-compare{position:relative;width:100%;aspect-ratio:16/9;border-radius:20px;overflow:hidden;
  border:1px solid var(--line);cursor:ew-resize;user-select:none;touch-action:none;
  box-shadow:0 30px 70px -34px rgba(0,0,0,.85)}
.lv-cmp-side{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}
.lv-cmp-after{background:radial-gradient(120% 120% at 50% 0%,#161618,#070708)}
.lv-cmp-before{background:radial-gradient(120% 120% at 50% 0%,#1a1410,#0a0806);
  clip-path:inset(0 0 0 var(--pos,50%))}
.lv-cmp-glyph{font:900 clamp(60px,14vw,150px)/1 "Manrope",sans-serif;letter-spacing:-3px}
.lv-cmp-after .lv-cmp-glyph{background:var(--grad-red);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
.lv-cmp-before .lv-cmp-glyph{color:#fff;image-rendering:pixelated;
  filter:blur(1.4px) contrast(1.1);text-shadow:2px 0 0 rgba(255,255,255,.3),0 2px 0 rgba(255,255,255,.2),-2px 0 0 rgba(255,255,255,.15)}
.lv-cmp-badge{position:absolute;top:12px;padding:5px 12px;border-radius:999px;
  font:700 11px "JetBrains Mono",monospace;letter-spacing:1px;text-transform:uppercase;backdrop-filter:blur(6px)}
.lv-cmp-badge.b-after{right:12px;background:rgba(16,185,129,.16);border:1px solid rgba(52,211,153,.5);color:#6ee7b7}
.lv-cmp-badge.b-before{left:12px;background:rgba(245,158,11,.16);border:1px solid rgba(245,158,11,.5);color:#fcd34d}
.lv-cmp-handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px;background:var(--grad-red-soft);
  transform:translateX(-50%);z-index:5;box-shadow:0 0 18px rgba(239,68,68,.7)}
.lv-cmp-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;
  border-radius:50%;background:var(--ink);border:2px solid var(--red-500);display:grid;place-items:center;
  color:#fff;box-shadow:var(--shadow-red)}
.lv-cmp-knob i{font-size:13px}
.lv-cmp-hint{text-align:center;color:var(--mute-2);font-size:13px;margin-top:14px}
.lv-cmp-hint i{color:var(--red-500)}

/* ============ PROBLEM CARDS ============ */
.lv-prob-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:860px){.lv-prob-grid{grid-template-columns:1fr}}
.lv-prob{border:1px solid var(--line);border-radius:18px;padding:24px;background:rgba(255,255,255,.02);
  transition:transform .25s,border-color .25s,background .25s}
.lv-prob:hover{transform:translateY(-4px);border-color:var(--red-700);background:rgba(239,68,68,.05)}
.lv-prob-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:18px;
  background:rgba(239,68,68,.12);color:var(--red-400);margin-bottom:16px}
.lv-prob h3{font-size:17px;margin:0 0 8px}
.lv-prob p{color:var(--mute);font-size:14px;line-height:1.6;margin:0}

/* ============ PROCESS / TIMELINE ============ */
.lv-steps{position:relative;max-width:860px;margin:0 auto;display:grid;gap:20px}
.lv-step{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
  border:1px solid var(--line);border-radius:18px;padding:22px 24px;background:rgba(255,255,255,.02);
  transition:border-color .25s,transform .25s}
.lv-step:hover{border-color:var(--red-700);transform:translateX(4px)}
.lv-step-num{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex-shrink:0;
  font:900 18px "Manrope",sans-serif;background:var(--grad-red-soft);color:#fff;box-shadow:var(--shadow-red)}
.lv-step h3{margin:0 0 6px;font-size:18px}
.lv-step p{margin:0;color:var(--mute);font-size:14px;line-height:1.65}
.lv-step .when{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:12px;
  font-weight:700;color:var(--red-400)}

/* ============ FORMAT GRID ============ */
.lv-fmt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:860px){.lv-fmt-grid{grid-template-columns:repeat(2,1fr)}}
.lv-fmt{border:1px solid var(--line);border-radius:15px;padding:18px 14px;text-align:center;
  background:rgba(255,255,255,.02);transition:transform .22s,border-color .22s,background .22s}
.lv-fmt:hover{transform:translateY(-4px);border-color:var(--red-700);background:rgba(239,68,68,.05)}
.lv-fmt .ext{font:900 18px "JetBrains Mono",monospace;color:#fff;display:block}
.lv-fmt:hover .ext{color:var(--red-400)}
.lv-fmt .desc{display:block;margin-top:8px;font-size:12px;color:var(--mute-2);line-height:1.5}

/* ============ VS / COMPARISON TABLE ============ */
.lv-vs{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:920px;margin:0 auto}
@media(max-width:780px){.lv-vs{grid-template-columns:1fr}}
.lv-vs-col{border:1px solid var(--line);border-radius:18px;padding:26px}
.lv-vs-col.bad{background:rgba(255,255,255,.015)}
.lv-vs-col.good{background:linear-gradient(160deg,rgba(239,68,68,.08),rgba(127,29,29,.05));
  border-color:var(--red-700);box-shadow:0 24px 60px -30px rgba(220,38,38,.5)}
.lv-vs-col h3{margin:0 0 4px;font-size:18px;display:flex;align-items:center;gap:10px}
.lv-vs-col .tagline{color:var(--mute-2);font-size:13px;margin:0 0 18px}
.lv-vs-col ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.lv-vs-col li{display:flex;gap:10px;font-size:14px;color:var(--mute);line-height:1.5}
.lv-vs-col.bad li i{color:#71717a}
.lv-vs-col.good li i{color:#34d399}
.lv-vs-col li strong{color:#fff;font-weight:700}

/* ============ USE CASES ============ */
.lv-use-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:860px){.lv-use-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.lv-use-grid{grid-template-columns:1fr}}
.lv-use{border:1px solid var(--line);border-radius:16px;padding:22px 18px;background:rgba(255,255,255,.02);
  transition:transform .22s,border-color .22s}
.lv-use:hover{transform:translateY(-4px);border-color:var(--red-700)}
.lv-use i{font-size:22px;color:var(--red-400);margin-bottom:12px;display:block}
.lv-use strong{display:block;font-size:15px;margin-bottom:6px}
.lv-use span{font-size:13px;color:var(--mute-2);line-height:1.55}

/* ============ UPLOAD FORM ============ */
.lv-form-wrap{max-width:680px;margin:0 auto}
.lv-form{border:1px solid var(--line);border-radius:22px;padding:32px;
  background:linear-gradient(160deg,rgba(20,20,22,.85),rgba(8,8,9,.92));
  box-shadow:0 34px 80px -36px rgba(0,0,0,.85)}
@media(max-width:560px){.lv-form{padding:22px}}
.lv-field{margin-bottom:18px}
.lv-field label{display:block;font-size:13px;font-weight:700;margin-bottom:8px;color:#e4e4e7}
.lv-field label .req{color:var(--red-500)}
.lv-input,.lv-textarea{width:100%;background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:12px;padding:14px 16px;color:#fff;font:500 15px "Manrope",sans-serif;
  transition:border-color .2s,background .2s}
.lv-input:focus,.lv-textarea:focus{outline:none;border-color:var(--red-500);background:rgba(239,68,68,.05)}
.lv-input::placeholder,.lv-textarea::placeholder{color:#52525b}
.lv-textarea{resize:vertical;min-height:96px}
.lv-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.lv-row{grid-template-columns:1fr}}

/* dropzone */
.lv-drop{position:relative;border:2px dashed var(--line-2);border-radius:16px;padding:30px 20px;text-align:center;
  background:rgba(255,255,255,.015);transition:border-color .2s,background .2s;cursor:pointer}
.lv-drop:hover,.lv-drop.dragover{border-color:var(--red-500);background:rgba(239,68,68,.06)}
.lv-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.lv-drop-ic{width:54px;height:54px;border-radius:15px;margin:0 auto 14px;display:grid;place-items:center;
  font-size:20px;background:rgba(239,68,68,.12);color:var(--red-400)}
.lv-drop b{display:block;font-size:15px;margin-bottom:5px}
.lv-drop span{font-size:12.5px;color:var(--mute-2)}
.lv-files{margin-top:14px;display:grid;gap:8px}
.lv-file{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;background:rgba(255,255,255,.02);font-size:13px}
.lv-file i{color:var(--red-400)}
.lv-file .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e4e4e7}
.lv-file .sz{color:var(--mute-2);font-size:12px}

/* consent + submit */
.lv-consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--mute);line-height:1.5;margin:6px 0 18px}
.lv-consent input{margin-top:2px;accent-color:var(--red-600);width:16px;height:16px;flex-shrink:0}
.lv-consent a{color:var(--red-400);border-bottom:1px solid currentColor}
.lv-submit{width:100%;justify-content:center;font-size:16px;padding:16px;border:0;cursor:pointer}
.lv-submit:disabled{opacity:.6;cursor:not-allowed}
.lv-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:18px;
  font-size:12px;color:var(--mute-2)}
.lv-trust span i{color:#34d399;margin-right:5px}

/* alerts */
.lv-alert{border-radius:12px;padding:14px 16px;font-size:14px;margin-bottom:16px;display:none}
.lv-alert.err{display:block;background:rgba(239,68,68,.1);border:1px solid var(--red-700);color:#fca5a5}
.lv-success{display:none;text-align:center;padding:30px 10px}
.lv-success.show{display:block}
.lv-success .ic{width:70px;height:70px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;
  font-size:28px;background:rgba(16,185,129,.14);color:#34d399;border:1px solid rgba(52,211,153,.4)}
.lv-success h3{font-size:22px;margin:0 0 10px}
.lv-success p{color:var(--mute);font-size:15px;line-height:1.6;margin:0 auto;max-width:420px}

/* reduced motion — hero visual is already static; nothing to disable here */