/* ==========================================================================
   OTOFOL — Components
   ========================================================================== */

/* -------------------------------- Hero --------------------------------- */
.hero{ padding-top: calc(var(--nav-h) + 88px); padding-bottom:80px; position:relative; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:0; background:
    radial-gradient(50% 40% at 82% 8%, rgba(31,191,92,.22) 0%, rgba(31,191,92,0) 60%),
    radial-gradient(40% 30% at 10% 90%, rgba(31,191,92,.1) 0%, rgba(31,191,92,0) 60%); }
.hero__grid{ position:absolute; inset:0; z-index:0; opacity:.5;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: radial-gradient(60% 60% at 60% 20%, black, transparent 80%); }
.hero__inner{ position:relative; z-index:1; display:grid; grid-template-columns: 1.05fr .95fr; gap:56px; align-items:center; }
.hero__copy p.lead{ margin:20px 0 34px; max-width:520px; }
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; }
.hero__trust{ display:flex; align-items:center; gap:18px; margin-top:36px; color:var(--text-tertiary); font-size:13px; }
.hero__trust .dots{ display:flex; }
.hero__trust .dots span{ width:8px;height:8px;border-radius:50%; background:var(--brand-green); margin-left:-6px; border:2px solid var(--bg-base); }

/* Work-order "ticket" — signature hero element: a live status trail mirroring
   the product's real state machine (Bekliyor → ... → Teslim Edildi). */
.ticket{
  position:relative; background: var(--bg-elevated); border:1px solid var(--border-soft);
  border-radius: var(--r-xl); padding:28px; box-shadow: var(--shadow-lg);
}
.ticket::after{ content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background: linear-gradient(160deg, rgba(31,191,92,.5), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; }
.ticket__top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
.ticket__plate{ font-family:var(--font-mono); font-size:13px; letter-spacing:.06em; color:var(--text-secondary); border:1px solid var(--border-soft-2); border-radius:8px; padding:6px 10px; }
.ticket__live{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--brand-green-light); font-family:var(--font-mono); }
.ticket__live::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--brand-green); box-shadow:0 0 8px 2px rgba(31,191,92,.7); animation: pulse-dot 1.6s ease-in-out infinite; }
.ticket__car{ font-family:var(--font-display); font-size:1.15rem; margin-bottom:4px; }
.ticket__meta{ color:var(--text-tertiary); font-size:13px; margin-bottom:26px; }
.ticket__steps{ display:flex; flex-direction:column; gap:0; }
.ticket__step{ display:flex; align-items:flex-start; gap:14px; padding:10px 0; position:relative; }
.ticket__step .node{ width:20px; height:20px; border-radius:50%; border:2px solid var(--border-soft-2); background:var(--bg-elevated-2); flex-shrink:0; margin-top:2px; position:relative; z-index:1; transition: all .4s var(--ease); }
.ticket__step .line{ position:absolute; left:9px; top:22px; bottom:-10px; width:2px; background:var(--border-soft-2); }
.ticket__step:last-child .line{ display:none; }
.ticket__step .label{ font-size:14px; color:var(--text-tertiary); font-weight:500; }
.ticket__step .time{ margin-left:auto; font-family:var(--font-mono); font-size:12px; color:var(--text-tertiary); }
.ticket__step.is-done .node{ background:var(--brand-green); border-color:var(--brand-green); box-shadow:0 0 0 4px rgba(31,191,92,.15); }
.ticket__step.is-done .line{ background:var(--brand-green); }
.ticket__step.is-done .label{ color:var(--text-primary); }
.ticket__step.is-active .node{ background: var(--bg-base); border-color:var(--brand-green); box-shadow: 0 0 0 4px rgba(31,191,92,.18); }
.ticket__step.is-active .node::after{ content:''; position:absolute; inset:4px; border-radius:50%; background:var(--brand-green); animation: pulse-dot 1.4s ease-in-out infinite; }
.ticket__step.is-active .label{ color:var(--brand-green-light); font-weight:600; }
.ticket__foot{ display:flex; justify-content:space-between; align-items:center; margin-top:22px; padding-top:18px; border-top:1px dashed var(--border-soft-2); font-size:13px; }
.ticket__foot .price{ font-family:var(--font-mono); color:var(--text-primary); font-weight:600; }

