/* ===========  Theme & Reset  =========== */
:root{
  --primary:#1e293b;
  --primary-light:#334155;
  --accent:#2563eb;
  --accent-light:#dbeafe;
  --accent-dark:#1e40af;
  --bg:#f8fafc;
  --card:#ffffff;
  --text:#1e293b;
  --text-light:#64748b;
  --border:#e2e8f0;
  --success:#16a34a;
  --radius:12px;
  --shadow:0 4px 20px rgba(0,0,0,.08);
  --shadow-lg:0 10px 40px rgba(0,0,0,.12);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ===========  Layout  =========== */
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Header */
.header{display:flex;justify-content:space-between;align-items:center;padding:20px 0;margin-bottom:10px}
.logo{font-size:28px;font-weight:800;color:var(--primary);letter-spacing:-.5px;display:flex;align-items:center;gap:10px}
.logo i{color:var(--accent)}
.btn-cta{
  background:var(--accent); color:#fff; padding:14px 28px; border-radius:50px; text-decoration:none;
  font-weight:700; display:inline-flex; align-items:center; gap:10px; box-shadow:var(--shadow);
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease; position:relative; overflow:hidden
}
.btn-cta:hover{transform:translateY(-2px); box-shadow:0 6px 20px rgba(37,99,235,.3); background:var(--accent-dark)}
.btn-cta::after{
  content:"";
  position:absolute; top:-50%; left:-50%; /* inset yerine uyumlu top/left */
  width:200%; height:200%;
  background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,.3),rgba(255,255,255,0));
  transform:rotate(30deg); animation:shimmer 3s infinite; opacity:0; transition:opacity .3s
}
.btn-cta:hover::after{opacity:1}
@keyframes shimmer{0%{transform:translateX(-100%) rotate(30deg)}100%{transform:translateX(100%) rotate(30deg)}}

/* ===========  Hero  =========== */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:30px 0}
@media (max-width:900px){.hero{grid-template-columns:1fr}}
.hero-image{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg)}
.hero-image img{transition:transform .5s ease}
.hero-image:hover img{transform:scale(1.03)}
.product-badge{
  position:absolute;top:15px;left:15px;background:var(--accent);color:#fff;
  padding:8px 16px;border-radius:50px;font-weight:700;font-size:14px;z-index:2
}
.hero-content{display:flex;flex-direction:column;justify-content:center}
.hero-content h1{font-size:32px;line-height:1.2;margin-bottom:15px;color:var(--primary)}
.hero-content p{color:var(--text-light);margin-bottom:20px;font-size:16px}
.price-container{display:flex;align-items:center;gap:15px;margin-bottom:20px}
.current-price{font-size:28px;font-weight:800;color:var(--accent)}
.old-price{font-size:18px;color:var(--text-light);text-decoration:line-through}
.discount-badge{background:var(--accent);color:#fff;padding:4px 10px;border-radius:4px;font-weight:700;font-size:14px}

.benefits{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:25px}
.benefit{
  display:flex;align-items:center;gap:8px;background:var(--accent-light);color:var(--accent);
  padding:8px 14px;border-radius:50px;font-size:14px;font-weight:500
}

/* ===========  Features  =========== */
.features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin:30px 0}
@media (max-width:600px){.features-grid{grid-template-columns:1fr}}
.feature-card{
  background:var(--card); border-radius:var(--radius); padding:20px; display:flex; align-items:center; gap:15px;
  box-shadow:var(--shadow); transition:transform .3s ease
}
.feature-card:hover{transform:translateY(-5px)}
.feature-icon{
  width:50px;height:50px;background:var(--accent-light);border-radius:12px;display:flex;align-items:center;justify-content:center;
  color:var(--accent);font-size:20px;flex-shrink:0
}
.feature-text h3{font-size:16px;margin-bottom:5px}
.feature-text p{font-size:14px;color:var(--text-light)}

