:root{--text:#0b0b0e;--muted:#5a5a62;--border:#e5e7eb;--blue:#1d4ed8;--blue-dark:#1739a1;--bg:#ffffff;--sweepStrong:rgba(29,78,216,.85);--sweepWeak:rgba(29,78,216,.20);--lineW:clamp(1px,0.25vw,2px)}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:radial-gradient(circle at center,rgba(0,0,0,.06) 1px,transparent 1px) 0 0/12px 12px,linear-gradient(#fff,#fff)}

.container{max-width:1100px;margin:0 auto;padding:0 24px}

.site-header{position:sticky;top:0;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid rgba(0,0,0,.04);transition:transform 280ms ease, opacity 280ms ease}
.site-header.is-hidden{transform:translateY(-100%);opacity:0;pointer-events:none}
.header-inner{height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.3px;text-decoration:none;color:var(--text)}
.logo img{height:28px;width:auto}

.store-cta{display:flex;align-items:center;gap:10px}
.store-badge{display:inline-flex;align-items:center;gap:8px;background:#0b0b0e;color:#fff;border-radius:12px;padding:8px 12px;font-weight:600;line-height:1;text-decoration:none;user-select:none;pointer-events:none;opacity:.95}
.store-badge .icon{height:20px;width:20px;display:block;object-fit:contain}
.store-badge .texts{display:flex;flex-direction:column}
.store-badge .small{font-size:10px;opacity:.8}
.store-badge .brand{font-size:13px;letter-spacing:.2px}

.nav-links{display:flex;gap:22px}
.nav-links a{color:var(--muted);text-decoration:none;font-weight:500}
.nav-links a:hover{color:var(--text)}

.header-actions{display:flex;gap:12px;align-items:center}
.signin{padding:8px 12px;border-radius:8px;color:var(--text);text-decoration:none}
.demo-btn{display:inline-flex;align-items:center;gap:6px;background:var(--blue);color:#fff;text-decoration:none;border-radius:10px;padding:10px 14px;font-weight:600;box-shadow:0 6px 16px rgba(29,78,216,.25)}
.demo-btn:hover{background:var(--blue-dark)}
.arrow{transform:translateY(1px)}

.hero{padding:96px 0 40px}
.hero h1{font-weight:800;font-size:clamp(36px,7vw,80px);letter-spacing:-.02em;line-height:1.05;margin:0 0 16px}
.break{display:inline-block;width:8px}
.subtext{margin:0 0 28px;max-width:100%;color:var(--muted);font-size:clamp(14px,2vw,18px);line-height:1.6}

/* Pilller için tek satır ölçekleme */
.pill-list{display:flex;flex-wrap:nowrap;position:relative;z-index:1;
  --pillScale:1;
  --pillFS:clamp(12px,1.8vw,15px);
  --pillPY:clamp(6px,1vw,10px);
  --pillPX:clamp(10px,1.6vw,14px);
  --pillGap:clamp(6px,1.2vw,10px);
  gap:calc(var(--pillGap)*var(--pillScale));
}
.pill{appearance:none;border:1px solid var(--border);background:rgba(255,255,255,.6);color:#2d2d31;font-weight:500;border-radius:999px;
  padding:calc(var(--pillPY)*var(--pillScale)) calc(var(--pillPX)*var(--pillScale));
  font-size:calc(var(--pillFS)*var(--pillScale));
  cursor:pointer;white-space:nowrap;line-height:1.1;
  transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease; /* width/height animasyonunu kaldır */
}
.pill:hover{border-color:#cfd3d9;box-shadow:0 4px 12px rgba(0,0,0,.06)}
.pill.is-hidden{display:none !important}

/* Çizgi alanı */
.lines-wrap{position:relative;height:clamp(120px,24vw,240px);margin-top:-10px} /* pill'lere biraz bindir */
.hero-lines{position:absolute;inset:0;pointer-events:none;overflow:visible}
.hero-lines .line{fill:none;stroke:rgba(0,0,0,.18);stroke-width:var(--lineW)}
 .hero-lines .line-sweep{fill:none;stroke:var(--sweepStrong);stroke-width:var(--lineW);stroke-linecap:round;will-change:stroke-dashoffset;animation:lineSweep 2000ms linear infinite;animation-delay:var(--sweep-delay,0ms)}
 @keyframes lineSweep{from{stroke-dashoffset:var(--sweep-start)}to{stroke-dashoffset:var(--sweep-end)}}

/* Birleşim noktasındaki logo */
.lines-logo{position:absolute;left:0;top:0;transform:translate(-50%,-50%);height:clamp(40px,7vw,84px);width:auto;z-index:2;pointer-events:none;opacity:.98;filter:drop-shadow(0 4px 16px rgba(29,78,216,.30));will-change:transform;animation:logoPulse 2600ms ease-in-out infinite}
@keyframes logoPulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.06)}}

/* Bölüm şablonları */
.section{padding:72px 0}
.section h2{font-weight:800;font-size:clamp(24px,4.2vw,36px);letter-spacing:-.01em;margin:0 0 22px}

/* Features Timeline */
.features .container{position:relative;overflow:hidden}
.features .container::before{content:"";position:absolute;left:var(--timelineX,50%);top:calc(-1 * var(--timelineTopShift,0px));transform:translateX(-50%);width:var(--lineW);height:var(--timelineHeight,100%);background:linear-gradient(to bottom, rgba(0,0,0,.18) 0%, rgba(0,0,0,.18) 85%, rgba(0,0,0,.10) 94%, rgba(0,0,0,0) 100%);z-index:0}
.features .container::after{content:"";position:absolute;left:var(--timelineX,50%);top:calc(-1 * var(--timelineTopShift,0px) + var(--timelineHighlightTop,0px));transform:translateX(-50%);width:var(--lineW);height:var(--timelineHighlightSize,100px);background:linear-gradient(to bottom, var(--sweepStrong), var(--sweepWeak));box-shadow:0 0 12px var(--sweepWeak);border-radius:calc(var(--lineW)/2);z-index:1}
.features-timeline{display:grid;grid-template-columns:1fr;gap:0}
 .feature-item{position:relative;display:flex;align-items:center;gap:12px;border:1px solid var(--border);background:rgba(255,255,255,.7);border-radius:14px;padding:16px;box-shadow:0 6px 18px rgba(0,0,0,.04);max-width:460px;z-index:1;min-height:var(--featureCardHeight,100vh)}
.feature-item.left{justify-self:start;margin-right:auto}
.feature-item.right{justify-self:end;margin-left:auto}
.feat-image{width:56px;height:56px;border-radius:10px;object-fit:cover;background:#f3f4f6}
.feat-content h3{margin:0 0 6px;font-weight:700;font-size:16px}
.feat-content p{margin:0;color:var(--muted);line-height:1.6}

.contact .contact-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:800px}
.contact .field{display:flex;flex-direction:column}
.contact label{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px}
.contact input,.contact textarea{border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:14px;background:#fff}
.contact input:disabled,.contact textarea:disabled{background:rgba(0,0,0,.03)}
.contact .field-full{grid-column:1/-1}
.contact .contact-submit{background:var(--blue);color:#fff;border:0;border-radius:10px;padding:10px 14px;font-weight:600;box-shadow:0 6px 16px rgba(29,78,216,.25);cursor:not-allowed;margin-top:4px}
.contact .form-note{margin-top:8px;color:var(--muted);font-size:12px}

.site-footer{border-top:1px solid rgba(0,0,0,.06);background:rgba(0,0,0,.02);padding:24px 0}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer-brand{display:inline-flex;align-items:center;gap:8px;color:var(--text);font-weight:700}
.footer-brand img{height:24px;width:auto}
.footer-links,.footer-social{display:flex;gap:12px;align-items:center}
.footer-links a,.footer-social a{color:var(--muted);text-decoration:none;font-weight:500}
.footer-links a:hover,.footer-social a:hover{color:var(--text)}
.footer-inner .copyright{flex:1 1 100%;margin-top:6px;color:var(--muted);font-size:12px}

/* ===== RESPONSIVE DESIGN - PROFESYONEL SEVİYE ===== */

/* Large Desktop (1200px+) - Varsayılan tasarım */

/* Desktop (1024px - 1199px) */
@media (max-width: 1199px) {
  .container { max-width: 960px; padding: 0 20px; }
  .hero { padding: 80px 0 60px; }
  .hero h1 { font-size: clamp(32px, 4vw, 42px); }
  .features-timeline { gap: 40px; }
  .feature-item { max-width: 420px; padding: 14px; }
  .feat-content h3 { font-size: 16px; }
  .feat-content p { font-size: 13px; }
}

/* Tablet Landscape (768px - 1023px) */
@media (max-width: 1023px) {
  .container { max-width: 720px; padding: 0 18px; }
  .nav-links { display: none; }
  .hero { padding: 70px 0 50px; }
  .hero h1 { font-size: clamp(28px, 5vw, 36px); }
  .hero .subtext { font-size: clamp(14px, 2.5vw, 16px); margin-bottom: 24px; }
  .store-cta { gap: 12px; }
  .store-badge { padding: 8px 12px; }
  
  /* Timeline Tablet Düzenlemesi - Çizgi kartların etrafını dolaşır */
  .features .container::before {
    /* Ana timeline çizgisini gizle */
    display: none !important;
    height: 0 !important;
  }
  
  .features .container::after {
    /* Highlight çizgisini de gizle */
    display: none !important;
    height: 0 !important;
  }
  
  /* Kartlar arası bağlantı çizgileri */
  .features-timeline { 
    grid-template-columns: 1fr; 
    gap: 30px; 
    align-items: center;
    padding: 0 20px;
    position: relative;
  }
  
  .feature-item { 
    max-width: 100%; 
    width: calc(100% - 40px);
    margin: 0 auto !important;
    padding: 16px;
    align-self: center;
    position: relative;
  }
  
  /* Her kartın altına bağlantı çizgisi ekle */
  .feature-item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -15px;
    transform: translateX(-50%);
    width: 2px;
    height: 30px;
    background: linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,.12));
    z-index: 0;
  }
  
  .feature-item.left, .feature-item.right {
    margin: 0 auto !important;
  }
  .feature-item::before { display: none; }
  
  .feat-content h3 { font-size: 15px; }
  .feat-content p { font-size: 12px; line-height: 1.5; }
  
  /* Timeline noktalarını kartların yanına konumlandır */
  .timeline-point {
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
  
  .contact .contact-form { 
    grid-template-columns: 1fr; 
    gap: 16px; 
    max-width: 600px; 
  }
  .section { padding: 50px 0; }
}

/* Tablet Portrait (600px - 767px) */
@media (max-width: 767px) {
  .container { max-width: 540px; padding: 0 16px; }
  .header-inner { height: 60px; }
  .hero { padding: 60px 0 40px; }
  .hero h1 { font-size: clamp(24px, 6vw, 32px); }
  .hero .subtext { font-size: clamp(13px, 3vw, 15px); margin-bottom: 20px; }
  
  .store-cta { 
    flex-direction: column; 
    gap: 10px; 
    align-items: center;
  }
  .store-badge { 
    width: 100%; 
    max-width: 200px; 
    justify-content: center; 
  }
  
  /* Timeline Tablet Portrait - Çizgi kartların etrafını dolaşır */
  .features .container::before { display: none; }
  .features .container::after { display: none; }
  
  .features-timeline { 
    gap: 25px; 
    padding: 0 15px;
    position: relative;
  }
  .feature-item { 
    width: calc(100% - 30px);
    padding: 14px;
    border-radius: 12px;
    position: relative;
  }
  
  /* Kartlar arası bağlantı çizgileri */
  .feature-item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -12px;
    transform: translateX(-50%);
    width: 2px;
    height: 25px;
    background: linear-gradient(to bottom, rgba(0,0,0,.16), rgba(0,0,0,.10));
    z-index: 0;
  }
  
  .feat-icon { width: 36px; height: 36px; }
  .feat-content h3 { font-size: 14px; }
  .feat-content p { font-size: 11px; }
  
  .timeline-point {
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
  
  .section { padding: 45px 0; }
  .contact .contact-form { max-width: 100%; }
}

/* Mobile Large (480px - 599px) */
@media (max-width: 599px) {
  .container { padding: 0 14px; }
  .header-inner { height: 56px; }
  .hero { padding: 50px 0 35px; }
  .hero h1 { font-size: clamp(22px, 7vw, 28px); }
  .hero .subtext { font-size: clamp(12px, 3.5vw, 14px); }
  
  .store-badge { 
    padding: 6px 10px; 
    border-radius: 8px; 
  }
  .store-badge .texts { display: none; }
  
  /* Timeline Mobile Large - Çizgi kartların etrafını dolaşır */
  .features .container::before { display: none; }
  .features .container::after { display: none; }
  
  .features-timeline { 
    gap: 20px; 
    padding: 0 10px;
    position: relative;
  }
  .feature-item { 
    width: calc(100% - 20px);
    padding: 12px;
    gap: 10px;
    position: relative;
  }
  
  /* Kartlar arası bağlantı çizgileri */
  .feature-item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    width: 2px;
    height: 20px;
    background: linear-gradient(to bottom, rgba(0,0,0,.14), rgba(0,0,0,.08));
    z-index: 0;
  }
  
  .feat-icon { width: 32px; height: 32px; }
  .feat-content h3 { font-size: 13px; }
  .feat-content p { font-size: 10px; line-height: 1.4; }
  
  .timeline-point {
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
  
  .section { padding: 40px 0; }
  .footer-inner { 
    flex-direction: column; 
    align-items: flex-start; 
    gap: 12px; 
  }
}

/* Mobile Medium (375px - 479px) */
@media (max-width: 479px) {
  .container { padding: 0 12px; }
  .hero { padding: 45px 0 30px; }
  .hero h1 { font-size: clamp(20px, 8vw, 26px); }
  .hero .subtext { font-size: clamp(11px, 4vw, 13px); }
  
  .store-cta { gap: 8px; }
  .store-badge { padding: 5px 8px; }
  
  /* Timeline Mobile Medium - Çizgi kartların etrafını dolaşır */
  .features .container::before { display: none; }
  .features .container::after { display: none; }
  
  .features-timeline { 
    gap: 18px; 
    padding: 0 8px;
    position: relative;
  }
  .feature-item { 
    width: calc(100% - 16px);
    padding: 10px;
    gap: 8px;
    border-radius: 10px;
    position: relative;
  }
  
  /* Kartlar arası bağlantı çizgileri */
  .feature-item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -9px;
    transform: translateX(-50%);
    width: 2px;
    height: 18px;
    background: linear-gradient(to bottom, rgba(0,0,0,.12), rgba(0,0,0,.06));
    z-index: 0;
  }
  
  .feat-icon { width: 28px; height: 28px; }
  .feat-content h3 { font-size: 12px; }
  .feat-content p { font-size: 9px; }
  
  .timeline-point {
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
  
  .section { padding: 35px 0; }
}

/* Mobile Small (320px - 374px) */
@media (max-width: 374px) {
  .container { padding: 0 10px; }
  .header-inner { height: 52px; }
  .hero { padding: 40px 0 25px; }
  .hero h1 { font-size: clamp(18px, 9vw, 24px); }
  .hero .subtext { font-size: clamp(10px, 4.5vw, 12px); }
  
  .store-badge { 
    padding: 4px 6px; 
    font-size: 10px; 
  }
  
  /* Timeline Mobile Small - Çizgi kartların etrafını dolaşır */
  .features .container::before { display: none; }
  .features .container::after { display: none; }
  
  .features-timeline { 
    gap: 15px; 
    padding: 0 5px;
    position: relative;
  }
  .feature-item { 
    width: calc(100% - 10px);
    padding: 8px;
    gap: 6px;
    position: relative;
  }
  
  /* Kartlar arası bağlantı çizgileri */
  .feature-item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    transform: translateX(-50%);
    width: 2px;
    height: 15px;
    background: linear-gradient(to bottom, rgba(0,0,0,.08), rgba(0,0,0,.04));
    z-index: 0;
  }
  
  .feat-icon { width: 24px; height: 24px; }
  .feat-content h3 { font-size: 11px; }
  .feat-content p { font-size: 8px; line-height: 1.3; }
  
  .timeline-point {
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
  
  .section { padding: 30px 0; }
  .contact .contact-form { gap: 10px; }
  .contact input, .contact textarea { 
    padding: 8px 10px; 
    font-size: 12px; 
  }
}
/* Timeline noktaları ve bağlaçları */
.timeline-point{position:absolute;left:var(--timelineX,50%);transform:translate(-50%,-50%);width:calc(var(--lineW)*2.6);height:calc(var(--lineW)*2.6);border-radius:999px;background:var(--sweepStrong);box-shadow:0 0 10px var(--sweepWeak);z-index:2}
/* connectors removed */
/* Feature kart açılma animasyonu */
.feature-item{transition:opacity 360ms ease, transform 360ms ease, box-shadow 360ms ease;opacity:0;transform:translateY(16px);visibility:hidden;will-change:opacity,transform}
 .feature-item.is-opened{opacity:1;transform:none;box-shadow:0 8px 22px rgba(0,0,0,.06);visibility:visible;height:var(--featureCardHeight,100vh);min-height:var(--featureCardHeight,100vh);background:rgba(255,255,255,.98);backdrop-filter:blur(20px);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.15);padding:16px;margin:8px 0;transition:all .8s cubic-bezier(.4,0,.2,1)}