/* -------------------------------- Feature bento --------------------------------- */
.bento{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px; }
.bento .card:nth-child(1),.bento .card:nth-child(4){ grid-column: span 2; }
.bento .card:nth-child(2),.bento .card:nth-child(3){ grid-column: span 2; }

/* -------------------------------- Platform row --------------------------------- */
.platforms{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; }
.platform-pill{ flex:1; min-width:150px; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; padding:28px 16px; border:1px solid var(--border-soft); border-radius:var(--r-lg); background:var(--bg-elevated); transition: all .35s var(--ease); }
.platform-pill:hover{ border-color:var(--border-glow); transform:translateY(-4px); }
.platform-pill svg{ width:30px; height:30px; color:var(--brand-green-light); }
.platform-pill span{ font-size:13.5px; color:var(--text-secondary); font-weight:500; }

/* -------------------------------- Advantages --------------------------------- */
.advantages{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.advantage{ text-align:center; padding:26px 14px; }
.advantage .card__icon{ margin-inline:auto; }

/* -------------------------------- Reference / logo wall --------------------------------- */
/* Each card sets --ref-color inline (e.g. style="--ref-color:#4F8AF4") so the
   glass tint and glow match that specific client's brand color. */
.ref-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.ref-card{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  text-align:center; padding:40px 20px;
  border-radius: var(--r-lg);
  border:1px solid var(--border-soft);
  background: rgba(255,255,255,.035);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  transition: transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.ref-card:hover{
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--ref-color, var(--brand-green)) 55%, var(--border-soft-2));
  background: rgba(255,255,255,.055);
}
.ref-card__glow{
  position:absolute; inset:-30%; z-index:-1; pointer-events:none;
  background: radial-gradient(closest-side, var(--ref-color, var(--brand-green)) 0%, transparent 72%);
  opacity:.18; filter: blur(28px);
  transition: opacity .4s var(--ease);
}
.ref-card:hover .ref-card__glow{ opacity:.32; }
.ref-card__logo{
  width:64px; height:64px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.05);
  border:1px solid var(--border-soft-2);
  font-family: var(--font-display); font-weight:700; font-size:16px; letter-spacing:.01em;
  color: var(--ref-color, var(--brand-green-light));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.ref-card__name{ font-size:13.5px; color:var(--text-secondary); font-weight:500; }
.ref-card__tag{ font-family:var(--font-mono); font-size:11px; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:.05em; }