/* ===========  Order Section  =========== */
.order-section{
  background:var(--card); border-radius:var(--radius); padding:30px; margin:40px 0; box-shadow:var(--shadow); position:relative; overflow:hidden
}
.order-section::before{
  content:""; position:absolute; top:0; left:0; right:0; height:5px;
  background:linear-gradient(to right,var(--accent),var(--accent-dark),var(--accent))
}
.section-title{font-size:24px;margin-bottom:20px;color:var(--primary);text-align:center}

/* Steps */
.progress-steps{display:flex;justify-content:space-between;margin-bottom:30px;position:relative}
.progress-steps::before{
  content:""; position:absolute; top:50%; left:0; right:0; height:4px;
  background:linear-gradient(to right,var(--accent),var(--accent-dark)); transform:translateY(-50%); z-index:1
}
.step{
  width:36px;height:36px;border-radius:50%;background:#fff;border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-weight:700;position:relative;z-index:2;transition:.3s
}
.step .step-label{
  position:absolute; top:100%; margin-top:8px; font-size:12px; color:var(--text-light); white-space:nowrap; left:50%; transform:translateX(-50%)
}
.step.active{background:var(--accent);color:#fff;border-color:var(--accent);transform:scale(1.2);box-shadow:0 5px 15px rgba(37,99,235,.3)}
.step.active .step-label{color:var(--accent);font-weight:600}

/* Live Stats */
.live-stats{
  display:flex;justify-content:space-around;background:linear-gradient(to right,var(--accent-light),#dbeafe);
  border:2px solid var(--accent);border-radius:var(--radius);padding:15px;margin-bottom:25px;position:relative;overflow:hidden
}
.live-stats::before{
  content:""; position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%233b82f6' fill-opacity='0.05'/%3E%3C/svg%3E");
  opacity:.3; z-index:0
}
.stat{display:flex;flex-direction:column;align-items:center;gap:5px;position:relative;z-index:1}
.stat i{color:var(--accent);font-size:18px}
.stat .count{
  font-weight:800;color:var(--accent-dark);font-size:24px;text-shadow:1px 1px 2px rgba(0,0,0,.1);
  background:rgba(255,255,255,.8);padding:4px 12px;border-radius:8px;min-width:60px;text-align:center
}
.stat .label{font-size:14px;color:var(--text);font-weight:600}

/* Packages */
.packages{display:flex;flex-direction:column;gap:15px;margin-bottom:25px}
.pkg{
  border:2px solid var(--border); border-radius:var(--radius); padding:20px; cursor:pointer;
  transition:transform .3s cubic-bezier(.25,.8,.25,1), box-shadow .3s, border-color .3s;
  position:relative; background:#fff
}
.pkg:hover{border-color:var(--accent);transform:translateY(-5px);box-shadow:0 15px 30px rgba(0,0,0,.1)}
.pkg.popular{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-light)}
.pkg.popular::before{
  content:"EN POPÜLER"; position:absolute; top:-10px; right:20px; background:var(--accent); color:#fff;
  padding:4px 12px; border-radius:20px; font-size:12px; font-weight:700
}
.pkg.selected{border-width:3px;border-color:var(--accent);background:var(--accent-light);box-shadow:0 10px 30px rgba(37,99,235,.2);transform:scale(1.02)}
.pkg.selected:hover{transform:scale(1.02);box-shadow:0 10px 30px rgba(37,99,235,.2)} /* seçili kart hover sabit kalsın */
.pkg-content{display:flex;align-items:center;gap:15px}
.pkg-radio{
  width:24px;height:24px;border:2px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#fff;transition:.3s
}
.pkg.selected .pkg-radio{background:var(--accent);border-color:var(--accent);color:#fff}
.pkg-details{flex-grow:1}
.pkg-title{font-weight:700;margin-bottom:5px;display:flex;align-items:center;gap:10px}
.pkg-badge{background:var(--primary);color:#fff;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:600}
.pkg-desc{font-size:14px;color:var(--text-light)}
.pkg-price{text-align:right}
.price-main{font-size:20px;font-weight:800;color:var(--primary)}
.price-old{font-size:14px;color:var(--text-light);text-decoration:line-through}

/* Form */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:25px}
@media (max-width:768px){.form-grid{grid-template-columns:1fr}}
.form-group{margin-bottom:15px}
.form-group.full{grid-column:1 / -1}
.form-label{display:block;margin-bottom:8px;font-weight:600;font-size:14px}
.input-wrapper{position:relative}
.input-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--text-light)}
.form-input{
  width:100%; padding:15px 15px 15px 45px; border:1px solid var(--border); border-radius:var(--radius); font-size:16px; transition:.3s
}
.form-input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.2);transform:translateY(-2px)}
textarea.form-input{min-height:100px;resize:vertical}
.help-text{font-size:13px;color:var(--text-light);margin-top:5px}
.error-text{font-size:13px;color:#dc2626;margin-top:5px;display:none}

.form-input.valid{
  border-color:var(--success);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2316a34a'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:20px
}
.form-input.invalid{
  border-color:#dc2626;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23dc2626'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:20px
}

/* Payment */
.payment-options{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:25px}
@media (max-width:480px){.payment-options{grid-template-columns:1fr}}
.payment-option{
  border:2px solid var(--border); border-radius:var(--radius); padding:15px; text-align:center; cursor:pointer; transition:.3s
}
.payment-option:hover{border-color:var(--accent); transform:translateY(-3px); box-shadow:0 10px 25px rgba(0,0,0,.1)}
.payment-option.selected{
  border-width:3px;border-color:var(--accent);background:var(--accent-light);box-shadow:0 8px 20px rgba(37,99,235,.2);
  transform:scale(1.03); position:relative
}
.payment-option.selected::after{
  content:"✓ SEÇİLDİ"; position:absolute; top:-8px; right:10px; background:var(--primary); color:#fff;
  padding:2px 8px; border-radius:12px; font-size:10px; font-weight:bold
}
.payment-icon{font-size:24px;margin-bottom:10px;color:var(--text-light)}
.payment-option.selected .payment-icon{color:var(--accent)}
.payment-name{font-weight:600}

/* Submit */
.submit-btn{
  width:100%; padding:18px; background:var(--accent); color:#fff; border:0; border-radius:var(--radius);
  font-size:18px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px;
  box-shadow:var(--shadow); transition:.3s; position:relative; overflow:hidden
}
.submit-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(37,99,235,.3);background:var(--accent-dark)}
.submit-btn::after{
  content:""; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
  background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,.3),rgba(255,255,255,0));
  transform:rotate(30deg); animation:shimmer 3s infinite; opacity:0; transition:opacity .3s
}
.submit-btn:hover::after{opacity:1}

