/* Critical landing styles extracted from resources/views/landing.blade.php
   Moved to public/css/landing.css for better caching and non-blocking load.
   Keep this file minimal; move larger or non-critical rules to async-loaded CSS later.
*/
:root{
  --bg:#070b14;
  --ink:#e6f6ff;
  --muted:#a6b3c7;
  --neon1:#00e5ff; /* cyan */
  --neon2:#7c4dff; /* violet */
  --neon3:#00ffb2; /* mint */
  --alert:#ff66cc; /* magenta */
  --glass:rgba(255,255,255,.06);
  --glass-bd:rgba(255,255,255,.14);
  --radius-xl:22px; --radius-xxl:28px;
}
html,body{background:#03060d; color:var(--ink); font-family:Roboto,system-ui,-apple-system,Segoe UI,Arial,sans-serif; scroll-behavior:smooth}
.brand{font-family:Rajdhani,Roboto,system-ui,sans-serif; letter-spacing:.5px}
.hero{position:relative; overflow:hidden; background: radial-gradient(1200px 600px at 20% -10%, rgba(0,229,255,.16), transparent 60%), radial-gradient(900px 500px at 120% 20%, rgba(124,77,255,.18), transparent 60%), linear-gradient(180deg,#070b14 0%, #03060d 100%)}
.hero-canvas{position:absolute; inset:0; z-index:0; pointer-events:none}
.scanline:before{content:""; position:absolute; inset:0; background:linear-gradient(transparent 50%, rgba(255,255,255,.03) 51%); background-size:100% 4px; mix-blend-mode:screen; pointer-events:none}
.hero-inner{position:relative; z-index:1}
.neon-glow{text-shadow: 0 0 18px rgba(0,229,255,.6), 0 0 36px rgba(124,77,255,.35)}
.glitch{ position:relative; display:inline-block }
.glitch:before,.glitch:after{
  content:attr(data-text); position:absolute; left:0; top:0; overflow:hidden; clip-path:inset(0 0 0 0);
}
.glitch:before{ transform:translate(1px,0); color:#0ff; opacity:.7; mix-blend-mode:screen; animation:gl1 2.4s infinite linear }
.glitch:after{  transform:translate(-1px,0); color:#f0f; opacity:.5; mix-blend-mode:screen; animation:gl2 2s infinite linear }
@keyframes gl1 { 0%{clip-path:inset(0 0 85% 0)} 20%{clip-path:inset(70% 0 0 0)} 40%{clip-path:inset(0 0 60% 0)} 60%{clip-path:inset(20% 0 0 0)} 80%{clip-path:inset(0 0 30% 0)} 100%{clip-path:inset(0 0 85% 0)} }
@keyframes gl2 { 0%{clip-path:inset(80% 0 0 0)} 25%{clip-path:inset(0 0 70% 0)} 50%{clip-path:inset(10% 0 10% 0)} 75%{clip-path:inset(0 0 40% 0)} 100%{clip-path:inset(80% 0 0 0)} }
.muted{color:var(--muted)}
.glass{ background:var(--glass); border:1px solid var(--glass-bd); border-radius:var(--radius-xxl); box-shadow:0 12px 40px rgba(0,229,255,.06), inset 0 0 0 1px rgba(255,255,255,.02)}
.holo-border{ position:relative }
.holo-border:before{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  padding:1px; background:linear-gradient(135deg,var(--neon1),var(--neon2),var(--neon3));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; opacity:.65; filter:blur(.2px)
}
.chip-future{ background:linear-gradient(90deg, rgba(0,229,255,.2), rgba(124,77,255,.2)); color:var(--ink) }
.neon-btn{ box-shadow:0 0 0 2px rgba(0,229,255,.25) inset, 0 0 18px rgba(0,229,255,.25) }
.neon-btn:hover{ box-shadow:0 0 0 2px rgba(0,229,255,.35) inset, 0 0 26px rgba(0,229,255,.35) }
.timeline-dot{ width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg,var(--neon1),var(--neon2)); box-shadow:0 0 12px var(--neon1) }
.price-card{ transition:transform .25s, box-shadow .25s }
.price-card:hover{ transform:translateY(-6px); box-shadow:0 18px 48px rgba(124,77,255,.22) }
.code-wrap{ background:#0a0f1d; border-radius:16px; border:1px solid #1a2238; box-shadow:inset 0 0 0 1px rgba(255,255,255,.02) }
.terminal-hdr{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid #1a2238; background:linear-gradient(90deg, rgba(0,229,255,.08), transparent) }
.terminal-title{ font-family:Rajdhani, monospace; letter-spacing:.6px; color:#9ad7ff }
.phone{width:320px; max-width:100%; border-radius:28px; padding:14px; background:linear-gradient(180deg,#080e1c,#040710); color:#e2e8f0; border:1px solid #1a2238; box-shadow:0 16px 50px rgba(0,229,255,.08)}
.screen{border-radius:20px; background:#0a0f1d; padding:12px; height:420px; display:flex; flex-direction:column; overflow:hidden; border:1px solid #1a2238}
.msg-list{flex:1; overflow:auto; display:flex; flex-direction:column; gap:8px}
.bubble{max-width:82%; padding:9px 11px; border-radius:14px; font-size:13px; line-height:1.35; border:1px solid #1a2238}
.in{align-self:flex-start; background:rgba(124,77,255,.12)}
.out{align-self:flex-end; background:rgba(0,229,255,.14)}
.input-row{display:flex; gap:8px; margin-top:8px}
.scanline { position:relative }
.section{ position:relative }
.cursor-hint{
position:absolute; top:0; left:0; z-index:2; /* canvas'ın üstü */
pointer-events:none; transform:translate(-50%,-50%);
display:none;
}
.cursor-hint.show{ display:block }
.cursor-hint .icon{
position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
font-size:18px; color:var(--neon1); text-shadow:0 0 12px rgba(0,229,255,.6)
}
.cursor-hint .label{
position:absolute; top:-22px; left:50%; transform:translateX(-50%);
font:600 11px Rajdhani, sans-serif; letter-spacing:.6px;
color:#9ad7ff; background:rgba(10,15,29,.7);
padding:2px 6px; border-radius:8px; border:1px solid #1a2238
}
.cursor-hint .ring{
position:absolute; left:50%; top:50%; width:40px; height:40px;
border:2px solid rgba(0,229,255,.85); border-radius:50%;
transform:translate(-50%,-50%); animation:cursorPulse 1.2s infinite ease-out
}
.cursor-hint .ring2{ width:64px; height:64px; border-color:rgba(124,77,255,.65); animation-delay:.2s }
@keyframes cursorPulse{
  0%{opacity:.95; transform:translate(-50%,-50%) scale(.6)}
  70%{opacity:.25}
  100%{opacity:0; transform:translate(-50%,-50%) scale(1.25)}
}
/* click anında kısa ripple */
.cursor-hint.clicked .ring, .cursor-hint.clicked .ring2{ animation:cursorClick .40s forwards }
@keyframes cursorClick{
  0%{opacity:1; transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0; transform:translate(-50%,-50%) scale(1.6)}
}
/* Feature card improvements */
.feature-card-body{ padding:18px; min-height:160px; display:flex; flex-direction:column; gap:8px }
.feature-card-icon{ width:56px; height:56px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(135deg, rgba(0,229,255,.06), rgba(124,77,255,.06)); box-shadow:0 8px 26px rgba(0,0,0,.35); }
.feature-card-title{ font-weight:700; letter-spacing:.4px }
.feature-card-bullets{ margin:0; padding-left:16px; color:var(--muted); font-size:13px }
.feature-card-kpis{ display:flex; gap:12px; margin-top:6px }
.feature-kpi{ background:rgba(255,255,255,.03); padding:6px 8px; border-radius:8px; font-size:12px; color:#dce7ff }
@media (max-width:900px){ .feature-card-body{ min-height:140px } }

/* Timeline: horizontal pill cards */
.timeline-row{ display:flex; gap:20px; overflow:auto; -webkit-overflow-scrolling:touch; padding-bottom:8px; align-items:stretch }
.timeline-card{ min-width:260px; background:linear-gradient(180deg, rgba(10,15,21,.28), rgba(8,10,16,.22)); border-radius:18px; padding:16px; border:1px solid rgba(255,255,255,.03); box-shadow:0 8px 30px rgba(0,0,0,.45) }
.timeline-card .timeline-dot{ width:10px; height:10px; margin-right:10px; box-shadow:0 0 12px rgba(0,170,255,.45) }
.timeline-title{ display:flex; align-items:center; gap:12px; margin-bottom:6px }
.timeline-desc{ color:var(--muted); font-size:14px }

/* Pricing: alert + cards layout improvements */
.pricing-alert{ background:linear-gradient(90deg,#5a3308,#3b2206); color:#fff; border-radius:12px; padding:14px 18px; box-shadow:0 8px 32px rgba(90,40,8,.18); border:1px solid rgba(255,200,120,.06) }
.pricing-cards{ display:flex; gap:20px; align-items:flex-start; flex-wrap:nowrap; overflow:auto; -webkit-overflow-scrolling:touch }
.price-card{ min-width:300px; border-radius:18px; padding:18px; background:linear-gradient(180deg, rgba(6,8,12,.45), rgba(8,10,16,.35)); border:1px solid rgba(255,255,255,.04); box-shadow:0 18px 50px rgba(0,0,0,.55); transition:transform .25s, box-shadow .25s }
.price-card.pro{ background:linear-gradient(180deg, rgba(56,34,74,.26), rgba(8,10,16,.25)); border:1px solid rgba(124,77,255,.08); box-shadow:0 22px 60px rgba(124,77,255,.06) }
.price-badge{ position:absolute; right:14px; top:14px; background:linear-gradient(90deg,#00ffb2,#7c4dff); color:#00120a; padding:6px 10px; border-radius:999px; font-weight:700; font-size:12px }
.price-card .text-h4{ margin-bottom:6px }
.price-card .v-list{ margin-top:8px }

/* Ensure horizontal scroll pads look neat */
.timeline-row::-webkit-scrollbar, .pricing-cards::-webkit-scrollbar{ height:8px }
.timeline-row::-webkit-scrollbar-thumb, .pricing-cards::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.06); border-radius:6px }

/* stacked / compact timeline variants */
.timeline-stacked .timeline-card{ display:block }
.timeline-compact .timeline-dot{ width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg,var(--neon1),var(--neon2)); box-shadow:0 0 8px rgba(0,170,255,.35) }
.v-btn--active{ background:rgba(0,229,255,.08) !important; border-color:rgba(0,229,255,.12) !important }

/* Pricing layout variants (1..10) — visual presets for selection */
.pricing-layout-1 .price-card{ border-color:rgba(0,229,255,.12); }
.pricing-layout-2 .price-card{ border-color:rgba(124,77,255,.12); transform:translateY(0); }
.pricing-layout-3 .price-card{ border-color:rgba(0,255,178,.10); box-shadow:0 28px 80px rgba(0,255,178,.03) }
.pricing-layout-4 .price-card{ border-radius:28px; padding:22px }
.pricing-layout-5 .price-card{ border-style:dashed }
.pricing-layout-6 .price-card{ background:linear-gradient(180deg, rgba(20,20,30,.6), rgba(8,10,16,.28)) }

.pricing-3d-demo{max-width:980px; display:block}

/* Centering helper when placed inside Vuetify cols */
.pricing-3d-demo.mx-auto{margin-left:auto;margin-right:auto}

/* Responsive scaling for the 3D card: keeps the perspective but scales the card on small screens */
.card-3d-wrap{perspective:1200px; display:flex; justify-content:center}
.card-3d-wrapper{width:clamp(260px, 48vw, 360px); height:clamp(380px, 62vw, 520px); margin:0 auto; position:relative; transform-style:preserve-3d; transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.card-3d-wrapper .card-front,.card-3d-wrapper .card-back{border-radius:calc(var(--radius-xl,22px));}

/* Make sure images inside scale with the wrapper */
.card-3d-wrapper img{max-width:100%; height:auto}

/* Reduce decorative image sizes on narrow screens to avoid overflow */
@media (max-width:480px){
  .card-3d-wrapper .img-1{width:140px; right:8px; bottom:12px}
  .card-3d-wrapper .img-2{width:100%}
  .card-3d-wrapper .img-3{width:90px}
  .card-3d-wrapper .img-6{width:56px}
  .card-3d-wrapper{transition:transform .6s ease}
}

/* Ensure the pricing area has comfortable spacing so it doesn't overlap hero content */
.pricing-3d-demo{padding:18px 10px 40px}

.pricing-3d-demo .logo{display:block;margin:0 auto 1rem;max-width:160px}
.card-3d-wrap{perspective:1200px}
.card-3d-wrapper{width:360px;height:520px;margin:0 auto;position:relative;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.card-3d-wrapper .card-front,.card-3d-wrapper .card-back{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:22px;box-shadow:0 20px 40px rgba(0,0,0,.25);overflow:hidden;background:#0f1724}
.card-3d-wrapper .card-back{transform:rotateY(180deg)}
.card-3d-wrapper .card-front .pricing-wrap,.card-3d-wrapper .card-back .pricing-wrap{padding:2.6rem 2rem;color:#fff;position:relative;height:100%}
.card-3d-wrapper img{max-width:100%;display:block}
.card-3d-wrapper .img-wrap{position:absolute;z-index:2}
.card-3d-wrapper .img-1{right:12px;bottom:22px;width:210px}
.card-3d-wrapper .img-2{left:0;bottom:0;width:100%}
.card-3d-wrapper .img-3{right:0;bottom:14px;width:140px}
.card-3d-wrapper .img-4{left:0;bottom:12px;width:180px}
.card-3d-wrapper .img-5{left:10px;bottom:64px;width:90px}
.card-3d-wrapper .img-6{left:8px;bottom:0;width:70px}
.card-3d-wrapper .img-7{left:18px;bottom:12px;width:110px}
.card-3d-wrap input.pricing{display:none}
.card-3d-wrap label{display:inline-block;cursor:pointer;margin-bottom:18px}
.card-3d-wrap input.pricing:checked + label + .card-3d-wrapper{transform:rotateY(180deg)}
.card-3d-wrap .block-diff{display:inline-block;padding:.25rem .6rem;border-radius:999px;background:linear-gradient(90deg,#0ea5a1,#06b6d4);color:#051125}
.card-3d-wrap .float-right{margin-left:.6rem;font-weight:600}
.pricing-wrap h4{font-size:18px;font-weight:700;margin-bottom:.5rem}
.pricing-wrap h2{font-size:32px;font-weight:800}
.pricing-wrap p{margin:0 0 .6rem}
.pricing-wrap .link{display:inline-block;margin-top:18px;padding:10px 18px;border-radius:999px;background:rgba(255,255,255,.08);color:#fff;text-decoration:none}


/* === InoPricing v2 (Dark Neon Patch) ==================================== */
/* 1) Yerel tema değişkenleri (karanlık yüzey + neon vurgu) */
.inopricing{
  --ino-surface: linear-gradient(180deg, rgba(6,8,12,.45), rgba(8,10,16,.35));
  --ino-stroke: rgba(255,255,255,.06);
  --ino-text: var(--ink, #e6f6ff);
  --ino-muted-text: color-mix(in oklab, var(--ino-text) 70%, black);
  --ino-accent1: var(--neon1, #00e5ff);
  --ino-accent2: var(--neon2, #7c4dff);
  --ino-accent3: var(--neon3, #00ffb2);
}

/* 2) Dış kap: block + iç spacing (önceki flex yapıyı override eder) */
.inopricing{ position:relative; padding: 2.5rem 0 0; display:block }

.inopricing *{ box-sizing:border-box; }

/* 3) Switch – konteyner içi kardeş seçicilerle çalışır */
.inopricing .billing-row{ display:grid; place-items:center; margin:1rem 0 2rem; }
.inopricing .billing{ position:absolute; left:-9999px; }
.inopricing .billing + label{
  position:relative; display:inline-grid; grid-auto-flow:column; align-items:center; gap:.75rem;
  font-weight:700; font-size:.9rem; text-transform:uppercase; letter-spacing:.5px; color:var(--ino-text); cursor:pointer;
}
.inopricing .switch-track{
  width:240px; height:44px; border-radius:8px; padding:2px; display:grid; grid-template-columns:1fr 1fr;
  background: linear-gradient(90deg, color-mix(in oklab, var(--ino-accent1) 60%, #000), color-mix(in oklab, var(--ino-accent2) 60%, #000));
  position:relative; box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;
}
.inopricing .switch-thumb{
  position:absolute; inset:2px auto 2px 2px; width:calc(50% - 2px); border-radius:6px;
  background: rgba(255,255,255,.08); backdrop-filter: blur(4px);
  transition: inset .28s ease;
}
.inopricing .switch-seg{ display:grid; place-items:center; color:#fff; z-index:1; font-weight:800; backdrop-filter: black; }
.inopricing .billing:checked + label .switch-thumb{ inset:2px 2px 2px auto; }
.inopricing .badge-save{
  display:inline-block; margin-left:.5rem; padding:.25rem .5rem; border-radius:.375rem;
  background: linear-gradient(90deg, var(--ino-accent3), var(--ino-accent2)); color:#051125; font-size:.7rem; font-weight:800;
}

/* 4) Grid */
.inopricing .plans{ --gap:1.25rem; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap); }
@media (max-width: 980px){ .inopricing .plans{ grid-template-columns:1fr; } }

/* 5) Kart */
.inopricing .plan{
  position:relative; background:var(--ino-surface); border:1px solid var(--ino-stroke);
  border-radius:18px; box-shadow:0 18px 50px rgba(0,0,0,.55); overflow:hidden;
  padding:1.25rem 1.25rem 1.5rem; isolation:isolate; transition:transform .25s ease, box-shadow .25s ease;
}
.inopricing .plan:hover{ transform:translateY(-4px); box-shadow:0 22px 60px rgba(0,0,0,.65); }

/* 6) Blob arka planı – neon */
.inopricing .plan .blob{
  position:absolute; width:82px; height:82px; left:50%; top:70px; transform:translateX(-50%);
  background: radial-gradient(60% 60% at 50% 40%, rgba(255,255,255,.25), transparent),
              radial-gradient(100% 100% at 50% 50%, color-mix(in oklab, var(--ino-accent1) 60%, transparent), color-mix(in oklab, var(--ino-accent2) 50%, transparent));
  z-index:0; filter:blur(.2px); animation:ino-blob 6s linear infinite;
  border-radius:63% 37% 54% 46% / 55% 48% 52% 45%;
}
.inopricing .plan.is-featured .blob{
  background: radial-gradient(60% 60% at 50% 40%, rgba(255,255,255,.22), transparent),
              radial-gradient(100% 100% at 50% 50%, color-mix(in oklab, var(--ino-accent3) 60%, transparent), color-mix(in oklab, var(--ino-accent2) 50%, transparent));
}
@keyframes ino-blob{ 0%,100%{border-radius:63% 37% 54% 46% / 55% 48% 52% 45%} 14%{border-radius:40% 60% 54% 46% / 49% 60% 40% 51%} 28%{border-radius:54% 46% 38% 62% / 49% 70% 30% 51%} 42%{border-radius:61% 39% 55% 45% / 61% 38% 62% 39%} 56%{border-radius:61% 39% 67% 33% / 70% 50% 50% 30%} 70%{border-radius:50% 50% 34% 66% / 56% 68% 32% 44%} 84%{border-radius:46% 54% 50% 50% / 35% 61% 39% 65%} }

/* 7) Başlık + fiyat */
.inopricing .plan-head{ position:relative; z-index:1; display:grid; place-items:center; padding:2.4rem 1rem 1rem; text-align:center; }
.inopricing .plan-title{ margin:0 0 .375rem; letter-spacing:2px; text-transform:uppercase; font-weight:800; font-size:1.05rem; color:var(--ino-text); }
.inopricing .price-wrap{ position:relative; height:56px; margin:.35rem 0 .35rem; }
.inopricing .price{
  position:absolute; inset:0; display:grid; place-items:center; font-weight:800; font-size:2rem; letter-spacing:.25px;
  color:var(--ino-text); text-shadow:0 0 22px color-mix(in oklab, var(--ino-accent1) 30%, transparent);
  opacity:0; transform:translateY(4px) scale(.98); transition:opacity .25s ease, transform .25s ease;
}
.inopricing .price .cur{ font-size:1.05rem; margin-right:.1rem; }
.inopricing .price .per{ font-size:.875rem; font-weight:700; opacity:.8; margin-left:.25rem; }

/* Aylık varsayılan; Yıllık için checkbox işaretlenince görünür */
.inopricing .price-monthly{ opacity:1; transform:translateY(0) scale(1); }
.inopricing .billing:checked ~ .plans .price-monthly{ opacity:0; transform:translateY(-6px) scale(.98); pointer-events:none; }
.inopricing .billing:checked ~ .plans .price-yearly{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }

/* Yalnızca yıllıkta uyarı rozeti */
.inopricing .save-flag{ display:none; margin-top:.25rem; font-size:.75rem; font-weight:800; color:#051125; background:linear-gradient(90deg,var(--ino-accent3),var(--ino-accent2)); padding:.2rem .5rem; border-radius:.35rem; }
.inopricing .billing:checked ~ .plans .plan .save-flag{ display:inline-block; }

/* 8) Özellik listesi */
.inopricing .features{ margin:.75rem 0 1rem; padding:0 1rem; }
.inopricing .features li{
  list-style:none; display:grid; grid-template-columns:22px 1fr; align-items:start; gap:.5rem; padding:.35rem 0;
  font-weight:600; color:var(--ino-text);
}
.inopricing .features .dot{
  margin-top:.4rem; width:10px; height:10px; border-radius:50%;
  background: radial-gradient(circle at 35% 35%, var(--ino-accent1), var(--ino-accent2));
  box-shadow:0 0 0 3px rgba(255,255,255,.04), 0 0 12px color-mix(in oklab, var(--ino-accent1) 45%, transparent);
}
.inopricing .features .muted{ opacity:.45; text-decoration:line-through; }

/* 9) CTA düğmesi – neon */
.inopricing .plan-cta{ display:grid; place-items:center; padding-top:.5rem; }
.inopricing .btn{
  display:inline-block; padding:.85rem 1.15rem; border-radius:.75rem;
  background: linear-gradient(90deg, var(--ino-accent1), var(--ino-accent2));
  color:#051125; text-decoration:none; font-weight:900; letter-spacing:.3px;
  box-shadow:0 0 0 2px rgba(255,255,255,.05) inset, 0 0 22px color-mix(in oklab, var(--ino-accent1) 35%, transparent);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.inopricing .btn:hover{ transform:translateY(-2px); box-shadow:0 0 0 2px rgba(255,255,255,.08) inset, 0 0 28px color-mix(in oklab, var(--ino-accent2) 40%, transparent); }
.inopricing .plan.is-featured .btn{
  background: linear-gradient(90deg, var(--ino-accent3), var(--ino-accent2));
}

/* 10) Şerit (Önerilen) */
.inopricing .ribbon{
  position:absolute; top:14px; right:-42px; transform:rotate(35deg);
  background: linear-gradient(90deg, var(--ino-accent3), var(--ino-accent2));
  color:#00120a; font-size:.72rem; font-weight:900; padding:.4rem 2.4rem; letter-spacing:.5px;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}

/* 11) Alt not */
.inopricing .foot{ text-align:center; margin-top:1.25rem; color:var(--ino-muted-text); font-size:.9rem; }