/* -------------------------------- Testimonials --------------------------------- */
.testimonials{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.testimonial{ display:flex; flex-direction:column; gap:18px; }
.testimonial__stars{ color:var(--brand-amber); font-size:15px; letter-spacing:2px; }
.testimonial p{ color:var(--text-secondary); font-size:14.5px; }
.testimonial__who{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.testimonial__avatar{ width:42px; height:42px; border-radius:50%; background:var(--grad-brand); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; color:var(--text-on-brand); font-size:14px; }
.testimonial__who strong{ display:block; font-size:14px; }
.testimonial__who span{ font-size:12.5px; color:var(--text-tertiary); }

/* -------------------------------- CTA banner --------------------------------- */
.cta-banner{ position:relative; border-radius:var(--r-xl); padding:64px 48px; text-align:center; overflow:hidden; background: linear-gradient(160deg, var(--bg-elevated), var(--bg-elevated-2)); border:1px solid var(--border-soft); }
.cta-banner::before{ content:''; position:absolute; inset:0; background: var(--grad-glow); opacity:.9; }
.cta-banner__inner{ position:relative; z-index:1; }
.cta-banner .btn-row{ display:flex; gap:14px; justify-content:center; margin-top:28px; flex-wrap:wrap; }

/* -------------------------------- Pricing --------------------------------- */
.billing-toggle{ display:flex; align-items:center; justify-content:center; gap:14px; margin: 0 auto 56px; width:fit-content; background:var(--bg-elevated); border:1px solid var(--border-soft); padding:6px; border-radius:var(--r-full); }
.billing-toggle button{ padding:10px 20px; border-radius:var(--r-full); font-size:13.5px; font-weight:600; color:var(--text-secondary); transition:all .3s var(--ease); position:relative; }
.billing-toggle button.is-active{ background:var(--grad-brand); color:var(--text-on-brand); }
.billing-toggle .save-tag{ background:rgba(245,166,35,.15); color:var(--brand-amber); font-size:11px; padding:2px 8px; border-radius:var(--r-full); margin-left:8px; font-family:var(--font-mono); }

.pricing-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; align-items:stretch; }
.price-card{ display:flex; flex-direction:column; position:relative; }
.price-card.is-popular{ border-color: var(--border-glow); background: linear-gradient(160deg, rgba(31,191,92,.09), var(--bg-elevated) 60%); box-shadow: var(--shadow-glow); transform: translateY(-10px); }
.price-card.is-popular:hover{ transform: translateY(-14px); }
.price-card__badges{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.price-card__name{ font-size:1.1rem; margin-bottom:6px; }
.price-card__desc{ color:var(--text-tertiary); font-size:13px; margin-bottom:22px; min-height:34px; }
.price-card__price{ display:flex; align-items:baseline; gap:8px; margin-bottom:4px; flex-wrap:wrap; }
.price-card__price .old{ font-family:var(--font-mono); color:var(--text-tertiary); text-decoration:line-through; font-size:14px; }
.price-card__price .new{ font-family:var(--font-mono); font-size:2.1rem; font-weight:700; color:var(--text-primary); }
.price-card__price .per{ color:var(--text-tertiary); font-size:13px; }
.price-card__yearly-note{ font-size:12px; color:var(--brand-green-light); margin-bottom:18px; visibility:hidden; height:16px; }
.price-card__yearly-note.show{ visibility:visible; }
.price-card__features{ flex:1; margin: 20px 0 24px; display:flex; flex-direction:column; gap:12px; }
.price-card__features li{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--text-secondary); }
.price-card__features li svg{ width:16px; height:16px; flex-shrink:0; margin-top:2px; color:var(--brand-green-light); }
.price-card__features li.disabled{ color:var(--text-tertiary); opacity:.55; }
.price-card__features li.disabled svg{ color:var(--text-tertiary); }

.compare-table-wrap{ overflow-x:auto; border-radius:var(--r-lg); border:1px solid var(--border-soft); }
table.compare{ width:100%; border-collapse:collapse; min-width:820px; background:var(--bg-elevated); }
table.compare th, table.compare td{ padding:16px 20px; text-align:center; border-bottom:1px solid var(--border-soft); font-size:13.5px; }
table.compare th:first-child, table.compare td:first-child{ text-align:left; color:var(--text-secondary); }
table.compare thead th{ font-family:var(--font-display); font-size:14px; color:var(--text-primary); background:var(--bg-elevated-2); }
table.compare td svg{ width:18px; height:18px; color:var(--brand-green-light); }
table.compare td .no{ color:var(--text-tertiary); }
table.compare tbody tr:hover{ background: rgba(255,255,255,.02); }

/* -------------------------------- FAQ --------------------------------- */
.faq-toolbar{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom:36px; }
.faq-search{ flex:1; min-width:240px; position:relative; }
.faq-search input{ width:100%; background:var(--bg-elevated); border:1px solid var(--border-soft); border-radius:var(--r-full); padding:14px 20px 14px 46px; font-size:14.5px; }
.faq-search svg{ position:absolute; left:16px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--text-tertiary); }
.faq-filters{ display:flex; gap:8px; flex-wrap:wrap; }
.faq-filters button{ padding:9px 16px; border-radius:var(--r-full); font-size:13px; font-weight:500; border:1px solid var(--border-soft); color:var(--text-secondary); transition:all .25s var(--ease); }
.faq-filters button.is-active{ background:var(--grad-brand); color:var(--text-on-brand); border-color:transparent; }
.faq-list{ display:flex; flex-direction:column; gap:12px; }
.faq-item{ border:1px solid var(--border-soft); border-radius:var(--r-md); background:var(--bg-elevated); overflow:hidden; transition:border-color .3s var(--ease); }
.faq-item.is-open{ border-color:var(--border-glow); }
.faq-item__q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 24px; text-align:left; font-size:15px; font-weight:600; }
.faq-item__q .q-text{ flex:1; min-width:0; }
.faq-item__q .q-right{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.faq-item__q .cat{ font-family:var(--font-mono); font-size:11px; color:var(--text-tertiary); font-weight:500; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; }
.faq-item__icon{ width:22px; height:22px; flex-shrink:0; position:relative; }
.faq-item__icon::before, .faq-item__icon::after{ content:''; position:absolute; background:var(--text-secondary); border-radius:2px; transition: transform .3s var(--ease); }
.faq-item__icon::before{ width:14px; height:2px; top:10px; left:4px; }
.faq-item__icon::after{ width:2px; height:14px; top:4px; left:10px; }
.faq-item.is-open .faq-item__icon::after{ transform: rotate(90deg); opacity:0; }
.faq-item.is-open .faq-item__icon::before{ background: var(--brand-green-light); }
.faq-item__a{ max-height:0; overflow:hidden; transition: max-height .4s var(--ease); }
.faq-item__a-inner{ padding: 0 24px 22px; color:var(--text-secondary); font-size:14.5px; max-width:760px; }
.faq-empty{ text-align:center; padding:60px 20px; color:var(--text-tertiary); display:none; }
.faq-empty.show{ display:block; }

/* -------------------------------- Timeline (About) --------------------------------- */
.timeline{ position:relative; padding-left:40px; }
.timeline::before{ content:''; position:absolute; left:9px; top:6px; bottom:6px; width:2px; background:linear-gradient(var(--brand-green), transparent 95%); }
.timeline-item{ position:relative; padding-bottom:44px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{ content:''; position:absolute; left:-40px; top:2px; width:20px; height:20px; border-radius:50%; background:var(--bg-elevated); border:2px solid var(--brand-green); box-shadow:0 0 0 4px rgba(31,191,92,.12); }
.timeline-item .year{ font-family:var(--font-mono); color:var(--brand-green-light); font-size:13px; margin-bottom:6px; display:block; }
.timeline-item h3{ margin-bottom:8px; }
.timeline-item p{ color:var(--text-secondary); font-size:14.5px; max-width:560px; }

/* -------------------------------- Values grid (About) --------------------------------- */
.values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }

/* -------------------------------- Contact --------------------------------- */
.contact-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:40px; align-items:flex-start; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-group{ margin-bottom:20px; }
.form-group label{ display:block; font-size:13.5px; font-weight:600; margin-bottom:8px; color:var(--text-secondary); }
.form-group input, .form-group textarea{
  width:100%; background:var(--bg-elevated-2); border:1px solid var(--border-soft); border-radius:var(--r-sm);
  padding:14px 16px; font-size:14.5px; transition:border-color .25s var(--ease), background .25s var(--ease);
}
.form-group input:focus, .form-group textarea:focus{ border-color:var(--brand-green); background:var(--bg-elevated-3); }
.form-group textarea{ resize:vertical; min-height:120px; }
.form-group .error-msg{ color:var(--brand-danger); font-size:12.5px; margin-top:6px; display:none; }
.form-group.has-error input, .form-group.has-error textarea{ border-color:var(--brand-danger); }
.form-group.has-error .error-msg{ display:block; }
.form-success{ display:none; align-items:center; gap:12px; background:rgba(31,191,92,.08); border:1px solid rgba(31,191,92,.3); color:var(--brand-green-light); padding:16px 20px; border-radius:var(--r-md); margin-bottom:20px; font-size:14px; }
.form-success.show{ display:flex; }

.contact-info-list{ display:flex; flex-direction:column; gap:20px; }
.contact-info-item{ display:flex; gap:16px; align-items:flex-start; }
.contact-info-item .card__icon{ margin-bottom:0; flex-shrink:0; }
.contact-info-item strong{ display:block; font-size:14.5px; margin-bottom:2px; }
.contact-info-item span, .contact-info-item a{ color:var(--text-secondary); font-size:14px; }
.map-embed{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--border-soft); height:220px; margin-top:24px; position:relative; }
.map-embed svg{ width:100%; height:100%; }
.live-chat-bubble{ position:fixed; bottom:26px; right:26px; z-index:900; display:flex; align-items:center; gap:10px; background:var(--grad-brand); color:var(--text-on-brand); padding:14px 20px; border-radius:var(--r-full); box-shadow:var(--shadow-glow); font-weight:600; font-size:14px; }
.live-chat-bubble svg{ width:20px; height:20px; }