/* Summary */
.summary{background:#fff;border:1px dashed var(--border);border-radius:var(--radius);padding:14px}

/* Info cards */
.info-sections{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin:40px 0}
@media (max-width:900px){.info-sections{grid-template-columns:1fr}}
.info-card{background:var(--card);border-radius:var(--radius);padding:25px;box-shadow:var(--shadow)}
.info-card h3{font-size:20px;margin-bottom:15px;color:var(--primary);display:flex;align-items:center;gap:10px}
.info-card ul{list-style:none}
.info-card li{margin-bottom:12px;padding-left:25px;position:relative}
.info-card li::before{content:"•";color:var(--accent);font-weight:bold;position:absolute;left:0}
.info-card strong{color:var(--primary)}

/* Footer */
.footer{text-align:center;padding:30px 0;margin-top:40px;border-top:1px solid var(--border);color:var(--text-light)}
.footer-links{display:flex;justify-content:center;gap:20px;margin-bottom:15px}
.footer-link{color:var(--text-light);text-decoration:none;transition:color .3s}
.footer-link:hover{color:var(--accent)}

/* Sticky Bar */
.sticky-bar{
  position:fixed; bottom:0; left:0; right:0; background:var(--card); padding:15px 0;
  box-shadow:0 -5px 25px rgba(0,0,0,.15); transform:translateY(100%); transition:transform .4s ease; z-index:100
}
.sticky-bar.visible{transform:translateY(0)}
.sticky-container{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;padding:0 20px}
.sticky-text{font-weight:700;display:flex;align-items:center;gap:10px}
.sticky-text i{color:var(--accent)}
.sticky-btn{
  padding:12px 25px;background:var(--accent);color:#fff;border:0;border-radius:50px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;gap:8px;box-shadow:var(--shadow);transition:.3s;position:relative;overflow:hidden;animation:pulse 2s infinite
}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}
.sticky-btn:hover{
  animation:none; /* hover anında pulse'ı durdur, çakışmayı önle */
  transform:translateY(-2px) scale(1.05);
  box-shadow:0 6px 20px rgba(37,99,235,.3);
  background:var(--accent-dark)
}
.sticky-btn::after{
  content:""; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
  background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,.3),rgba(255,255,255,0));
  transform:rotate(30deg); animation:shimmer 3s infinite; opacity:0; transition:opacity .3s
}
.sticky-btn:hover::after{opacity:1}

