/* Kiler Eve Siparis — kullanici paneli (/musteri) ve admin paneli (/admin).
   stil.css'in jetonlari ve bilesenleri ustune kurulur; burada yalnizca iki panelin kendi duzeni var.
   Duzen: musteri = telefon genisliginde tek sutun uygulama; admin = ust cubuk + liste|ayrinti, filo kart izgarasi. */

/* ======================================================= ortak */
.yukleniyor-tam { position: fixed; inset: 0; display: grid; place-items: center; background: #fff; }
.yukleniyor-tam img { width: 132px; animation: nabizlogo 1.2s ease-in-out infinite alternate; }
@keyframes nabizlogo { from { opacity: .55; } to { opacity: 1; } }
.form-hata { min-height: 18px; margin: 2px 0 8px; color: var(--kirmizi-koyu); font-size: 13.5px; font-weight: 700; }
.form-hata:empty { min-height: 0; margin: 0; }
.alan textarea { display: block; width: 100%; margin-top: 4px; border: 1.5px solid var(--cizgi); border-radius: 12px; padding: 10px 12px; font-size: 16px; font-weight: 600; color: var(--murekkep); background: #fff; resize: vertical; min-height: 64px; }
.alan input:focus, .alan select:focus, .alan textarea:focus { outline: 0; border-color: var(--murekkep); }
.durum-rozet.iptal { background: #f1efec; color: #6b6560; }
.secilir { user-select: all; }
.donen.beyaz { border-color: rgba(255,255,255,.35); border-top-color: #fff; }

/* ======================================================= kullanici paneli */
body.musteri-sayfa { background: #dfe4da; }
.uyg { position: fixed; inset: 0; margin: 0 auto; max-width: 480px; background: var(--zemin); overflow: hidden; isolation: isolate; }
@media (min-width: 520px) { .uyg { box-shadow: 0 0 0 1px #d3d9cc, 0 20px 60px rgba(31,27,24,.16); } }
/* stil.css telefon cercevesi icin 52-54px ust bosluk biraktigi icin: gercek telefonda guvenli alan kadar */
.uyg .bant { padding-top: calc(18px + env(safe-area-inset-top, 0px)); }
.uyg .baslik-ust { padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
.uyg .geri.yuzen { top: calc(16px + env(safe-area-inset-top, 0px)); }
.uyg .alt-menu { height: auto; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
.uyg .tost { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.alt-menu.dort { grid-template-columns: repeat(4, 1fr); }
.alt-menu.bes { grid-template-columns: repeat(5, 1fr); }
.alt-menu .rozet.nokta { min-width: 12px; width: 12px; height: 12px; padding: 0; left: calc(50% + 8px); top: 4px; background: var(--yaprak); }

/* giris */
.giris-ekran { display: flex; flex-direction: column; background: #fff; }
.giris-bant { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: calc(56px + env(safe-area-inset-top, 0px)) 24px 30px; background: linear-gradient(180deg, #fff 0%, var(--kirmizi-acik) 100%); }
.giris-logo { width: 150px; }
.giris-bant p { margin: 0; font-weight: 700; color: var(--metin-2); font-size: 14px; display: flex; gap: 6px; align-items: center; }
.giris-kutu { padding: 26px 24px 40px; display: flex; flex-direction: column; }
.giris-kutu h1 { font-family: var(--baslik); font-size: 27px; letter-spacing: -.5px; line-height: 1.1; margin: 0 0 6px; text-wrap: balance; }
.giris-alt { color: var(--metin-2); font-size: 14.5px; line-height: 1.5; margin: 0 0 20px; }
.girdi-ikon { display: flex; align-items: center; gap: 8px; margin-top: 4px; border: 1.5px solid var(--cizgi); border-radius: 14px; padding: 0 12px; background: #fff; color: var(--metin-3); }
.girdi-ikon:focus-within { border-color: var(--murekkep); }
.alan .girdi-ikon input { border: 0; margin: 0; padding: 13px 0; outline: 0; }
.giris-kutu .t-ana { margin-top: 6px; flex: none; }
.kucuk-yazi { text-align: center; color: var(--metin-3); font-size: 12.5px; margin: 14px 0 0; }

/* sepet */
.tam-dugme { width: 100%; text-align: center; }
.soluk-tel { display: block; color: var(--metin-3) !important; font-size: 13px !important; margin-top: 2px; }
.gonder-dugme { display: flex; align-items: center; justify-content: center; gap: 9px; width: calc(100% - 32px); margin: 14px 16px 30px; height: 56px; border: 0; border-radius: 16px; background: var(--kirmizi); color: #fff; font-weight: 800; font-size: 16.5px; box-shadow: 0 10px 22px rgba(142,8,9,.25); }
.gonder-dugme:active { background: var(--kirmizi-koyu); }
.gonder-dugme:disabled { opacity: .5; box-shadow: none; cursor: not-allowed; }
.kucuk-not.sabit { margin: -18px 24px 20px; }

/* siparislerim */
.m-siparis { background: #fff; border-radius: 18px; margin: 0 16px 10px; overflow: hidden; }
.m-siparis-bas { width: 100%; border: 0; background: none; display: flex; align-items: center; gap: 10px; padding: 14px 16px; text-align: left; }
.m-siparis-bas > span:first-child { flex: 1; min-width: 0; }
.m-siparis-bas b { display: block; font-size: 15.5px; }
.m-siparis-bas small { color: var(--metin-3); font-size: 12.5px; font-weight: 600; }
.m-siparis .durum-karti { margin: 0 12px; box-shadow: none; background: #f6f7f4; }
.durum-karti.iptal .dk-ikon { background: #f1efec; color: #6b6560; font-size: 24px; font-weight: 700; }
.dk-adimlar em { display: block; font-style: normal; font-weight: 600; color: var(--metin-3); margin-top: 2px; font-variant-numeric: tabular-nums; }
.m-kalemler { padding: 10px 16px 0; }
.m-kalem { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid #f0f1ed; font-size: 14px; }
.m-kalem img { width: 34px; height: 34px; object-fit: contain; }
.m-kalem small { display: block; color: var(--metin-3); font-size: 12px; }
.m-kalem b { font-variant-numeric: tabular-nums; }
.m-kalem.toplam { border: 0; font-weight: 800; font-family: var(--baslik); font-size: 17px; }
.m-adres { display: flex; gap: 8px; align-items: flex-start; margin: 4px 16px 0; padding: 10px 0 14px; color: var(--metin-2); font-size: 13.5px; line-height: 1.45; }
.m-adres svg { flex: none; margin-top: 1px; }
.degistir.tekrar { margin: 0 16px 16px; }
.hesap p { margin: 0 0 12px; display: flex; flex-direction: column; gap: 3px; font-size: 14px; color: var(--metin-2); overflow-wrap: anywhere; }
.hesap p b { color: var(--murekkep); font-size: 15px; }
.hesap-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; }

/* ======================================================= admin paneli */
body.admin-sayfa { background: var(--zemin); min-height: 100vh; }
.a-tost { position: fixed; left: auto; right: 20px; bottom: 20px; max-width: 380px; z-index: 80; }
@media (max-width: 600px) { .a-tost { left: 16px; right: 16px; max-width: none; } }

/* giris */
.a-giris { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(1200px 600px at 50% -10%, var(--kirmizi-acik), var(--zemin) 60%); }
.a-giris-kutu { width: 100%; max-width: 380px; background: #fff; border-radius: 22px; padding: 30px 26px 26px; box-shadow: 0 1px 0 var(--cizgi), 0 24px 60px rgba(31,27,24,.10); display: flex; flex-direction: column; }
.a-giris-logo { width: 112px; margin-bottom: 18px; }
.a-giris-kutu h1 { font-family: var(--baslik); font-size: 26px; letter-spacing: -.4px; margin: 0 0 6px; }
.a-giris-kutu > p { margin: 0 0 20px; color: var(--metin-2); font-size: 14px; line-height: 1.5; }
.a-giris-kutu .t-ana { flex: none; margin-top: 6px; }

/* ust cubuk */
.a-ust { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 18px; padding: calc(10px + env(safe-area-inset-top, 0px)) 20px 10px; background: rgba(255,255,255,.96); backdrop-filter: blur(12px); border-bottom: 1px solid var(--cizgi); flex-wrap: wrap; }
.a-marka { display: flex; align-items: center; gap: 10px; }
.a-marka img { height: 34px; }
.a-marka b { display: block; font-family: var(--baslik); font-size: 18px; line-height: 1; }
.a-marka small { color: var(--metin-3); font-size: 12px; font-weight: 700; }
.a-sekmeler { display: flex; gap: 4px; flex: 1; }
.a-sekmeler button { display: flex; align-items: center; gap: 8px; border: 0; background: none; border-radius: 12px; padding: 9px 14px; font-weight: 800; font-size: 15px; color: var(--metin-2); }
.a-sekmeler button:hover { background: #f3f4f1; }
.a-sekmeler button.secili { background: var(--murekkep); color: #fff; }
.a-rozet { font-style: normal; background: var(--kirmizi); color: #fff; font-size: 12px; border-radius: 99px; padding: 1px 8px; min-width: 22px; text-align: center; }
.a-rozet.mavi { background: #0369a1; }
.a-sag { display: flex; align-items: center; gap: 8px; }
.a-ikon-dugme { display: flex; align-items: center; gap: 6px; border: 1.5px solid var(--cizgi); background: #fff; border-radius: 99px; padding: 7px 12px; font-weight: 700; font-size: 13px; color: var(--metin-2); }
.a-ikon-dugme:hover { border-color: #c9cfc3; }
.a-ikon-dugme.kapali { color: var(--metin-3); background: #f3f4f1; }
@media (max-width: 760px) {
  .a-ust { gap: 10px; padding-left: 16px; padding-right: 16px; }
  .a-sekmeler { order: 3; flex-basis: 100%; }
  .a-sekmeler button { flex: 1; justify-content: center; }
  .a-sag { margin-left: auto; }
  .a-ikon-dugme span, .a-sag .canli { display: none; }
}

.a-govde { padding: 18px 20px 40px; max-width: 1440px; margin: 0 auto; }
@media (max-width: 600px) { .a-govde { padding: 14px 16px 40px; } }
.a-ikinci { border: 1.5px solid var(--cizgi); background: #fff; border-radius: 14px; padding: 0 16px; height: 52px; font-weight: 800; font-size: 14.5px; color: var(--metin-2); }
.a-ikinci:hover { border-color: #c9cfc3; color: var(--murekkep); }
.a-ikinci.kucuk { height: 34px; border-radius: 99px; padding: 0 12px; font-size: 13px; }
.a-ikinci:disabled { opacity: .45; cursor: not-allowed; }
.ornek-rozet { font-style: normal; font-size: 11px; font-weight: 800; color: #7c5d10; background: #fdf1d8; border-radius: 6px; padding: 2px 6px; vertical-align: 2px; }

/* siparisler: liste | ayrinti */
.a-siparisler { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 18px; align-items: start; }
.a-liste { background: #fff; border-radius: 20px; padding: 14px; position: sticky; top: 76px; max-height: calc(100vh - 96px); display: flex; flex-direction: column; min-height: 0; }
.a-ozet-satir { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--metin-3); font-weight: 600; padding: 2px 4px 10px; }
.a-ozet-satir b { color: var(--murekkep); font-family: var(--baslik); font-size: 18px; font-variant-numeric: tabular-nums; }
.a-suzgec { display: flex; flex-wrap: wrap; gap: 6px; }
.a-suzgec button { border: 0; background: #f3f4f1; border-radius: 99px; padding: 7px 11px; font-weight: 700; font-size: 13px; color: var(--metin-2); display: flex; gap: 6px; align-items: center; }
.a-suzgec button i { font-style: normal; font-size: 12px; color: var(--metin-3); font-variant-numeric: tabular-nums; }
.a-suzgec button.secili { background: var(--murekkep); color: #fff; }
.a-suzgec button.secili i { color: #d6d3cf; }
.a-suzgec button.dikkat i { background: var(--kirmizi); color: #fff; border-radius: 99px; padding: 0 6px; }
.a-ara { display: block; margin: 10px 0; }
.a-ara input { width: 100%; border: 1.5px solid var(--cizgi); border-radius: 12px; padding: 10px 12px; font-size: 15px; background: #fafbf8; }
.a-ara input:focus { outline: 0; border-color: var(--murekkep); background: #fff; }
.a-satirlar { overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; margin: 0 -4px; padding: 0 4px 4px; }
.a-satir { width: 100%; text-align: left; border: 1.5px solid transparent; background: #fafbf8; border-radius: 14px; padding: 10px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; }
.a-satir:hover { border-color: var(--cizgi); background: #fff; }
.a-satir.secili { border-color: var(--murekkep); background: #fff; }
.a-satir.yeni-gelen { border-color: var(--kirmizi); background: #fff; animation: parla 1.6s 3; }
.a-no { font-family: var(--baslik); font-weight: 800; font-size: 15px; background: #fff; border: 1px solid var(--cizgi); border-radius: 9px; padding: 4px 7px; font-variant-numeric: tabular-nums; }
.a-satir-orta { min-width: 0; }
.a-satir-orta b { display: block; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-satir small { color: var(--metin-3); font-size: 12.5px; font-weight: 600; }
.a-satir-orta small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-satir-sag { text-align: right; }
.a-satir-sag b { display: block; font-family: var(--baslik); font-size: 16px; font-variant-numeric: tabular-nums; }
.a-satir .durum-rozet { grid-column: 1 / -1; justify-self: start; font-size: 12px; padding: 3px 9px; }

.a-detay { background: #fff; border-radius: 20px; padding: 20px 22px 24px; min-width: 0; }
.a-bos { min-height: 340px; display: grid; place-content: center; text-align: center; gap: 6px; color: var(--metin-3); font-size: 14.5px; padding: 30px; }
.a-bos b { font-family: var(--baslik); font-size: 20px; color: var(--murekkep); }
.a-detay-ust { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.a-detay-ust h2 { font-family: var(--baslik); font-size: 26px; letter-spacing: -.4px; margin: 0; }
.a-detay-zaman { margin-left: auto; color: var(--metin-3); font-size: 13.5px; font-weight: 600; }
.a-geri { display: none; background: #f3f4f1; }
.a-eylem { background: #f6f7f4; border-radius: 16px; padding: 14px; margin-bottom: 16px; }
.a-eylem h3 { margin: 0 0 10px; font-size: 14.5px; }
.a-eylem.uyari { background: #fff6f4; border: 1.5px solid #efcfca; }
.a-eylem.uyari p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--metin-2); }
.a-eylem.uyari b { color: var(--kirmizi-koyu); }
.a-eylem-dugmeler { display: flex; gap: 10px; flex-wrap: wrap; }
.a-eylem-dugmeler .t-ana { flex: 1 1 240px; }
.a-eylem .eylem-not { margin: 8px 2px 0; font-size: 13px; color: var(--metin-3); }
.a-kurye-sec { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 12px; }
.a-kurye-sec button { text-align: left; border: 1.5px solid var(--cizgi); background: #fff; border-radius: 13px; padding: 9px 12px; }
.a-kurye-sec button b { display: block; font-size: 14px; }
.a-kurye-sec button small { color: var(--metin-3); font-size: 12.5px; font-weight: 600; }
.a-kurye-sec button.secili { border-color: var(--yaprak-koyu); background: var(--yaprak-zemin); box-shadow: inset 0 0 0 1px var(--yaprak-koyu); }

.a-bilgi { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 16px; }
.a-bilgi > div { border: 1px solid var(--cizgi); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.a-bilgi > div.genis { grid-column: 1 / -1; background: #fffbea; border-color: #f3e2a7; }
.a-bilgi h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--metin-3); }
.a-bilgi p { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--metin-2); overflow-wrap: anywhere; }
.a-bilgi p b { color: var(--murekkep); font-size: 15px; }
.a-not { font-size: 15px !important; color: var(--murekkep) !important; }
.a-kutu { border: 1px solid var(--cizgi); border-radius: 16px; padding: 14px 16px; margin-bottom: 14px; }
.a-kutu > h3 { margin: 0 0 10px; font-size: 15px; }

.a-zaman { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.a-zaman li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: #f6f7f4; color: var(--metin-3); font-size: 13.5px; font-weight: 600; border-top: 4px solid #e2e5de; }
.a-zaman li.oldu { color: var(--murekkep); border-top-color: var(--yaprak); }
.a-zaman li.iptal.oldu { border-top-color: #8a8580; }
.a-zaman li small { display: block; color: var(--metin-3); font-size: 12px; }
.a-zaman-saat { font-family: var(--baslik); font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; }

.a-tablo-kap { overflow-x: auto; }
.a-tablo { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 460px; }
.a-tablo th, .a-tablo td { padding: 8px 8px; text-align: left; border-bottom: 1px solid #eef0eb; }
.a-tablo thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--metin-3); font-weight: 800; }
.a-tablo .sayi { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.a-tablo .a-reyon th { background: #f6f7f4; font-size: 12.5px; color: var(--metin-2); font-weight: 800; padding: 6px 8px; }
.a-urun { display: flex; align-items: center; gap: 10px; }
.a-urun img { width: 34px; height: 34px; object-fit: contain; flex: none; }
.a-tablo tfoot td { border: 0; padding-top: 12px; font-weight: 700; color: var(--metin-2); }
.a-tablo tfoot b { font-family: var(--baslik); font-size: 20px; color: var(--murekkep); }

@media (max-width: 899px) {
  .a-siparisler { grid-template-columns: minmax(0, 1fr); }
  .a-liste { position: static; max-height: none; }
  .a-satirlar { overflow: visible; }
  .a-siparisler.detay-acik .a-liste { display: none; }
  .a-siparisler:not(.detay-acik) .a-detay { display: none; }
  .a-geri { display: grid; }
  .a-detay { padding: 16px; }
  .a-detay-zaman { margin-left: 0; flex-basis: 100%; }
}

/* filo */
.f-baslik { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.f-baslik h1 { font-family: var(--baslik); font-size: 30px; letter-spacing: -.6px; margin: 0; }
.f-baslik p { margin: 2px 0 0; color: var(--metin-2); font-size: 14.5px; }
.f-baslik .f-ekle-dugme { flex: none; width: auto; padding: 0 20px; }
.f-ozet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.f-ozet > div { background: #fff; border-radius: 16px; padding: 14px 16px; border-left: 5px solid #d8dcd3; }
.f-ozet > div.yolda { border-left-color: #0284c7; }
.f-ozet > div.merkez { border-left-color: var(--yaprak); }
.f-ozet b { display: block; font-family: var(--baslik); font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.f-ozet span { color: var(--metin-3); font-size: 13px; font-weight: 700; }
@media (max-width: 700px) { .f-ozet { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.f-uyari { background: #fef3c7; color: #713f12; border-radius: 12px; padding: 10px 14px; font-size: 14px; font-weight: 600; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.f-form { background: #fff; }
.f-form-alanlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 12px; }
.f-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.f-kart { background: #fff; border-radius: 18px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; border-top: 5px solid var(--yaprak); }
.f-kart.yolda { border-top-color: #0284c7; }
.f-kart.pasif { border-top-color: #d8dcd3; opacity: .72; }
.f-ust { display: flex; align-items: center; gap: 10px; }
.f-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--yaprak-zemin); color: var(--yaprak-koyu); display: grid; place-items: center; flex: none; }
.f-kart.yolda .f-avatar { background: #e0f2fe; color: #075985; }
.f-kart.pasif .f-avatar { background: #f1efec; color: #8a8580; }
.f-ad { flex: 1; min-width: 0; }
.f-ad b { display: block; font-size: 16px; }
.f-ad small { color: var(--metin-3); font-size: 12.5px; font-weight: 600; }
.f-durum { font-size: 12.5px; font-weight: 800; padding: 5px 10px; border-radius: 99px; white-space: nowrap; }
.f-durum.yolda { background: #e0f2fe; color: #075985; }
.f-durum.merkez { background: var(--yaprak-zemin); color: var(--yaprak-koyu); }
.f-durum.pasif { background: #f1efec; color: #6b6560; }
.f-cikis { display: flex; align-items: center; gap: 12px; background: #f6f7f4; border-radius: 14px; padding: 10px 12px; }
.f-kart.yolda .f-cikis { background: #f0f9ff; }
.f-saat { font-family: var(--baslik); font-weight: 800; font-size: 30px; line-height: 1; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.f-cikis.bos .f-saat { color: #c3c8bd; }
.f-cikis > span:last-child { font-size: 13px; font-weight: 700; color: var(--metin-2); }
.f-cikis small { display: block; color: var(--metin-3); font-weight: 600; font-size: 12.5px; }
.f-sip { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; color: var(--metin-2); }
.f-sip-dugme { border: 0; background: #e0f2fe; color: #075985; font-weight: 800; border-radius: 7px; padding: 1px 7px; font-size: 13px; }
.f-alt { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #eef0eb; padding-top: 10px; font-size: 13.5px; color: var(--metin-3); font-weight: 600; }
.f-alt b { color: var(--murekkep); }

/* ======================================================= KilerChef (tarif alani) */
.kc-logo { display: block; height: auto; color: var(--murekkep); overflow: visible; }
.kc-logo.kucuk { width: 178px; }
.kc-ust h1 { display: flex; align-items: center; }
.kc-acilis { position: absolute; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  background: radial-gradient(120% 70% at 50% 42%, #1f0a09 0%, #1a1412 55%, #110e0c 100%); color: #f5efe6; cursor: pointer; overflow: hidden;
  animation: kcGir .35s ease-out both; }
.kc-acilis.kapan { animation: kcCik .4s ease-in forwards; }
.kc-acilis .kc-logo { width: min(84%, 360px); position: relative; z-index: 1; color: #f5efe6; }
.kc-hale { position: absolute; width: 520px; height: 520px; border-radius: 50%; left: 50%; top: 46%; translate: -50% -50%;
  background: conic-gradient(from 0deg, transparent 0 20%, rgba(142,8,9,.32) 30%, transparent 42% 70%, rgba(73,168,51,.28) 80%, transparent 92%);
  filter: blur(28px); animation: kcDon 6s linear infinite; }
.kc-gec { position: relative; z-index: 1; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; color: rgba(245,239,230,.55); animation: kcBelir .5s 1.2s both; }
.kc-acilis .kc-sapka { transform-box: fill-box; transform-origin: 50% 100%; animation: kcSapka .75s cubic-bezier(.2,1.5,.4,1) .15s both; }
.kc-acilis .kc-yaprak { transform-box: fill-box; transform-origin: 0% 100%; animation: kcYaprak .5s cubic-bezier(.2,1.6,.4,1) .75s both; }
.kc-acilis .kc-yazi { animation: kcYazi .6s cubic-bezier(.2,.9,.3,1) .55s both; }
.kc-acilis .kc-alt { animation: kcBelir .5s 1s both; }
.kc-acilis .kc-buhar path { stroke-dasharray: 30; animation: kcBuhar 1.6s ease-in-out infinite; }
.kc-acilis .kc-buhar .b2 { animation-delay: .25s; }
.kc-acilis .kc-buhar .b3 { animation-delay: .5s; }
@keyframes kcGir { from { opacity: 0; } }
@keyframes kcCik { to { opacity: 0; transform: scale(1.04); } }
@keyframes kcDon { to { rotate: 360deg; } }
@keyframes kcBelir { from { opacity: 0; transform: translateY(6px); } }
@keyframes kcSapka { from { opacity: 0; transform: translateY(-60px) rotate(-12deg) scale(.7); } }
@keyframes kcYaprak { from { opacity: 0; transform: scale(0) rotate(-40deg); } }
@keyframes kcYazi { from { opacity: 0; transform: translateX(-18px); clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes kcBuhar { 0% { stroke-dashoffset: 30; opacity: 0; transform: translateY(6px); } 40% { opacity: .9; } 100% { stroke-dashoffset: -30; opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) {
  .kc-acilis, .kc-acilis *, .kc-hale { animation: none !important; }
}

/* ======================================================= kirmizi bant: beyaz hareketli Kiler logosu (2026-10-16)
   Eski dekor halkasi yerine; sag kenardan tasar (bant overflow:hidden), yazilarin arkasinda kalir. */
.uyg .bant::after { display: none; }
.bant-logo { position: absolute; right: -96px; top: 22px; width: 330px; max-width: none; opacity: .26; pointer-events: none; z-index: 0; }
@media (max-width: 360px) { .bant-logo { width: 280px; right: -90px; } }

/* sicak zemin: magaza ve tarif kartlari logonun sicakligiyla ayni aile */
.uyg { --zemin: #f9f6f4; --cizgi: #ece4df; }
.uyg .cipler { background: var(--zemin); }
.uyg .cip { background: #fff; color: var(--metin-2); box-shadow: inset 0 0 0 1px var(--cizgi); }
.uyg .cip.secili { background: var(--kirmizi); color: #fff; box-shadow: none; }
.uyg .urun-gorsel { background: #fff; }
.uyg .baslik-ust { background: rgba(249,246,244,.95); }

/* ======================================================= sepete ekle cubugu kirmizi (2026-10-16) */
.uyg .sepet-cubuk { background: var(--kirmizi); box-shadow: 0 14px 30px rgba(142,8,9,.32); }
.uyg .sepet-cubuk:active { background: var(--kirmizi-koyu); }
.uyg .sepet-cubuk:disabled { background: #c9bdb8; box-shadow: none; }

/* ======================================================= geri bildirim (musteri) */
.gb-kutu { margin: 4px 16px 14px; padding: 14px; border-radius: 16px; background: #fff8f6; border: 1.5px solid #f2dcd8; }
.gb-kutu h3 { margin: 0 0 2px; font-size: 15.5px; }
.gb-alt { margin: 0 0 10px; font-size: 13px; color: var(--metin-3); }
.gb-yildizlar { display: flex; align-items: center; gap: 2px; }
.gb-yildizlar button { border: 0; background: none; padding: 4px; border-radius: 10px; line-height: 0; }
.gb-yildizlar button:active { transform: scale(.9); }
.gb-yildizlar span { margin-left: 8px; font-weight: 800; font-size: 13.5px; color: #b26b00; }
.gb-yildizlar.sabit { gap: 1px; margin: 4px 0 6px; }
.gb-gonder { width: 100%; height: 48px; border: 0; border-radius: 14px; background: var(--murekkep); color: #fff; font-weight: 800; font-size: 15px; }
.gb-gonder:disabled { opacity: .55; }
.gb-kutu.gonderildi { background: var(--yaprak-zemin); border-color: #cfe7c4; }
.gb-metin { margin: 4px 0; font-size: 14px; color: var(--murekkep); line-height: 1.45; overflow-wrap: anywhere; }
.gb-tesekkur { margin: 6px 0 0; font-size: 12.5px; font-weight: 700; color: var(--yaprak-koyu); }

/* ======================================================= admin: 4 sekme telefonda kaysin */
@media (max-width: 760px) {
  .a-sekmeler { overflow-x: auto; scrollbar-width: none; }
  .a-sekmeler::-webkit-scrollbar { display: none; }
  .a-sekmeler button { flex: none; padding: 9px 12px; font-size: 14px; }
}

/* ======================================================= admin: indirimler */
.i-arac { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.i-ara { flex: 1 1 280px; display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--cizgi); border-radius: 14px; padding: 0 14px; color: var(--metin-3); }
.i-ara:focus-within { border-color: var(--murekkep); }
.i-ara input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 12px 0; font-size: 16px; background: transparent; color: var(--murekkep); }
.i-liste { display: flex; flex-direction: column; gap: 8px; }
.i-satir { display: grid; grid-template-columns: 52px minmax(0, 1fr) 150px 100px 90px auto; gap: 12px; align-items: center; background: #fff; border-radius: 16px; padding: 8px 12px; border: 1.5px solid transparent; }
.i-satir.aktif { border-color: #efcfca; background: #fffafa; }
.i-satir img { width: 52px; height: 52px; object-fit: contain; }
.i-ad { min-width: 0; }
.i-ad b { display: block; font-size: 15px; }
.i-ad small { color: var(--metin-3); font-size: 12.5px; font-weight: 600; }
.i-simdi { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-variant-numeric: tabular-nums; }
.i-simdi b { font-family: var(--baslik); font-size: 18px; }
.i-simdi s, .i-simdi small { color: var(--metin-3); font-size: 12.5px; font-weight: 600; }
.i-rozet { font-style: normal; background: var(--kirmizi); color: #fff; font-weight: 800; font-size: 12.5px; border-radius: 8px; padding: 2px 7px; }
.i-girdi { display: flex; align-items: center; border: 1.5px solid var(--cizgi); border-radius: 12px; padding: 0 10px; background: #fafbf8; }
.i-girdi:focus-within { border-color: var(--murekkep); background: #fff; }
.i-girdi span { font-weight: 800; color: var(--metin-3); }
.i-girdi input { width: 100%; border: 0; outline: 0; background: transparent; padding: 10px 4px; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.i-onizle { font-size: 13px; font-weight: 800; color: var(--kirmizi-koyu); font-variant-numeric: tabular-nums; }
.i-dugmeler { display: flex; gap: 6px; }
.i-dugmeler .t-ana, .i-dugmeler .a-ikinci { height: 42px; width: auto; flex: none; padding: 0 14px; font-size: 14px; border-radius: 12px; }
@media (max-width: 899px) {
  .i-satir { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .i-satir img { width: 48px; height: 48px; grid-row: span 2; }
  .i-simdi { grid-column: 3; justify-content: flex-end; text-align: right; }
  .i-girdi { grid-column: 2; }
  .i-onizle { grid-column: 3; text-align: right; }
  .i-dugmeler { grid-column: 1 / -1; }
  .i-dugmeler .t-ana { flex: 1; }
}

/* ======================================================= admin: sikayetler */
.g-ozet { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) minmax(0, 1.2fr); gap: 10px; margin-bottom: 14px; }
.g-ozet > div { background: #fff; border-radius: 16px; padding: 14px 16px; }
.g-ort { display: flex; flex-direction: column; gap: 4px; }
.g-ort b { font-family: var(--baslik); font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; }
.g-ort > span:last-child { color: var(--metin-3); font-size: 12.5px; font-weight: 700; }
.g-yildiz { display: inline-flex; gap: 1px; font-size: 17px; line-height: 1; }
.g-yildiz i { font-style: normal; color: #d9d2cc; }
.g-yildiz i.dolu { color: #f5a623; }
.g-dagilim { display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.g-dagilim div { display: grid; grid-template-columns: 34px 1fr 28px; gap: 8px; align-items: center; font-size: 12.5px; font-weight: 700; color: var(--metin-2); }
.g-dagilim i { height: 8px; background: #f1ede9; border-radius: 99px; overflow: hidden; }
.g-dagilim em { display: block; height: 100%; background: #f5a623; border-radius: 99px; }
.g-dagilim b { text-align: right; font-variant-numeric: tabular-nums; }
.g-sayilar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: start; align-content: center; }
.g-sayilar b { display: block; font-family: var(--baslik); font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; }
.g-sayilar span { color: var(--metin-3); font-size: 12.5px; font-weight: 700; }
@media (max-width: 899px) { .g-ozet { grid-template-columns: minmax(0, 1fr); } }
.g-suzgec { margin-bottom: 12px; }
.g-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
@media (max-width: 400px) { .g-izgara { grid-template-columns: minmax(0, 1fr); } }
.g-kart { background: #fff; border-radius: 18px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; border-left: 5px solid #f5a623; min-width: 0; }
.g-kart.sikayet { border-left-color: var(--kirmizi); }
.g-kart.cozuldu { border-left-color: var(--yaprak); opacity: .78; }
.g-kart-ust { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.g-etiket { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--kirmizi-koyu); background: var(--kirmizi-acik); border-radius: 6px; padding: 3px 7px; }
.g-etiket.iyi { color: #8a5a00; background: #fdf1d8; }
.g-zaman { color: var(--metin-3); font-size: 12.5px; font-weight: 600; }
.g-ust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.g-puan { font-size: 13.5px; color: var(--metin-2); }
.g-puan.p1, .g-puan.p2 { color: var(--kirmizi-koyu); }
.g-metin { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--murekkep); overflow-wrap: anywhere; }
.g-kim { margin: 0; font-size: 13px; color: var(--metin-2); line-height: 1.7; }
.g-alt { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid #f0ece8; padding-top: 10px; }
.g-coz { height: 42px; font-size: 14px; }
.g-cozuldu { display: flex; align-items: center; gap: 6px; color: var(--yaprak-koyu); font-weight: 800; font-size: 13.5px; }
.g-detay { background: #fffaf3; border-color: #f3e2c4; }
.g-detay > h3 { display: flex; align-items: center; gap: 6px; }

/* ======================================================= admin: ayni kisinin siparisleri tek satirda (2026-10-16) */
.a-no em { font-style: normal; font-size: 11px; font-weight: 800; color: #fff; background: var(--kirmizi); border-radius: 99px; padding: 1px 5px; margin-left: 4px; vertical-align: 2px; }
.a-satir-orta strong { color: var(--murekkep); font-weight: 800; }
.a-rozetler { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
.a-rozetler .durum-rozet { font-size: 12px; padding: 3px 9px; }
.a-kisi-sip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 14px; padding: 10px 12px; background: #f6f7f4; border-radius: 14px; }
.a-kisi-sip > span { font-size: 13px; font-weight: 800; color: var(--metin-2); margin-right: 4px; }
.a-kisi-sip button { border: 1.5px solid var(--cizgi); background: #fff; border-radius: 10px; padding: 4px 10px; font-weight: 800; font-size: 13.5px; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.a-kisi-sip button small { font-weight: 600; font-size: 11px; color: var(--metin-3); }
.a-kisi-sip button.secili { border-color: var(--murekkep); background: var(--murekkep); color: #fff; }
.a-kisi-sip button.secili small { color: #d6d3cf; }

/* ======================================================= admin: odeme yontemi ad satirinda (2026-10-16) */
.a-ad-satir { display: flex; align-items: center; gap: 6px; min-width: 0; }
.a-ad-satir b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.a-odeme { flex: none; font-style: normal; font-size: 11.5px; font-weight: 800; border-radius: 6px; padding: 2px 7px; }
.a-odeme.nakit { background: var(--yaprak-zemin); color: var(--yaprak-koyu); }
.a-odeme.kart { background: #e0f2fe; color: #075985; }
.a-satir-sag small strong { color: var(--murekkep); }
.a-satir-sag small { white-space: nowrap; }

/* ======================================================= admin: cari */
.c-donem { margin-bottom: 12px; }
.c-ozet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.c-ozet > div { background: #fff; border-radius: 16px; padding: 14px 16px; border-top: 4px solid #d8dcd3; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.c-ozet span { color: var(--metin-3); font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.c-ozet b { font-family: var(--baslik); font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.c-ozet small { color: var(--metin-3); font-size: 12.5px; font-weight: 600; }
.c-ozet .c-toplam { border-top-color: var(--murekkep); }
.c-ozet .c-nakit { border-top-color: var(--yaprak); }
.c-ozet .c-banka { border-top-color: #0284c7; }
.c-ozet .c-bekle { border-top-color: #f5a623; }
@media (max-width: 760px) { .c-ozet { grid-template-columns: repeat(2, minmax(0, 1fr)); } .c-ozet b { font-size: 21px; } }
.c-iki { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.c-kutu { background: #fff; }
.c-kasa { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.c-kasa li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #eef0eb; font-size: 14px; }
.c-kasa li b { font-variant-numeric: tabular-nums; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.f-sayfa > .a-kutu { background: #fff; }
.c-tablo { min-width: 560px; }
.c-kisi { border: 0; background: none; padding: 0; text-align: left; display: flex; flex-direction: column; }
.c-kisi b { text-decoration: underline; text-decoration-color: var(--cizgi); text-underline-offset: 3px; }
.c-kisi small { color: var(--metin-3); font-size: 12px; font-weight: 600; }
.c-satir.acik td { background: #f6f7f4; }
.c-ekstre > td { background: #f6f7f4; padding: 4px 8px 12px; }
.c-ic { min-width: 0; background: #fff; border-radius: 12px; }
.c-tablo tfoot td { font-weight: 800; color: var(--murekkep); }
/* dar ekranda ad kaybolmasin: ad + rozetler satir kirar, teslim yazisi kesilmez */
.a-ad-satir { flex-wrap: wrap; row-gap: 3px; }
.a-ad-satir b { white-space: normal; overflow: visible; flex: 0 1 auto; max-width: 100%; }
.a-satir-orta small { white-space: normal; overflow: visible; }
@media (max-width: 520px) { .a-satir-sag small { white-space: normal; } .a-satir-sag small strong { display: block; } }
.ayrac { font-style: normal; } @media (max-width: 520px) { .a-satir-sag .ayrac { display: none; } }
/* durum rozeti ismin saginda, odeme yontemi saga (urun sayisinin altina) */
.a-ad-satir .durum-rozet { flex: none; font-size: 11.5px; padding: 2px 8px; }
.a-satir-sag { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.a-satir-sag .a-odeme { margin-top: 2px; }

/* ======================================================= musteri acilis sahnesi (2026-10-16, "daha yavas ve havali")
   Zaman cizelgesi: 0-1.1 sn elma kavsi donerek oturur (logo-acilis.svg) · 1.0 sap · 1.25 yaprak · 1.45-2.45 "kiler" yazisi
   · 2.0 alt yazi · 2.6 isik suzulur · halkalar surekli · 3.7 sn sonra ekran ortadan daire olarak kapanir ve panel acilir. */
.m-acilis { position: absolute; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; cursor: pointer; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 42%, #a8100f 0%, #8e0809 45%, #520405 100%); color: #fff;
  clip-path: circle(150% at 50% 44%); transition: clip-path .85s cubic-bezier(.7,0,.25,1); }
.m-acilis.kapan { clip-path: circle(0% at 50% 44%); }
.m-acilis:focus-visible { outline: none; }
.ma-isik { position: absolute; width: 140vmax; height: 140vmax; left: 50%; top: 44%; translate: -50% -50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 18%, rgba(255,255,255,.14) 25%, transparent 33% 62%, rgba(255,210,200,.12) 70%, transparent 78%);
  animation: maDon 9s linear infinite; }
.ma-halka { position: absolute; left: 50%; top: 44%; width: 220px; height: 220px; translate: -50% -50%; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.5); opacity: 0; pointer-events: none;
  animation: maHalka 3s cubic-bezier(.2,.6,.3,1) .9s infinite; }
.ma-halka.h2 { animation-delay: 1.9s; }
.ma-halka.h3 { animation-delay: 2.9s; }
.ma-logo-kap { position: relative; width: min(64vw, 260px); animation: maSuz 4s ease-in-out 1.8s infinite; }
.ma-logo { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 26px rgba(50,6,6,.35)); }
.ma-parilti { position: absolute; inset: -10% -20%; pointer-events: none; mix-blend-mode: overlay;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.95) 50%, transparent 62%);
  -webkit-mask: url(logo-acilis.svg) center / 71% auto no-repeat; mask: url(logo-acilis.svg) center / 71% auto no-repeat;
  transform: translateX(-120%); animation: maParilti 1.3s ease-in-out 2.6s both; }
.ma-yazi { position: relative; margin: 0; font-weight: 700; font-size: 15px; letter-spacing: .22em; text-transform: uppercase; opacity: 0; animation: maYazi .9s ease-out 2s both; }
.ma-cizgi { position: absolute; bottom: calc(46px + env(safe-area-inset-bottom, 0px)); width: 120px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.25); overflow: hidden; }
.ma-cizgi i { display: block; height: 100%; background: #fff; border-radius: 3px; transform-origin: left; animation: maCizgi 3.6s cubic-bezier(.4,0,.2,1) both; }
.m-acilis.kapan .ma-logo-kap { animation: maCik .7s cubic-bezier(.6,0,.4,1) forwards; }
@keyframes maDon { to { rotate: 360deg; } }
@keyframes maHalka { 0% { opacity: 0; transform: scale(.6); } 15% { opacity: .55; } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes maSuz { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes maParilti { to { transform: translateX(120%); } }
@keyframes maYazi { from { opacity: 0; transform: translateY(10px); letter-spacing: .5em; } to { opacity: .92; transform: none; } }
@keyframes maCizgi { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes maCik { to { transform: scale(1.18); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .m-acilis, .m-acilis * { animation: none !important; }
  .ma-yazi { opacity: .92; } .ma-halka, .ma-parilti { display: none; }
}
/* acilis: hareler yerine ucusan yazisiz elmalar (2026-10-16) */
.ma-ucusan { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ma-ucusan img { position: absolute; height: auto; opacity: 0; translate: -50% -50%; animation: maUcBelir 1.2s ease-out both, maUc 7s ease-in-out infinite; }
@keyframes maUcBelir { from { opacity: 0; } to { opacity: var(--op); } }
@keyframes maUc { 0%, 100% { transform: translate(0, 0) rotate(0); } 33% { transform: translate(10px, -18px) rotate(var(--don)); } 66% { transform: translate(-8px, -8px) rotate(calc(var(--don) * -.5)); } }
@media (prefers-reduced-motion: reduce) { .ma-ucusan img { opacity: var(--op); } }

/* subeler */
.teslim-cip { border: 0; color: inherit; cursor: pointer; }
.teslim-cip svg { flex: none; }
.sube-giris { margin: 4px 20px 14px; color: var(--metin-2); font-size: 15px; }
.sube-liste { display: flex; flex-direction: column; gap: 10px; padding: 0 16px; }
.sube-kart { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: #fff; border: 2px solid transparent; border-radius: 20px; padding: 16px; box-shadow: 0 1px 0 var(--cizgi); }
.sube-kart.secili { border-color: var(--kirmizi); background: #fff8f6; }
.sube-ikon { width: 46px; height: 46px; border-radius: 50%; background: var(--kirmizi-acik); color: var(--kirmizi); display: grid; place-items: center; flex: none; }
.sube-ikon svg { width: 22px; height: 22px; }
.sube-ad { flex: 1; min-width: 0; }
.sube-ad small { display: block; color: var(--metin-3); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sube-ad b { font-family: var(--baslik); font-size: 21px; font-weight: 800; letter-spacing: -.3px; }
.sube-isaret { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--cizgi); display: grid; place-items: center; color: #fff; flex: none; }
.sube-kart.secili .sube-isaret { background: var(--kirmizi); border-color: var(--kirmizi); }
.sube-not { margin: 16px 24px 0; }
.sube-satir { margin-bottom: 0; }
.m-sube { color: var(--kirmizi-koyu); }
/* admin sube secici */
.a-sube { display: flex; align-items: center; gap: 6px; border: 1.5px solid var(--cizgi); background: #fff; border-radius: 99px; padding: 3px 4px 3px 12px; font-size: 13px; font-weight: 700; color: var(--metin-3); }
.a-sube select { border: 0; background: transparent; font-weight: 800; font-size: 14px; color: var(--murekkep); padding: 4px 4px; outline: 0; cursor: pointer; }
.a-sube-yazi { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 5px; background: #f1efec; color: var(--metin-2); font-weight: 700; font-size: 11.5px; }
@media (max-width: 760px) { .a-sube span { display: none; } .a-sube { padding-left: 4px; } .a-sube select { font-size: 16px; max-width: 150px; } }

/* ======================================================= acilis v4: MOTOKURYE, gercek oranlar (2026-10-16, patron: "cok buyuk,
   geometrik aciya dikkat edilmemis, fizik kurallarina ve geometriye uygun yeniden olustur")
   Sahne 260x296 px. Motor 200 px genis (viewBox 170 -> olcek 1.176). Teker r=17 -> cevre 2*pi*17*1.176 = 125.6 px.
   Gelis 480 px = 3.82 tur = 1375 derece, gidis 560 px = 4.46 tur = 1605 derece: teker, yolu KAYMADAN alir (ayni egri, ayni sure).
   Frenlemede burun on suspansiyona oturur (on teker temasi etrafinda +1.6 derece), kalkista arka cokme (arka temas etrafinda -2.5).
   Sepet merkezi sahnede (74.7,193), logo merkezi (130,48) -> fark (-55,145). Logo yukari-geri kalkip yercekimiyle sepete duser.
   Zaman: 0.15-2.45 logo kurulur · 0.45-1.75 kurye gelir · 1.75 fren · 2.2 kapak acilir · 2.55-3.15 logo duser · kapak kapanir
   · 3.4-4.45 motor yola cikar · 4.5 sn ekran kapanir. */
.ma-sahne { position: relative; width: 260px; height: 296px; flex: none; }
.ma-sahne .ma-logo-kap { position: absolute; top: 0; left: 50%; width: 150px; translate: -50% 0; animation: maIcine .6s cubic-bezier(.45,0,.85,.45) 2.55s forwards; }
.ma-motor { position: absolute; top: 126px; left: 30px; width: 200px; animation: maGel 1.3s cubic-bezier(.15,.75,.3,1) .45s both, maGit 1.05s cubic-bezier(.6,0,.9,.5) 3.4s forwards; }
.ma-motor-svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 6px 10px rgba(50,6,6,.3)); }
.ma-fren { transform-origin: 136px 131px; animation: maFren .55s ease-out 1.72s both, maKalk 1.05s ease-out 3.4s forwards; }
.ma-govde { animation: maTitre .14s ease-in-out 1.9s 8 alternate; }
.ma-teker { transform-box: fill-box; transform-origin: center; animation: maTekerGel 1.3s cubic-bezier(.15,.75,.3,1) .45s both, maTekerGit 1.05s cubic-bezier(.6,0,.9,.5) 3.4s forwards; }
.ma-kapak { transform-origin: 18px 39px; animation: maKapak 1.2s ease-in-out 2.2s both; }
.ma-hiz { position: absolute; left: -42px; top: 34%; width: 48px; display: flex; flex-direction: column; gap: 8px; opacity: 0; animation: maHizGor 4.5s linear both; }
.ma-hiz i { display: block; height: 2.5px; border-radius: 3px; background: rgba(255,255,255,.7); animation: maHizAk .35s linear infinite; }
.ma-hiz i:nth-child(2) { width: 70%; margin-left: 30%; animation-delay: .1s; }
.ma-hiz i:nth-child(3) { width: 85%; margin-left: 10%; animation-delay: .2s; }
.ma-duman { position: absolute; left: 14px; top: 132px; }
.ma-duman i { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.55); opacity: 0; animation: maDuman .7s ease-out 3.3s 2; }
.ma-duman i:nth-child(2) { animation-delay: 3.45s; } .ma-duman i:nth-child(3) { animation-delay: 3.6s; }
.ma-yol { position: absolute; left: -50px; right: -50px; top: 281px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.4) 20%, rgba(255,255,255,.4) 80%, transparent); opacity: 0; animation: maYazi .8s ease-out .3s both; }
.m-acilis.kapan .ma-sahne .ma-logo-kap { animation: none; opacity: 0; }
.ma-cizgi i { animation-duration: 4.4s; }
@keyframes maIcine { 0% { transform: none; opacity: 1; } 30% { transform: translate(-16px, -12px) scale(.72); } 90% { opacity: 1; } 100% { transform: translate(-55px, 145px) scale(.22); opacity: 0; } }
@keyframes maGel { from { transform: translateX(-480px); } to { transform: none; } }
@keyframes maGit { from { transform: none; } to { transform: translateX(560px); } }
@keyframes maTekerGel { from { transform: rotate(-1375deg); } to { transform: none; } }
@keyframes maTekerGit { from { transform: none; } to { transform: rotate(1605deg); } }
@keyframes maFren { 0% { transform: none; } 35% { transform: rotate(1.6deg); } 70% { transform: rotate(-.5deg); } 100% { transform: none; } }
@keyframes maKalk { 0% { transform: none; transform-origin: 46px 131px; } 25% { transform: rotate(-2.5deg); transform-origin: 46px 131px; } 100% { transform: rotate(-1deg); transform-origin: 46px 131px; } }
@keyframes maTitre { from { transform: translateY(0); } to { transform: translateY(.6px); } }
@keyframes maKapak { 0% { transform: none; } 22%, 70% { transform: rotate(-105deg); } 92%, 100% { transform: none; } }
@keyframes maHizGor { 0%, 10% { opacity: 0; } 13%, 32% { opacity: 1; } 38%, 76% { opacity: 0; } 80%, 100% { opacity: 1; } }
@keyframes maHizAk { from { transform: translateX(12px); opacity: 1; } to { transform: translateX(-12px); opacity: .2; } }
@keyframes maDuman { 0% { opacity: .7; transform: translate(0, 0) scale(.5); } 100% { opacity: 0; transform: translate(-34px, -8px) scale(1.8); } }
@media (prefers-reduced-motion: reduce) { .ma-sahne .ma-logo-kap { animation: none; } .ma-motor, .ma-motor * { animation: none !important; } .ma-hiz, .ma-duman { display: none; } }

/* ======================================================= uzak sube uyarisi (ortada) */
.su-perde { position: absolute; inset: 0; z-index: 95; display: grid; place-items: center; padding: 20px; background: rgba(31,27,24,.5); backdrop-filter: blur(3px); animation: suPerde .2s ease-out both; }
.su-perde.kapan { animation: suPerde .2s ease-in reverse both; }
.su-kutu { width: 100%; max-width: 360px; background: #fff; border-radius: 24px; padding: 22px 20px 16px; text-align: center; box-shadow: 0 24px 60px rgba(31,27,24,.3); animation: suKutu .32s cubic-bezier(.2,1.3,.4,1) both; }
.su-ikon { width: 56px; height: 56px; border-radius: 50%; background: #fef3c7; color: #a16207; display: grid; place-items: center; margin: 0 auto 10px; }
.su-ikon svg { width: 26px; height: 26px; }
.su-kutu h2 { font-family: var(--baslik); font-size: 22px; font-weight: 800; letter-spacing: -.3px; margin: 0 0 8px; text-wrap: balance; }
.su-kutu p { margin: 0 0 16px; color: var(--metin-2); font-size: 14.5px; line-height: 1.5; }
.su-kutu p b { color: var(--murekkep); }
.su-ana { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px; border: 0; border-radius: 16px; background: var(--kirmizi); color: #fff; font-weight: 800; font-size: 15.5px; }
.su-ana svg { width: 18px; height: 18px; }
.su-ikinci { width: 100%; margin-top: 6px; height: 44px; border: 0; background: none; color: var(--metin-2); font-weight: 700; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
@keyframes suPerde { from { opacity: 0; } }
@keyframes suKutu { from { opacity: 0; transform: translateY(14px) scale(.96); } }

/* logo GORUNMEZ BIR DAGIN ARKASINDAN DOGAR (2026-10-16, patron): kap = ufuk. Alt kenari gorunmez ufuk cizgisi (overflow:hidden),
   logo onun altindan gunes gibi yavasca yukselir; arkasinda sicak bir isik halesi onunla birlikte dogar. */
.ma-sahne .ma-logo-kap { height: 104px; clip-path: inset(-300px -300px 0 -300px); }
.ma-sahne .ma-logo { position: relative; z-index: 1; transform: translateY(108%); animation: maDog 1.7s cubic-bezier(.2,.65,.2,1) .2s forwards; }
.ma-gunes { position: absolute; left: 50%; bottom: -70px; width: 230px; height: 230px; translate: -50% 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,236,200,.42) 0%, rgba(255,200,170,.14) 36%, transparent 64%); opacity: 0; transform: translateY(60px);
  animation: maGunes 1.9s cubic-bezier(.2,.65,.2,1) .1s forwards; }
@keyframes maDog { to { transform: none; } }
@keyframes maGunes { 60% { opacity: 1; } to { opacity: .75; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ma-sahne .ma-logo { transform: none; animation: none; } .ma-gunes { opacity: .6; transform: none; animation: none; } }

/* ======================================================= BELÇA renk düzeni (2026-10-16)
   Tabeladan ölçüldü (tools/renk-olc.mjs): BELÇA mavi-moru #8e0809 (harfler #8e0809 / şerit #7a0708), "süpermarket" kırmızısı #b5120f.
   Ana renk mavi-mor (bant, sekmeler, logo); kırmızı tabeladaki gibi İKİNCİ renk: ana düğmeler, indirim, sepet rozeti. */
:root { --belca-kirmizi: #b5120f; --belca-kirmizi-koyu: #8a0d0b; }
.gonder-dugme, .uyg .sepet-cubuk, .su-ana { background: var(--belca-kirmizi); box-shadow: 0 12px 26px rgba(181,18,15,.28); }
.gonder-dugme:active, .uyg .sepet-cubuk:active { background: var(--belca-kirmizi-koyu); }
.uyg .indirim { background: var(--belca-kirmizi); }
.uyg .fiyat.firsat { color: var(--belca-kirmizi); }
.alt-menu .rozet { background: var(--belca-kirmizi); }
.kc-hale { background: conic-gradient(from 0deg, transparent 0 20%, rgba(142,8,9,.38) 30%, transparent 42% 70%, rgba(181,18,15,.3) 80%, transparent 92%); }
/* bant: tabeladaki gibi alt kenarda kirmizi + mavi ince serit */
.uyg .bant { box-shadow: inset 0 -5px 0 rgba(181,18,15,.0); }
.uyg .bant::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(var(--belca-kirmizi) 0 50%, #6c0607 50% 100%); opacity: .9; }

/* ======================================================= BELÇA açılış sahnesi: gece, mağazanın önü (2026-10-16)
   0.45-1.6 sn BELÇA harf harf neon yanar · 1.75 süpermarket · 2.0 şeritler koşar · 2.45 "AÇIK" titreyerek yanar
   · 2.6 içerinin ışıkları · 3.0-3.9 cam kapılar iki yana kayar · 4.5 içeri girilir (sahne büyüyüp söner). */
.m-acilis.mb { background: linear-gradient(#0d1014, #171b20); clip-path: none; transition: opacity .6s ease; justify-content: flex-start; gap: 0; }
.m-acilis.mb.kapan { clip-path: none; opacity: 0; }
.mb-cephe { position: absolute; top: 0; left: 0; right: 0; height: 40%; display: flex; align-items: flex-end; justify-content: center; padding: 0 16px 22px;
  background: linear-gradient(#11151a 0%, #1f252b 70%, #2a3138 100%); border-bottom: 7px solid #3b444c; }
.mb-tabela { width: min(88%, 340px); padding: 10px 10px 6px; border-radius: 10px; background: linear-gradient(#2b3238, #232a2f); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 10px 30px rgba(0,0,0,.45); }
.mb-tabela img { display: block; width: 100%; height: auto; }
.mb-vitrin { position: absolute; top: 40%; left: 0; right: 0; bottom: 0; overflow: hidden; background: #0a0c0f; transition: transform .7s cubic-bezier(.5,0,.3,1); }
.m-acilis.mb.kapan .mb-vitrin { transform: scale(1.18); }
.mb-ic { position: absolute; inset: 0; opacity: .15; animation: mbIsik .9s ease-out 2.6s both;
  background: radial-gradient(ellipse 80% 70% at 50% 35%, #fffaf0 0%, #f4ead2 32%, #a99a78 72%, #3a352b 100%); }
.mb-raf { position: absolute; left: 8%; right: 8%; height: 7px; border-radius: 3px; background: rgba(120,104,72,.35); box-shadow: 0 -16px 0 -2px rgba(181,18,15,.18), 30px -16px 0 -2px rgba(142,8,9,.2), 70px -16px 0 -2px rgba(73,168,51,.2); }
.mb-raf.r1 { top: 30%; } .mb-raf.r2 { top: 50%; } .mb-raf.r3 { top: 70%; }
.mb-kapi { position: absolute; top: 3%; bottom: 0; width: 50%; border: 5px solid #8f99a2; border-bottom: 0; overflow: hidden;
  background: linear-gradient(135deg, rgba(190,206,218,.18), rgba(140,160,176,.08)); backdrop-filter: blur(1.5px);
  transition: transform .9s cubic-bezier(.65,0,.35,1); animation: mbKapi .9s cubic-bezier(.65,0,.35,1) 3s both; }
.mb-kapi.sol { left: 0; border-left: 0; --yon: -100%; }
.mb-kapi.sag { right: 0; border-right: 0; --yon: 100%; }
.mb-kapi::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 58%; background: rgba(214,222,228,.55); }
.mb-kapi::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.16) 38%, transparent 46%); }
.mb-kapi span { position: absolute; left: 0; right: 0; top: 54%; text-align: center; font-family: var(--baslik); font-weight: 800; font-size: 22px; letter-spacing: .06em; color: rgba(28,33,38,.78); z-index: 1; }
.mb-acik { position: absolute; top: 9%; left: 50%; translate: -50% 0; z-index: 2; font-family: var(--baslik); font-weight: 800; font-size: 20px; letter-spacing: .12em;
  color: #e0433f; padding: 3px 12px; border: 2px solid #e0433f; border-radius: 8px; opacity: .08;
  text-shadow: 0 0 6px #d9231f, 0 0 16px #d9231f; box-shadow: 0 0 10px rgba(217,35,31,.6), inset 0 0 8px rgba(217,35,31,.4); animation: mbAcik 1s linear 2.45s both, mbAcikGit .5s ease 3s forwards; }
.mb-zemin { position: absolute; left: 0; right: 0; bottom: 0; height: 10%; background: linear-gradient(transparent, rgba(0,0,0,.45)); }
.m-acilis.mb .ma-cizgi { z-index: 3; }
@keyframes mbIsik { to { opacity: 1; } }
@keyframes mbKapi { from { transform: none; } to { transform: translateX(var(--yon)); } }
@keyframes mbAcik { 0% { opacity: .08; } 10% { opacity: 1; } 14% { opacity: .2; } 24% { opacity: 1; } 30% { opacity: .4; } 38%, 100% { opacity: 1; } }
@keyframes mbAcikGit { to { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .mb-ic, .mb-kapi, .mb-acik { animation: none; } .mb-ic { opacity: 1; } .mb-kapi { display: none; } .mb-acik { opacity: 1; } }
.mb-cephe { min-height: 210px; } .mb-vitrin { top: max(40%, 210px); }
/* kapinin arkasi: gercek urunlerle dolu reyon (raf.png, tools/raf-uret.mjs). Isiklar 2.6 sn'de yanar: karanliktan aydinliga. */
.mb-ic { opacity: 1; background: #1b1915 url(raf.png) center 0 / cover no-repeat; filter: brightness(.22) saturate(.6); animation: mbIcIsik 1s ease-out 2.6s both; }
.mb-ic::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 90% 60% at 50% 15%, rgba(255,250,230,.35), transparent 70%); }
@keyframes mbIcIsik { to { filter: none; } }
@media (prefers-reduced-motion: reduce) { .mb-ic { filter: none; } }
/* kapinin arkasi: patronun verdigi market reyonu fotografi (acilis-market.jpg, 700x400). Isiklar 2.6 sn'de yanar. raf.png yerine. */
.mb-ic { background: #1b1915 url(acilis-market.jpg) 50% 45% / cover no-repeat; }
.mb-ic::after { background: linear-gradient(rgba(0,0,0,.05), rgba(0,0,0,.18)); }
/* Kepce: koyu acilista "kep" acik mor (mavi-mor koyu zeminde okunmuyor) */
.kc-acilis .kc-kep { fill: #ff9c97; }

/* ======================================================= SADE ACILIS (2026-10-16): buyuk produksiyon yok.
   Mavi-mor zemin + beyaz logo (logo-acilis.svg kendi icinde kurulur: 0.2-1.2 harfler, 1.0-1.7 seritler, 1.3-2.0 süpermarket).
   2.3 sn'de yumusakca soner. */
.m-acilis.ms { background: #8e0809; clip-path: none; transition: opacity .45s ease; gap: 0; }
.m-acilis.ms.kapan { clip-path: none; opacity: 0; }
.ms-logo { width: min(72vw, 290px); height: auto; animation: msGel .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes msGel { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ms-logo { animation: none; } }

/* ayni musteri = ayni kurye kilidi */
.a-kurye-sec button:disabled { opacity: .4; cursor: not-allowed; }
.a-kilit { color: #854d0e; background: #fef3c7; display: block; padding: 8px 10px; border-radius: 10px; font-weight: 700; }

/* musteri: siparis henuz gorulmedi */
.durum-rozet.yeni.bekliyor { background: #f1efec; color: #6b6560; }
.durum-karti.yeni .dk-adimlar span:first-child:not(.dolu) { color: #a8a29b; }

/* ---------- Siparis durum noktasi (2026-10-17): kirmizi yeni · sari hazirlaniyor · yesil yolda/teslim ---------- */
.sn { flex: none; width: 13px; height: 13px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 3px rgba(0,0,0,.05); }
.sn.yeni { background: #e11d2a; box-shadow: 0 0 0 3px rgba(225,29,42,.18); }
.sn.hazirlaniyor { background: #f5b301; box-shadow: 0 0 0 3px rgba(245,179,1,.25); }
.sn.yolda, .sn.tamam { background: #22a447; box-shadow: 0 0 0 3px rgba(34,164,71,.2); }
.sn.iptal { background: #b7b1ab; box-shadow: none; }
.sn.okunmadi { animation: snNabiz 1.2s ease-in-out infinite; }
@keyframes snNabiz { 50% { box-shadow: 0 0 0 7px rgba(225,29,42,0); transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .sn.okunmadi { animation: none; } }

/* Sefin Tesekkuru (admin) */
.a-sadakat { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--metin-3); } .a-sadakat b { color: var(--murekkep); } .a-sadakat b.hazir { color: #b7791f; }
.a-hediye { margin-top: 8px; }
.a-odul-not { display: flex !important; gap: 6px; align-items: center; margin-top: 6px; padding: 6px 9px; border-radius: 10px; background: #fff7e3; color: #7a5410 !important; font-weight: 700; font-size: 12.5px; }
.a-odul-not svg { flex: none; width: 15px; height: 15px; }
.a-tablo tfoot tr.a-odul td { color: #1f8a3a; font-weight: 800; } .a-tablo tfoot tr.a-odul small { font-weight: 600; opacity: .8; }