:root{
  --renk-bg:#0d0d0d;
  --renk-cam:rgba(255,255,255,0.06);
  --renk-cam-ince:rgba(255,255,255,0.03);
  --renk-cam-orta:rgba(255,255,255,0.12);
  --renk-cam-sert:rgba(0,0,0,0.8);

  /* Sıcak restoran paleti (altın vurguları) */
  --renk-primary:#ff6a2e;
  --renk-primary-hover:#e95c24;
  --renk-secondary:#ffbd59;
  --renk-danger:#ff3d39;
  --renk-success:#32d47a;
  --renk-info:#3aa9ff;

  /* Altın glow specifics */
  --gold-1: #ffd97a;
  --gold-2: #f0c23a;
  --gold-3: #d4af37;

  /* Yazılar ve kontrast */
  --renk-beyaz:#ffffff;
  --renk-siyah:#000000;
  --renk-gri:#dedede;
  --renk-gri-koyu:#999999;

  /* Overlay / blur */
  --overlay-bg:rgba(0,0,0,.60);
  --overlay-blur:9px;

  /* Radius */
  --radius-xs:6px;
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:22px;

  /* Shadow */
  --shadow-sm:0 2px 8px rgba(0,0,0,0.18);
  --shadow-md:0 6px 18px rgba(0,0,0,0.28);
  --shadow-lg:0 12px 40px rgba(0,0,0,0.45);

  /* Transition */
  --transition-md:.28s ease;
}

/* Reset */
*{box-sizing:border-box;margin:0;padding:0}

/* Genel */
body{
  font-family:'Segoe UI',Arial,sans-serif;
  background:radial-gradient(circle at top,#1b1b1b,#0e0e0e 70%);
  color:var(--renk-beyaz);
  overflow-x:hidden;
  padding-bottom:60px;
}

/* Header */
header{
  position:fixed;top:0;left:0;width:100%;height:70px;
  display:flex;justify-content:space-between;align-items:center;
  padding:0 30px;z-index:999;
  backdrop-filter:blur(8px);
  background:rgba(0,0,0,0.25);
  border-bottom:1px solid rgba(255,255,255,0.04);
}
header.shrink{
  height:56px;
  background:rgba(0,0,0,.45);
}

.logo{
  font-size:22px;color:var(--renk-primary);font-weight:700;
  text-shadow:0 0 10px rgba(255,120,0,0.4);
}
.hamburger{font-size:26px;cursor:pointer}

/* Menü */
.menu{
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,0.75);backdrop-filter:blur(12px);
  display:none;flex-direction:column;justify-content:center;align-items:center;
  z-index:900;
}
.menu a{
  color:#fff;text-decoration:none;padding:14px 26px;border-radius:12px;
  border:1px solid rgba(255,255,255,0.06);margin:8px;font-size:18px;
}

/* Hero */
.hero{
  margin-top:80px;text-align:center;padding:20px 16px;
  animation:fadeUp 2s ease;
}
.hero h1{font-size:26px;line-height:1.25}
.hero h1 span{color:var(--renk-primary)}
.hero h2{margin-top:10px;color:#cfcfcf;font-size:15px}

/* Content Box */
.content-box{
  max-width:900px;margin:18px auto;padding:22px;border-radius:18px;
  background:var(--renk-cam-ince);backdrop-filter:blur(10px);
  border:1px solid var(--renk-cam-orta);
  animation:float 6s ease-in-out infinite;
}
.hero h1{
  font-size:34px;
  background:linear-gradient(90deg,var(--gold-1),var(--renk-primary));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at center,
    rgba(255,190,90,.08), transparent 60%);
  pointer-events:none;
}
.bubble::before{
  content:"";
  width:40px;
  height:40px;
  background:linear-gradient(45deg,var(--gold-2),var(--renk-primary));
  border-radius:50%;
  position:absolute;
  top:-20px;
  left:30px;
  box-shadow:0 0 18px var(--gold-2);
}
/* Ortak buton stili */
.btn {
    display: inline-block;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    user-select: none;
}

/* Mavi – ana aksiyon */
.btn-primary {
    background-color: #3498db;
    color: #fff;
}

.btn-primary:hover {
    background-color: #2980b9;
}

/* Kırmızı – uyarı / çıkış */
.btn-danger {
    background-color: #e74c3c;
    color: #fff;
}

.btn-danger:hover {
    background-color: #c0392b;
}

/* Gri – ikincil */
.btn-secondary {
    background-color: #95a5a6;
    color: #fff;
}

.btn-secondary:hover {
    background-color: #7f8c8d;
}

.buttons a,
button[type="submit"]{
  position:relative;
  overflow:hidden;
}

.buttons a::after,
button[type="submit"]::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.25),
    transparent
  );
  transform:translateX(-100%);
}

