/* AloYemek — Kiosk self servis siparis tanitim sayfasi (16 Ekim 2026)
   qr.aloyemek.com qr.css temel alindi; renkler ayni. Bagimsiz sayfa: site CSS'i yuklenmez. */
:root{
  --turuncu:#ff6000; --turuncu-koyu:#e05400; --turuncu-acik:#fff1e8; --turuncu-cizgi:#ffd9c0;
  --metin:#1d2433; --soluk:#5e6778; --cizgi:#e8eaf0; --zemin:#ffffff; --gri:#f6f7fa;
  --yesil:#1b7f4b; --golge:0 1px 2px rgba(16,24,40,.05), 0 8px 24px rgba(16,24,40,.06);
  --r:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--zemin); color:var(--metin);
  font:400 16px/1.6 "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3{margin:0; line-height:1.22; letter-spacing:-.02em}
p{margin:0}
.kap{max-width:1120px; margin:0 auto; padding:0 20px}
.kap.dar{max-width:820px}

/* ---- ust bar ---- */
.ust{position:sticky; top:0; z-index:20; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--cizgi)}
.ust-ic{display:flex; align-items:center; justify-content:space-between; height:66px; gap:16px}
.marka{display:flex; align-items:center; text-decoration:none}
.marka img{height:30px; width:auto; display:block}   /* logo.png buyuk: CSS ile sinirla */
.ust-menu{display:flex; align-items:center; gap:22px}
.ust-menu a{color:var(--soluk); text-decoration:none; font-size:14.5px; font-weight:600}
.ust-menu a:hover{color:var(--metin)}
.ust-menu a.dg-turuncu, .ust-menu a.dg-turuncu:hover{color:#fff}

/* ---- dugmeler ---- */
.dg{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:999px; font-weight:700; font-size:15px;
  text-decoration:none; border:1.5px solid transparent; transition:.15s; white-space:nowrap}
.dg-kucuk{padding:9px 16px; font-size:14px}
.dg-turuncu{background:var(--turuncu); color:#fff}
.dg-turuncu:hover{background:var(--turuncu-koyu)}
.dg-cizgi{border-color:var(--cizgi); color:var(--metin); background:#fff}
.dg-cizgi:hover{border-color:var(--turuncu); color:var(--turuncu)}
.dg-beyaz{background:#fff; color:var(--turuncu)}
.dg-beyaz:hover{background:#fff6f0}
.dg-cizgi-beyaz{border-color:rgba(255,255,255,.55); color:#fff}
.dg-cizgi-beyaz:hover{background:rgba(255,255,255,.12)}
.dugmeler{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}
.dugmeler.orta{justify-content:center}

/* ---- hero ---- */
.hero{background:linear-gradient(180deg,var(--turuncu-acik) 0%, #fff 78%); padding:64px 0 46px}
.hero-ic{display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center}
.etiket{display:inline-block; background:#fff; border:1px solid var(--turuncu-cizgi);
  color:var(--turuncu); font-size:12px; font-weight:800; letter-spacing:.09em;
  padding:6px 13px; border-radius:999px}
.hero h1{font-size:clamp(30px,4.3vw,50px); font-weight:800; margin:18px 0 16px}
.hero p{color:var(--soluk); font-size:17.5px; max-width:52ch}
.hero-not{display:inline-flex; align-items:center; gap:8px; margin-top:22px;
  color:var(--yesil); font-weight:700; font-size:14.5px}
.hero-not svg{width:17px; height:17px}
.hero-gorsel{display:flex; justify-content:center}
.hero-gorsel img{width:330px; filter:drop-shadow(0 26px 44px rgba(16,24,40,.18))}

/* ---- bolum ---- */
.bolum{padding:64px 0}
.bolum.gri{background:var(--gri)}
.bolum h2{font-size:clamp(24px,3vw,34px); font-weight:800; text-align:center}
.bolum .alt{color:var(--soluk); text-align:center; margin-top:10px}
.bolum h2 + .adimlar, .bolum h2 + .izgara, .bolum h2 + .nedenler,
.bolum h2 + .sss, .bolum .alt + *{margin-top:36px}

/* ---- adimlar ---- */
.adimlar{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.adim{background:#fff; border:1px solid var(--cizgi); border-radius:var(--r); padding:24px 20px; box-shadow:var(--golge)}
.adim-no{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:50%; background:var(--turuncu-acik); color:var(--turuncu); font-weight:800; font-size:15px}
.adim h3{font-size:17px; font-weight:700; margin:14px 0 8px}
.adim p{color:var(--soluk); font-size:14.5px}

/* ---- ozellik kartlari ---- */
.izgara{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.kart{background:#fff; border:1px solid var(--cizgi); border-radius:var(--r); padding:24px 20px; box-shadow:var(--golge)}
.kart-ikon{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  border-radius:12px; background:var(--turuncu-acik); color:var(--turuncu)}
.kart-ikon svg{width:23px; height:23px}
.kart h3{font-size:16.5px; font-weight:700; margin:14px 0 8px}
.kart p{color:var(--soluk); font-size:14.5px}

/* ---- ekranlar ---- */
.ekranlar{display:grid; grid-template-columns:repeat(3,minmax(0,240px)); gap:30px; justify-content:center}
.ekranlar figure{margin:0; text-align:center}
.ekranlar img{border-radius:20px; box-shadow:0 18px 40px rgba(16,24,40,.14); margin:0 auto}
.ekranlar figcaption{margin-top:14px; font-weight:700; font-size:14.5px; color:var(--soluk)}

/* ---- ikili bolum ---- */
.ikili{display:grid; grid-template-columns:1fr 1.1fr; gap:44px; align-items:center}
.ikili h2{text-align:left}
.ikili-metin p{color:var(--soluk); margin-top:14px}
.liste{list-style:none; margin:22px 0 26px; padding:0}
.liste li{position:relative; padding-left:28px; margin-bottom:11px; color:var(--metin); font-size:15.5px}
.liste li::before{content:""; position:absolute; left:0; top:7px; width:17px; height:17px;
  border-radius:50%; background:var(--turuncu-acik);
  box-shadow:inset 0 0 0 1.5px var(--turuncu-cizgi)}
.liste li::after{content:""; position:absolute; left:5px; top:11px; width:7px; height:4px;
  border-left:2px solid var(--turuncu); border-bottom:2px solid var(--turuncu);
  transform:rotate(-45deg)}
.ikili-gorsel img{border-radius:var(--r); border:1px solid var(--cizgi); box-shadow:var(--golge)}

/* ---- nedenler ---- */
.nedenler{display:grid; grid-template-columns:repeat(2,1fr); gap:14px 26px}
.neden{display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid var(--cizgi);
  border-radius:12px; padding:16px 18px}
.neden svg{width:19px; height:19px; color:var(--yesil); flex:0 0 19px; margin-top:2px}
.neden span{font-size:15.5px}

/* ---- sss ---- */
.sss details{background:#fff; border:1px solid var(--cizgi); border-radius:12px; margin-bottom:12px; overflow:hidden}
.sss summary{cursor:pointer; padding:17px 20px; font-weight:700; font-size:16px; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:14px}
.sss summary::-webkit-details-marker{display:none}
.sss summary::after{content:""; width:9px; height:9px; flex:0 0 9px;
  border-right:2px solid var(--soluk); border-bottom:2px solid var(--soluk);
  transform:rotate(45deg); transition:.2s}
.sss details[open] summary::after{transform:rotate(-135deg)}
.sss .cevap{padding:0 20px 18px; color:var(--soluk); font-size:15.5px}

/* ---- kapanis ---- */
.kapanis{background:linear-gradient(135deg,var(--turuncu) 0%, #ff8a3d 100%); color:#fff;
  padding:64px 0; text-align:center}
.kapanis h2{font-size:clamp(24px,3vw,34px); font-weight:800}
.kapanis p{margin-top:12px; font-size:17px; opacity:.95}

/* ---- alt bilgi ---- */
.alt-bilgi{border-top:1px solid var(--cizgi); padding:26px 0; font-size:14.5px; color:var(--soluk)}
.alt-ic{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.alt-bilgi nav{display:flex; gap:20px; flex-wrap:wrap}
.alt-bilgi a{text-decoration:none}
.alt-bilgi a:hover{color:var(--metin)}

/* ---- mobil ---- */
@media (max-width:980px){
  .hero-ic,.ikili{grid-template-columns:1fr; gap:34px}
  .ikili-gorsel{order:-1}
  .adimlar,.izgara{grid-template-columns:repeat(2,1fr)}
  .ekranlar{grid-template-columns:repeat(2,minmax(0,220px))}
}
@media (max-width:640px){
  .ust-menu a:not(.dg){display:none}
  .hero{padding:44px 0 34px}
  .bolum{padding:48px 0}
  .adimlar,.izgara,.nedenler{grid-template-columns:1fr}
  .ekranlar{grid-template-columns:minmax(0,260px)}
  .hero-gorsel img{width:250px}
  .gerekler{grid-template-columns:1fr}
  .dugmeler .dg{flex:1 1 auto}
}

/* ---- kiosk: dortlu ekran ---- */
.ekranlar.dortlu{grid-template-columns:repeat(4,minmax(0,240px)); gap:24px}
.liste strong{font-weight:700}

/* ---- kiosk: siparis akisi ---- */
.akis{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:nowrap}
.akis-adim{flex:1 1 0; max-width:220px; background:#fff; border:1px solid var(--cizgi); border-radius:var(--r);
  padding:18px 16px; text-align:center; box-shadow:var(--golge)}
.akis-adim span{display:block; font-size:12.5px; font-weight:800; letter-spacing:.08em; color:var(--soluk); text-transform:uppercase}
.akis-adim b{display:block; margin-top:6px; font-size:16px}
.akis-adim.vurgu{background:var(--turuncu-acik); border-color:var(--turuncu-cizgi)}
.akis-adim.vurgu b{color:var(--turuncu)}
.akis-ok{flex:0 0 22px; height:2px; background:var(--turuncu-cizgi); position:relative}
.akis-ok::after{content:""; position:absolute; right:-1px; top:-4px; width:8px; height:8px;
  border-top:2px solid var(--turuncu); border-right:2px solid var(--turuncu); transform:rotate(45deg)}

/* ---- kiosk: kimler / gerekler ---- */
.etiketler{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:30px}
.etiketler span{background:var(--turuncu-acik); color:var(--turuncu-koyu); border:1px solid var(--turuncu-cizgi);
  border-radius:999px; padding:9px 16px; font-weight:700; font-size:14.5px}
.bolum h2.ikinci{margin-top:56px}
.gerekler{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:30px}
.gerek{background:#fff; border:1px solid var(--cizgi); border-radius:var(--r); padding:22px 20px; box-shadow:var(--golge)}
.gerek h3{font-size:16.5px; font-weight:700}
.gerek p{color:var(--soluk); font-size:14.5px; margin-top:8px}

@media (max-width:980px){
  .ekranlar.dortlu{grid-template-columns:repeat(2,minmax(0,220px))}
  .akis{flex-wrap:wrap}
  .akis-adim{flex:1 1 40%}
  .akis-ok{display:none}
}
@media (max-width:640px){
  .ekranlar.dortlu{grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
  .ekranlar.dortlu figcaption{font-size:13px}
  .akis-adim{flex:1 1 100%; max-width:none}
  .gerekler{grid-template-columns:1fr}
}