/* Professional Animation Style 1: Subtle Fade & Scale */
.feature-item.animation-style-1.is-opened{transform:scale(1);opacity:1}

/* Professional Animation Style 2: Gentle Slide Up */
.feature-item.animation-style-2.is-opened{transform:translateY(0) scale(1);opacity:1}

/* Professional Animation Style 3: Soft Blur to Focus */
.feature-item.animation-style-3.is-opened{transform:scale(1);filter:blur(0);opacity:1}

/* Professional Animation Style 4: Minimal Slide Left */
.feature-item.animation-style-4.is-opened{transform:translateX(0) scale(1);opacity:1}

.feature-item{transform-origin:center center;perspective:1000px;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1)}

/* Kapanış animasyonları tamamen kaldırıldı - sadece açılış animasyonu */
.contact .contact-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:800px}
.contact .field{display:flex;flex-direction:column}
.contact label{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px}
.contact input,.contact textarea{border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:14px;background:#fff}
.contact input:disabled,.contact textarea:disabled{background:rgba(0,0,0,.03)}
.contact .field-full{grid-column:1/-1}
.contact .contact-submit{background:var(--blue);color:#fff;border:0;border-radius:10px;padding:10px 14px;font-weight:600;box-shadow:0 6px 16px rgba(29,78,216,.25);cursor:not-allowed;margin-top:4px}
.contact .form-note{margin-top:8px;color:var(--muted);font-size:12px}

.site-footer{border-top:1px solid rgba(0,0,0,.06);background:rgba(0,0,0,.02);padding:24px 0}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer-brand{display:inline-flex;align-items:center;gap:8px;color:var(--text);font-weight:700}
.footer-brand img{height:24px;width:auto}
.footer-links,.footer-social{display:flex;gap:12px;align-items:center}
.footer-links a,.footer-social a{color:var(--muted);text-decoration:none;font-weight:500}
.footer-links a:hover,.footer-social a:hover{color:var(--text)}
.footer-inner .copyright{flex:1 1 100%;margin-top:6px;color:var(--muted);font-size:12px}

@media (max-width:900px){.nav-links{display:none}.hero{padding-top:72px}.features-timeline{grid-template-columns:1fr}.feature-item{max-width:100%}.contact .contact-form{grid-template-columns:1fr}}
@media (max-width:520px){
  .container{padding:0 18px}
  .header-inner{height:56px}
  .store-badge{padding:6px 8px;border-radius:10px}
  .store-badge .texts{display:none}
  .store-cta{gap:8px}
  .section{padding:56px 0}
  .features-grid{grid-template-columns:1fr}
  .footer-inner{flex-direction:column;align-items:flex-start}
}