/* -------------------------------- 404 --------------------------------- */
.error-page{ min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; padding: 140px 24px 80px; position:relative; overflow:hidden; }
.error-code{ font-family:var(--font-mono); font-size:clamp(6rem,18vw,11rem); font-weight:700; line-height:1; background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:-.03em; }
.error-page .plate{ margin-bottom:24px; }
.error-page .btn-row{ display:flex; gap:14px; justify-content:center; margin-top:32px; flex-wrap:wrap; }

/* -------------------------------- Legal pages --------------------------------- */
.legal-content{ max-width:760px; margin-inline:auto; }
.legal-content h2{ margin:44px 0 16px; font-size:1.4rem; }
.legal-content h2:first-child{ margin-top:0; }
.legal-content p, .legal-content li{ color:var(--text-secondary); font-size:15px; margin-bottom:14px; }
.legal-content ul{ padding-left:20px; list-style:disc; }
.legal-content strong{ color:var(--text-primary); }
.legal-updated{ color:var(--text-tertiary); font-size:13px; margin-bottom:44px; font-family:var(--font-mono); }

/* -------------------------------- Loading screen --------------------------------- */
.loader{ position:fixed; inset:0; background:var(--bg-base); z-index:9999; display:flex; align-items:center; justify-content:center; transition: opacity .5s var(--ease), visibility .5s var(--ease); }
.loader.is-hidden{ opacity:0; visibility:hidden; }
.loader__mark{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.loader__mark img{ height:34px; animation: pulse-scale 1.4s ease-in-out infinite; }
.loader__bar{ width:160px; height:3px; background:var(--bg-elevated-3); border-radius:2px; overflow:hidden; }
.loader__bar::after{ content:''; display:block; height:100%; width:40%; background:var(--grad-brand); animation: loader-bar 1.1s ease-in-out infinite; border-radius:2px; }

/* Back-to-top */
.back-to-top{ position:fixed; bottom:26px; left:26px; z-index:900; width:46px; height:46px; border-radius:50%; background:var(--bg-elevated); border:1px solid var(--border-soft); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transform:translateY(10px); transition:all .3s var(--ease); }
.back-to-top.show{ opacity:1; visibility:visible; transform:none; }
.back-to-top:hover{ border-color:var(--border-glow); color:var(--brand-green-light); }
.back-to-top svg{ width:18px; height:18px; }