.buttons a:hover::after,
button[type="submit"]:hover::after{
  transform:translateX(100%);
  transition:.6s;
}

/* Slider */
.slider{
  max-width:700px;height:260px;margin:0 auto;border-radius:14px;
  overflow:hidden;position:relative;background:var(--renk-cam-ince);
}
.slider img{height:100%;object-fit:cover;display:none}
.slider img.active{display:block}
.arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  font-size:30px;background:rgba(0,0,0,0.35);
  padding:8px;border-radius:50%;cursor:pointer;
}
.left{left:10px}.right{right:10px}
.buttons{margin-top:10px}
.buttons a{
  display:inline-block;margin:8px;padding:12px 20px;
  background:linear-gradient(45deg,var(--renk-primary),var(--renk-primary-hover));
  color:#fff;border-radius:10px;text-decoration:none;font-weight:600;
  box-shadow:0 0 10px rgba(255,120,0,0.25);
}

/* Modal & Form */
.modal{
  display:none;position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,0.8);backdrop-filter:blur(8px);
  justify-content:center;align-items:center;z-index:1200;
}
.modal-content{
  background:var(--renk-cam);padding:20px;border-radius:12px;width:360px;
  border:1px solid var(--renk-cam-orta);
}
.modal h3{margin-bottom:8px}
input,textarea,select{
  width:100%;padding:10px;margin:8px 0;border-radius:8px;border:none;
  background:var(--renk-cam-ince);color:#fff;
}
button[type="submit"]{
  background:linear-gradient(45deg,var(--renk-primary),var(--renk-primary-hover));
  padding:12px;border-radius:8px;border:none;color:#fff;cursor:pointer;
}
.close{float:right;cursor:pointer}

/* Storytelling Section */
.storytelling .container{
  max-width:1100px;
  margin:0 auto;
  padding:60px 20px;
}

/* Her adım */
.storytelling section{
  min-height:70vh;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  margin-bottom:90px;

  opacity:0;
  transform:translateY(50px);
  transition:opacity .7s ease, transform .7s ease;
}

.storytelling section.visible{
  opacity:1;
  transform:translateY(0);
}

/* G�rsel alan */
.storytelling .image{
  flex:0 0 45%;
  text-align:center;
}

.storytelling .image img{
  width:100%;
  max-width:420px;
  border-radius:14px;
  box-shadow:0 18px 45px rgba(0,0,0,.12);
}

/* Mesaj kutusu */
.storytelling .bubble{
  flex:0 0 50%;
  max-width:460px;
  background:var(--renk-cam);
  backdrop-filter:blur(var(--overlay-blur));
  padding:28px 30px;
  border-radius:18px;
  border:1px solid var(--renk-cam-orta);
  box-shadow:0 20px 50px rgba(0,0,0,.15);
  line-height:1.65;
  position:relative;
  transition:transform .4s ease, box-shadow .4s ease;
}

/* Hover etkisi */
.storytelling .bubble:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 70px rgba(0,0,0,.2);
}

/* Baslik */
.storytelling .bubble h2{
  font-size:1.45em;
  color:var(--renk-primary);
  margin-bottom:14px;
}

/* vurgu */
.storytelling .bubble small{
  display:block;
  margin-top:12px;
  color:var(--renk-secondary);
  font-weight:600;
}

/* Konum animasyonu */
.storytelling .bubble.left{
  transform:translateX(-25px);
}
.storytelling .bubble.right{
  transform:translateX(25px);
}

.storytelling section.visible .bubble{
  transform:translateX(0);
}

/* Konusma oku */
.storytelling .bubble::after{
  content:"";
  position:absolute;
  top:36px;
  border-width:14px;
  border-style:solid;
}

.storytelling .bubble.left::after{
  left:-28px;
  border-color:transparent var(--renk-cam) transparent transparent;
}
.storytelling .bubble.right::after{
  right:-28px;
  border-color:transparent transparent transparent var(--renk-cam);
}

/* Mobil */
@media(max-width:900px){
  .storytelling section{
    flex-direction:column;
    min-height:auto;
    gap:24px;
  }

  .storytelling .image img{
    max-width:320px;
  }

  .storytelling .bubble{
    max-width:100%;
  }

  .storytelling .bubble::after{
    display:none;
  }
}

/* Roadmap */
.roadmap-container{max-width:900px;margin:28px auto;padding:8px 12px;text-align:center}
.roadmap-title{font-size:20px;color:var(--renk-primary);margin-bottom:12px}
.roadmap-timeline{display:flex;flex-direction:column;gap:10px;margin:0 auto;max-width:760px}
.roadmap-item{padding:10px 14px;border-radius:10px;background:var(--renk-cam-ince);text-align:left}