/* Modals (generic) */
.modal, .policy-modal{
  position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:.3s; z-index:1000; padding:20px
}
.modal.visible, .policy-modal.visible{opacity:1; visibility:visible}
.modal-content, .policy-content{
  background:var(--card); border-radius:var(--radius); padding:30px; width:100%; max-width:800px; max-height:80vh; overflow-y:auto;
  box-shadow:var(--shadow-lg); position:relative; transform:translateY(20px); transition:transform .3s ease
}
.modal.visible .modal-content, .policy-modal.visible .policy-content{transform:translateY(0)}
.modal-title, .policy-title{font-size:22px;margin-bottom:15px;color:var(--primary)}
.modal-close{
  position:absolute; top:15px; right:15px; background:none; border:0; font-size:20px; color:var(--text-light); cursor:pointer
}
.modal-buttons{display:flex;gap:15px;justify-content:flex-end;margin-top:20px}
.modal-btn{padding:10px 20px;border-radius:var(--radius);font-weight:600;cursor:pointer;border:0;transition:.2s}
.modal-btn.cancel{background:var(--border);color:var(--text)}
.modal-btn.confirm{background:var(--accent);color:#fff}

/* Policy text */
.policy-text{line-height:1.6;color:var(--text)}

/* Sales popup (optional) */
.sales-popup{
  position:fixed; bottom:20px; left:20px; background:var(--card); border-radius:var(--radius); padding:15px; box-shadow:var(--shadow-lg);
  display:flex; align-items:center; gap:15px; transform:translateX(-100%); transition:transform .5s ease; z-index:90; max-width:350px; border-left:4px solid var(--accent)
}
.sales-popup.visible{transform:translateX(0)}
.popup-image{width:50px;height:50px;border-radius:8px;object-fit:cover}
.popup-content p{font-weight:600;margin-bottom:5px}
.popup-content span{font-size:13px;color:var(--text-light)}

/* Utilities */
.hidden{display:none}
.text-center{text-align:center}
.mt-20{margin-top:20px}
.mb-20{margin-bottom:20px}
.pulse{animation:pulse 2s infinite} /* eksik utility eklendi */
.highlight{animation:highlight 1s ease}
@keyframes highlight{0%{background-color:transparent}50%{background-color:#3b82f61a}100%{background-color:transparent}}
.loading{
  display:inline-block;width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-radius:50%;
  border-top-color:#fff;animation:spin 1s ease-in-out infinite
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Focus states (accessibility) */
.btn-cta:focus-visible,
.submit-btn:focus-visible,
.sticky-btn:focus-visible,
.payment-option:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
}

/* Mobile adj. */
@media (max-width:768px){
  .pkg.selected{transform:scale(1.01)}
  .sticky-bar{padding:12px 0}
  .sticky-btn{padding:10px 20px;font-size:16px}
  .sticky-container{flex-direction:column;gap:10px}
  .sticky-text{order:2;font-size:14px}
  .sticky-btn{order:1;width:100%}
}

/* Touch highlight removal */
.btn-cta, .submit-btn, .sticky-btn{ -webkit-tap-highlight-color: transparent }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation: none !important; transition: none !important}
}