:root{
      --bg:#0b0b10;
      --card:#12121a;
      --muted:#7a7f8c;
      --text:#f5f7fb;
      --primary:#ff3b30; /* canlı kırmızı */
      --primary-2:#ff7a00; /* turuncu gradyan ucu */
      --ring: rgba(255,255,255,0.12);
      --success:#10b981;
      --warning:#f59e0b;
      --radius:18px;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --shadow-soft: 0 6px 22px rgba(0,0,0,.25);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
      color:var(--text); background:radial-gradient(1200px 600px at 70% -20%, rgba(255, 122, 0,.15), transparent 60%),
               radial-gradient(900px 500px at -10% 10%, rgba(255, 59, 48,.18), transparent 60%), var(--bg);
      line-height:1.5;
    }
    a{color:inherit; text-decoration:none}
    .container{width:min(1150px, 92%); margin:0 auto}

    /* HEADER */
    header{
      position:sticky; top:0; z-index:20;
      backdrop-filter: saturate(140%) blur(10px);
      background:rgba(11,11,16,.6); border-bottom:1px solid var(--ring);
    }
    .nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0}
    .brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.2px}
    .logo{
      width:36px; height:36px; border-radius:10px;
      background:conic-gradient(from 220deg at 50% 50%, var(--primary), var(--primary-2));
      display:grid; place-items:center; box-shadow:var(--shadow-soft);
    }
    .logo svg{width:20px; height:20px; color:#fff}
    .nav-links{display:flex; gap:18px; align-items:center}
    .nav-links a{color:var(--muted); font-weight:600}
    .nav-links a:hover{color:#fff}
    .btn{display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:12px; border:1px solid var(--ring); background:#181821; color:#fff; font-weight:600; cursor:pointer; transition:.2s transform,.2s box-shadow,.2s background}
    .btn:hover{transform:translateY(-1px); box-shadow:var(--shadow-soft)}
    .btn-primary{background:linear-gradient(135deg, var(--primary), var(--primary-2)); border:none}
    .btn-ghost{background:transparent}

    /* HERO */
    .hero{position:relative; padding:56px 0 32px}
    .hero .container{display:grid; grid-template-columns:1.2fr .8fr; gap:28px}
    .headline{font-size:clamp(28px, 4vw, 48px); line-height:1.1; font-weight:800; letter-spacing:-.3px; margin:10px 0 8px}
    .sub{color:var(--muted); max-width:56ch}
    .search-panel{margin-top:24px; background:rgba(255,255,255,.03); border:1px solid var(--ring); border-radius:20px; padding:14px; display:flex; gap:10px; flex-wrap:wrap}
    .field{flex:1 1 260px; display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.04); border:1px solid var(--ring); padding:12px 14px; border-radius:14px}
    .field input, .field select{background:transparent; border:none; color:#fff; outline:none; width:100%; font-size:15px}
    .search-panel .btn{padding:12px 18px; border-radius:14px}
    .meta{display:flex; align-items:center; gap:18px; margin-top:14px; color:var(--muted); font-size:14px}
    .meta .badge{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:rgba(16,185,129,.1); color:#b9f1da; border:1px solid rgba(16,185,129,.25); font-weight:600}

    .hero-visual{position:relative; min-height:280px}
    .plate{
      position:absolute; inset:auto 0 0 auto; right:20px; width:min(480px, 100%);
      border-radius:22px; overflow:hidden; box-shadow:var(--shadow);
      transform:rotate(-2deg); border:1px solid var(--ring);
    }
    .plate img{width:100%; height:100%; object-fit:cover; display:block}
    .spark{position:absolute; right:0; top:-30px; width:190px; height:190px; filter:blur(18px); background:radial-gradient(circle at 30% 30%, rgba(255,59,48,.55), transparent 60%), radial-gradient(circle at 70% 70%, rgba(255,122,0,.5), transparent 60%)}

    /* SECTIONS */
    section{padding:26px 0 6px}
    .section-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px}
    .section-head h2{font-size:22px; margin:0}
    .chipbar{display:flex; gap:10px; flex-wrap:wrap}
    .chip{padding:8px 12px; border-radius:999px; border:1px solid var(--ring); background:#15151e; color:#fff; font-weight:600; font-size:13px; cursor:pointer}
    .chip.active, .chip:hover{background:linear-gradient(135deg, rgba(255,59,48,.25), rgba(255,122,0,.2));}

    /* CATEGORIES */
    .cats{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(150px,1fr); gap:14px; overflow:auto; padding-bottom:6px}
    .cat-card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid var(--ring); padding:18px; border-radius:16px; display:flex; align-items:center; gap:12px; min-height:82px}
    .cat-card .icon{width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:rgba(255,255,255,.06); border:1px solid var(--ring)}
    .cat-card b{display:block; font-size:14px}
    .cat-card span{color:var(--muted); font-size:12px}

    /* RESTAURANT GRID */
    .grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px}
    .card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid var(--ring); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-soft)}
    .card-media{position:relative; height:170px; overflow:hidden}
    .card-media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s}
    .card:hover .card-media img{transform:scale(1.06)}
    .promo{position:absolute; left:10px; top:10px; background:linear-gradient(135deg, var(--primary), var(--primary-2)); color:#fff; font-weight:800; font-size:12px; padding:7px 10px; border-radius:999px}
    .fav{position:absolute; right:10px; top:10px; width:38px; height:38px; border-radius:999px; display:grid; place-items:center; background:rgba(0,0,0,.4); border:1px solid var(--ring); cursor:pointer}
    .fav[aria-pressed="true"] svg{fill:#ff7586; color:#ff7586}
    .card-body{padding:14px}
    .title{display:flex; align-items:center; justify-content:space-between; gap:10px}
    .title h3{margin:0; font-size:16px}
    .rating{display:flex; align-items:center; gap:6px; color:#ffe08a; font-weight:700}
    .meta-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; color:var(--muted); font-size:13px}
    .tag{padding:6px 10px; background:#171721; border:1px solid var(--ring); border-radius:999px; font-weight:600; color:#d9dde7}

    /* HOW IT WORKS */
    .steps{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px}
    .step{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid var(--ring); border-radius:18px; padding:18px}
    .step .icon{width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:rgba(255,255,255,.06); border:1px solid var(--ring); margin-bottom:10px}
    .step h3{margin:8px 0 6px; font-size:16px}
    .step p{margin:0; color:var(--muted); font-size:14px}

    /* DOWNLOAD / CTA */
    .cta{display:grid; grid-template-columns:1.2fr .8fr; gap:18px; align-items:center; background:linear-gradient(135deg, rgba(255,59,48,.15), rgba(255,122,0,.15)); border:1px solid var(--ring); border-radius:20px; padding:18px}
    .store-buttons{display:flex; gap:10px; flex-wrap:wrap}
    .store{display:flex; align-items:center; gap:10px; background:rgba(0,0,0,.35); padding:10px 14px; border-radius:12px; border:1px solid var(--ring)}

    /* FOOTER */
    footer{padding:28px 0 40px; color:var(--muted)}
    .fgrid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:16px}
    .fgrid h4{margin:0 0 10px 0; color:#e7e9f0}
    .fgrid a{display:block; color:var(--muted); padding:6px 0}
    .copyright{margin-top:16px; border-top:1px solid var(--ring); padding-top:12px; font-size:13px}

    /* RESPONSIVE */
    .mobile-only{display:none}
    @media (max-width: 960px){
      .hero .container, .cta{grid-template-columns:1fr}
      .plate{position:relative; right:auto; transform:none; margin-top:8px}
      .grid{grid-template-columns:repeat(2, 1fr)}
      .steps{grid-template-columns:1fr 1fr}
      .fgrid{grid-template-columns:1fr 1fr}
    }
    @media (max-width: 640px){
      .nav-links{display:none}
      .mobile-only{display:inline-flex}
      .grid{grid-template-columns:1fr}
      .steps{grid-template-columns:1fr}
      .cats{grid-auto-columns:minmax(130px, 1fr)}
      .search-panel{padding:12px}
    }
    /* Focus styles */
    :focus-visible{outline:2px solid rgba(255,255,255,.6); outline-offset:2px; border-radius:8px}
  
    /* Light theme overrides */
    [data-theme="light"]{
      --bg:#f6f7fb;
      --card:#ffffff;
      --text:#0b0b10;
      --muted:#666b78;
      --ring: rgba(0,0,0,0.08);
    }
    [data-theme="light"] body{background: radial-gradient(1200px 600px at 70% -20%, rgba(255, 122, 0,.08), transparent 60%), radial-gradient(900px 500px at -10% 10%, rgba(255, 59, 48,.08), transparent 60%), var(--bg);}    
    [data-theme="light"] .btn{background:#f1f2f6; color:#0b0b10}
    [data-theme="light"] .btn-ghost{background:transparent}
    [data-theme="light"] .card, [data-theme="light"] .step, [data-theme="light"] .cat-card, [data-theme="light"] .cta, [data-theme="light"] .search-panel, [data-theme="light"] .field{background:linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01))}
    [data-theme="light"] header{background:rgba(255,255,255,.7)}
    [data-theme="light"] .copyright{color:#666b78}


    /* User dropdown */
.userbox{position:relative}
.userbtn{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:12px;
  background:#181821;border:1px solid var(--ring);
  color:#fff;font-weight:700;cursor:pointer;
}
.userbtn .avatar{
  width:24px;height:24px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  border-radius:8px;
}
.userbox .menu{
  position:absolute;right:0;top:110%;min-width:220px;
  background:var(--card);color:var(--text);
  border:1px solid var(--ring);border-radius:14px;padding:8px;
  box-shadow:var(--shadow);opacity:0;pointer-events:none;transform:translateY(-6px);
  transition:.18s ease;
}
.userbox:hover .menu,
.userbox:focus-within .menu{opacity:1;pointer-events:auto;transform:translateY(0)}
.userbox .menu a,.userbox .menu button{
  width:100%;text-align:left;display:block;padding:10px 12px;border-radius:10px;
  border:none;background:transparent;color:inherit;font-weight:600;cursor:pointer;
}
.userbox .menu a:hover,.userbox .menu button:hover{background:rgba(255,255,255,.06)}
.userbox .menu .sep{height:1px;background:var(--ring);margin:6px 4px}

/* light tema uyumu */
[data-theme="light"] .userbtn{background:#f1f2f6;color:#0b0b10}



.profile-dropdown {
  position: relative;
}
.profile-btn {
  display:flex;align-items:center;gap:6px;
}
.dropdown-menu {
  position:absolute;
  top:120%; right:0;
  background:var(--card);
  border:1px solid var(--ring);
  border-radius:12px;
  padding:10px;
  display:none;
  min-width:160px;
  box-shadow:var(--shadow-soft);
}
.dropdown-menu a, .dropdown-menu button {
  display:block;
  background:none;
  border:none;
  color:var(--text);
  text-align:left;
  width:100%;
  padding:6px 10px;
  cursor:pointer;
}
.profile-dropdown:hover .dropdown-menu {
  display:block;
}