/* Alert */
.alert {
  position:fixed;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  z-index:3000;
  padding:12px 20px;
  border-radius:10px;
  font-weight:600;
  box-shadow:0 6px 28px rgba(0,0,0,0.5);
  opacity:1;
  transition:opacity .8s;
}
.alert.success {
  background:linear-gradient(45deg,var(--renk-success),#0fa56a);
  color:#fff;
}
.alert.error {
  background:linear-gradient(45deg,var(--renk-danger),#ff4040);
  color:#fff;
}

.roadmap-item{
  position:relative;
  padding:12px 14px 12px 48px;
  border-radius:10px;
  background:var(--renk-cam-ince);
  border:1px solid var(--renk-cam-orta);
  font-size:15px;
  transition:.3s;
}

/* ORTAK ikon alanı */
.roadmap-item::before{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  font-size:18px;
  line-height:1;
}

/* DONE */
.roadmap-item.done::before{
  content:"✅";
}

.roadmap-item.done{
  background:linear-gradient(
    90deg,
    rgba(50,212,122,.18),
    var(--renk-cam-ince)
  );
}

/* PROGRESS */
.roadmap-item.progress::before{
  content:"⏳";
}

/* TODO */
.roadmap-item.todo::before{
  content:"🕒";
  opacity:.7;
}

.roadmap-item.todo{
  opacity:.6;
}
.roadmap-item.done:hover{
  box-shadow:0 0 18px rgba(50,212,122,.35);
}
.roadmap-item.progress:hover{
  box-shadow:0 0 18px rgba(255,189,89,.35);
}
.roadmap-item.todo:hover{
  box-shadow:0 0 18px rgba(150,150,150,.25);
}



/* Responsive */
@media(max-width:640px){
  .hero h1{font-size:20px}
  .slider{height:200px}
  .content-box{padding:16px}
  .modal-content{width:92%}
  section.storytelling section{flex-direction:column;gap:20px}
  .bubble{max-width:100%;margin-top:20px}
}

/* Animations */
@keyframes float {
  0% { transform:translateY(0); }
  50% { transform:translateY(-8px); }
  100% { transform:translateY(0); }
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(30px); }
  to { opacity:1; transform:translateY(0); }
}

#toTop{
  position:fixed;
  right:22px;
  bottom:22px;
  width:46px;
  height:46px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  font-size:22px;
  color:#fff;
  background:linear-gradient(
    45deg,
    var(--renk-primary),
    var(--renk-primary-hover)
  );
  box-shadow:0 8px 28px rgba(255,120,0,.45);
  opacity:0;
  visibility:hidden;
  transition:.35s;
  z-index:2500;
}
#toTop.show{
  opacity:1;
  visibility:visible;
}
#toTop:hover{
  transform:translateY(-4px);
}

/* Features */
.features{
  max-width:1200px;
  margin:40px auto 20px;
  padding:0 20px;
}

.features-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:22px;
}


.feature-card{
  background:var(--renk-cam);
  backdrop-filter:blur(var(--overlay-blur));
  border-radius:var(--radius-lg);
  padding:26px 22px;
  border:1px solid var(--renk-cam-orta);
  box-shadow:var(--shadow-md);
  transition:var(--transition-md);
  position:relative;
  overflow:hidden;
    
  width:100%;
  max-width:300px;
}

.feature-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(
    circle at top left,
    rgba(255,190,90,.15),
    transparent 60%
  );
  opacity:0;
  transition:.4s;
}

.feature-card:hover::after{
  opacity:1;
}

.feature-card:hover{
  transform:translateY(-6px);
  border-color:var(--renk-secondary);
  box-shadow:0 0 30px rgba(255,190,90,.25);
}

.feature-card .icon{
  font-size:32px;
  display:inline-block;
  margin-bottom:12px;
  filter:drop-shadow(0 0 8px rgba(255,190,90,.4));
}

.feature-card h3{
  font-size:18px;
  margin-bottom:10px;
  color:var(--renk-primary);
}

.feature-card p{
  font-size:14px;
  line-height:1.6;
  color:var(--renk-gri);
}

.ceo{
  text-align:left;
  max-width:800px;
}

.ceo h3{
  color:var(--renk-primary);
  margin-bottom:14px;
}

.ceo p{
  margin-bottom:12px;
  line-height:1.7;
  color:var(--renk-gri);
}

.ceo-sign{
  margin-top:18px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,0.08);
  font-size:14px;
  color:var(--renk-gri-koyu);
}

.trust{
  max-width:780px;
  margin:20px auto;
  text-align:center;
  color:var(--renk-gri);
  font-size:15px;
  opacity:.9;
}

.preorder{
  text-align:center;
}

.preorder h3{
  color:var(--renk-secondary);
}

.preorder p{
  margin:14px 0 18px;
}