/* ==========================================================================
   CSKPEDIA — hesap.css
   Kayıt, giriş, şifre ve profil sayfaları.
   Aydınlık çatı paletini kullanır, o yüzden bu sayfalarda sıralama:
     base.css  →  cskpedia.css  →  hesap.css
   ========================================================================== */

.hesap-sayfa{
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(40px + var(--safe-t)) 20px calc(40px + var(--safe-b));
}

.hesap-kart{
  width: 100%; max-width: 420px;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 30px 26px 26px;
  box-shadow: 0 18px 46px -34px rgba(12,32,91,.5);
}

.hesap-kart > .marka{ font-size: 22px; display: flex; justify-content: center }

.hesap-baslik{
  font-family: var(--font-marka); font-weight: 300;
  font-size: 25px; line-height: 1.25; letter-spacing: -.01em;
  color: var(--ink); text-align: center; margin: 22px 0 6px;
}
.hesap-ozet{
  font-size: 13px; line-height: 1.65; color: var(--ink-2);
  text-align: center; margin: 0 0 24px;
}


/* --- form alanları --- */
.alan{ margin-bottom: 15px }
.alan label{
  display: block; margin-bottom: 6px;
  font-family: var(--font-marka); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.alan input{
  width: 100%; font: inherit; font-size: 14px; color: var(--ink);
  padding: 12px 14px; border-radius: 11px;
  background: var(--panel); border: 1px solid var(--line);
  transition: border-color .16s, background .16s;
}
.alan input:focus{
  outline: none; border-color: var(--turkuaz); background: #FFFFFF;
}
.alan input::placeholder{ color: var(--ink-3) }
.alan .ipucu{ display: block; margin-top: 6px; font-size: 11.5px; color: var(--ink-3) }

/* Kayıt düğmesinin üstündeki onay cümlesi. .alan içinde olmadığı için
   .ipucu stilini devralmaz; ölçüsünü burada alıyor. */
.onay-notu{ margin: 0 0 14px; font-size: 11.5px; line-height: 1.65; color: var(--ink-3) }
.onay-notu a{ color: var(--turkuaz); text-decoration: underline; text-underline-offset: 2px }


/* --- rol seçimi: iki kart --- */
.rol-secim{ display: grid; gap: 9px; margin-bottom: 18px }
@media (min-width: 420px){ .rol-secim{ grid-template-columns: 1fr 1fr } }

.rol-kart{ position: relative; display: block; cursor: pointer }
.rol-kart input{ position: absolute; opacity: 0; width: 0; height: 0 }
.rol-kart span{
  display: block; padding: 14px; border-radius: 13px;
  background: var(--panel); border: 1.5px solid var(--line);
  transition: border-color .16s, background .16s;
}
.rol-kart b{
  display: block; font-family: var(--font-marka);
  font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.rol-kart small{
  display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.5; color: var(--ink-2);
}
.rol-kart input:checked + span{ border-color: var(--turkuaz); background: var(--vurgu-dim) }
.rol-kart input:focus-visible + span{ outline: 2px solid var(--turkuaz); outline-offset: 2px }


/* --- düğmeler --- */
.dugme{
  width: 100%; display: block; text-align: center;
  font-family: var(--font-marka); font-size: 14px; font-weight: 600; letter-spacing: .02em;
  padding: 13px 18px; border-radius: 12px;
  background: var(--turkuaz); color: #FFFFFF;
  transition: opacity .16s;
}
.dugme:hover{ opacity: .9 }
.dugme[disabled]{ opacity: .5; cursor: default }

.dugme.ikincil{
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); margin-top: 9px;
}


/* --- mesaj kutusu --- */
.uyari{
  display: none; margin: 0 0 16px;
  padding: 12px 14px; border-radius: 11px;
  font-size: 12.5px; line-height: 1.6;
}
.uyari.gorunur{ display: block }
.uyari.hata{ background: #FDECF0; color: #8E1B3C; border: 1px solid #F5D3DC }
.uyari.basarili{ background: #E8F7F8; color: #05646B; border: 1px solid #C6EAEC }

/* Uyarı kutusunun içindeki eylem düğmesi — "doğrulama e-postasını tekrar
   gönder" gibi. Kutunun rengini devralıyor ki hata kutusunda kırmızı,
   başarı kutusunda turkuaz görünsün; ayrı bir renk tanımlamıyoruz. */
.uyari-eylem{
  display: inline-block;
  margin-top: 8px;
  padding: 6px 12px;
  font: inherit;
  font-weight: 600;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 8px;
  cursor: pointer;
}
.uyari-eylem:hover:not(:disabled){ background: rgba(0,0,0,.05) }
.uyari-eylem:focus-visible{ outline: 2px solid currentColor; outline-offset: 2px }
.uyari-eylem:disabled{ opacity: .6; cursor: default }


/* --- kart altı bağlantılar --- */
.hesap-alt{
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft);
  text-align: center; font-size: 12.5px; color: var(--ink-2); line-height: 1.9;
}
.hesap-alt a{ color: var(--turkuaz); font-weight: 600 }
.hesap-alt a:hover{ text-decoration: underline }


/* --- profil sayfası satırları --- */
.profil-satir{
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px;
}
.profil-satir:last-of-type{ border-bottom: 0 }
.profil-satir .etiket{
  font-family: var(--font-marka); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  flex: 0 0 auto;
}
.profil-satir .deger{ color: var(--ink); text-align: right; word-break: break-word }

.rol-rozet{
  display: inline-block; font-family: var(--font-marka);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  padding: 4px 9px; border-radius: 6px;
  background: var(--turkuaz); color: #FFFFFF;
}
.rol-rozet.isletme{ background: var(--lacivert) }
.rol-rozet.yonetici{ background: var(--bordo) }


/* ==========================================================================
   İŞLETME BAŞVURUSU VE DURUM KUTUSU
   (28 Ağustos 2026 — karar 7 ve 11)
   ========================================================================== */

.hesap-kart.genis{ max-width: 520px }

/* yan yana iki alan (il / ilçe) */
.ikili{ display: grid; gap: 0 12px }
@media (min-width: 420px){ .ikili{ grid-template-columns: 1fr 1fr } }

.alan select,
.alan textarea{
  width: 100%; font: inherit; font-size: 14px; color: var(--ink);
  padding: 12px 14px; border-radius: 11px;
  background: var(--panel); border: 1px solid var(--line);
  transition: border-color .16s, background .16s;
}
.alan select:focus,
.alan textarea:focus{ outline: none; border-color: var(--turkuaz); background: #FFFFFF }
.alan textarea{ resize: vertical; min-height: 78px; line-height: 1.55 }
.alan textarea::placeholder{ color: var(--ink-3) }

.istege-bagli{
  font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-3);
}

/* profil sayfasındaki işletme bölümü */
.isletme-kutu{
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid var(--line);
}
.isletme-baslik{
  font-family: var(--font-marka); font-weight: 600;
  font-size: 15px; letter-spacing: .01em; color: var(--ink);
  margin: 0 0 10px;
}
.isletme-metin{
  font-size: 13px; line-height: 1.65; color: var(--ink-2); margin: 12px 0 0;
}
.isletme-kutu .dugme{ margin-top: 16px }

/* başvuru durumu rozetleri */
.durum-rozet{
  display: inline-block; font-family: var(--font-marka);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  padding: 4px 9px; border-radius: 6px;
  background: #EAEFF4; color: var(--ink-3);
}
.durum-rozet.beklemede { background: #FFF3E0; color: #8A5200 }
.durum-rozet.onaylandi { background: var(--turkuaz); color: #FFFFFF }
.durum-rozet.reddedildi{ background: #FDECF0; color: #8E1B3C }
.durum-rozet.askida    { background: #EEF2F6; color: #56637E }


/* ==========================================================================
   YÖNETİCİ EKRANI — işletme başvuruları
   ========================================================================== */
.yonetici-sayfa{
  max-width: 760px; margin: 0 auto;
  padding: calc(28px + var(--safe-t)) 20px calc(48px + var(--safe-b));
}

.yonetici-ust{
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 6px;
}
.yonetici-ust .marka{ font-size: 18px }

.sayac-satiri{
  display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 22px;
}
.sayac{
  font-family: var(--font-marka); font-size: 11.5px; font-weight: 600;
  padding: 6px 11px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink-2);
}
.sayac b{ color: var(--ink) }

.basvuru-kart{
  background: #FFFFFF; border: 1px solid var(--line);
  border-radius: 16px; padding: 18px; margin-bottom: 12px;
}
.basvuru-kart.beklemede{ border-color: #F0D9A8; background: #FFFDF8 }

.basvuru-ust{
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.basvuru-ad{
  font-family: var(--font-marka); font-size: 16px; font-weight: 600;
  color: var(--ink); margin: 0;
}
.basvuru-tur{ font-size: 11.5px; color: var(--ink-3); margin: 3px 0 0 }

.basvuru-bilgi{ display: grid; gap: 0 16px; margin-bottom: 14px }
@media (min-width: 520px){ .basvuru-bilgi{ grid-template-columns: 1fr 1fr } }

.bilgi-satir{
  display: flex; gap: 10px; padding: 7px 0;
  border-bottom: 1px solid var(--line-soft); font-size: 13px;
}
.bilgi-satir .e{
  flex: 0 0 88px; color: var(--ink-3);
  font-family: var(--font-marka); font-size: 10.5px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; padding-top: 2px;
}
.bilgi-satir .d{ color: var(--ink); word-break: break-word }
.bilgi-satir a{ color: var(--turkuaz); font-weight: 600 }
.bilgi-satir a:hover{ text-decoration: underline }

/* eylem düğmeleri */
.eylemler{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px }

.dugme.kucuk{
  width: auto; display: inline-block;
  font-size: 12.5px; padding: 9px 16px; border-radius: 9px;
}
.dugme.onay{ background: var(--onay); border-color: var(--onay); color: #FFFFFF }
.dugme.red { background: var(--red);  border-color: var(--red);  color: #FFFFFF }
.dugme.notr{
  background: var(--panel); color: var(--ink); border: 1px solid var(--line);
}
.dugme.onay:hover, .dugme.red:hover, .dugme.notr:hover{ opacity: .88 }

/* red gerekçesi kutusu */
.red-kutu{
  margin-top: 12px; padding: 14px; border-radius: 11px;
  background: var(--red-dim); border: 1px solid rgba(179,38,30,.22);
}
.red-kutu label{
  display: block; margin-bottom: 7px;
  font-family: var(--font-marka); font-size: 11px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--red);
}
.red-kutu textarea{
  width: 100%; font: inherit; font-size: 13.5px; color: var(--ink);
  padding: 10px 12px; border-radius: 9px;
  background: #FFFFFF; border: 1px solid var(--line); resize: vertical;
  min-height: 62px;
}
.red-kutu textarea:focus{ outline: none; border-color: var(--red) }
.red-kutu .eylemler{ margin-top: 10px }

.bos-liste{
  text-align: center; padding: 46px 20px;
  color: var(--ink-3); font-size: 13.5px;
}

.bolum-etiketi{
  font-family: var(--font-marka);
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700; margin: 26px 0 10px;
}
.bolum-etiketi:first-of-type{ margin-top: 0 }


/* ==========================================================================
   İŞLETME MENÜ PANELİ
   ========================================================================== */
.satir-form{
  display: flex; gap: 8px; margin: 14px 0 0; flex-wrap: wrap;
}
.satir-form input{
  flex: 1; min-width: 180px; font: inherit; font-size: 14px; color: var(--ink);
  padding: 11px 13px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--line);
}
.satir-form input:focus{ outline: none; border-color: var(--turkuaz); background:#FFF }

.kategori-blok{
  background: #FFFFFF; border: 1px solid var(--line);
  border-radius: 16px; padding: 16px 16px 8px; margin-bottom: 12px;
}
.kategori-ust{
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft);
}
.kategori-ad{
  font-family: var(--font-marka); font-size: 15px; font-weight: 600;
  color: var(--ink); margin: 0;
}
.kategori-sayi{ font-size: 11.5px; color: var(--ink-3); margin-left: 8px; font-weight: 500 }

.urun-satir{
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--line-soft);
}
.urun-satir:last-of-type{ border-bottom: 0 }
.urun-bilgi{ flex: 1; min-width: 0 }
.urun-ad{ font-size: 14px; font-weight: 600; color: var(--ink) }
.urun-aciklama{ font-size: 12.5px; color: var(--ink-2); margin-top: 3px; line-height: 1.5 }
.urun-etiketler{ margin-top: 6px; display: flex; gap: 5px; flex-wrap: wrap }
.mini-etiket{
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
  padding: 3px 7px; border-radius: 5px; background: var(--panel-solid); color: var(--ink-3);
}
.mini-etiket.alerjen{ background: #FDECF0; color: #8E1B3C }
.mini-etiket.uyari-etiket{ background: #FFF3E0; color: #8A5200 }
.urun-sag{ text-align: right; flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px }
.urun-fiyat{ font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap }

/* ürün formu */
.urun-form{
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 15px; margin: 12px 0;
}
.urun-form .alan{ margin-bottom: 12px }
.urun-form .alan label{ font-size: 10.5px }

.alerjen-kutu{
  border: 1px solid var(--line); border-radius: 11px;
  padding: 13px; background: #FFFFFF; margin-bottom: 12px;
}
.alerjen-kutu > b{
  display: block; font-family: var(--font-marka); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px;
}
.alerjen-kutu .zorunlu-not{
  display: block; font-size: 11.5px; color: var(--ink-2); line-height: 1.5; margin-bottom: 10px;
}
.alerjen-liste{ display: flex; flex-wrap: wrap; gap: 6px }
.alerjen-secim{ position: relative }
.alerjen-secim input{ position: absolute; opacity: 0; width: 0; height: 0 }
.alerjen-secim span{
  display: inline-block; cursor: pointer;
  font-size: 12px; padding: 6px 11px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink-2);
  transition: border-color .14s, background .14s, color .14s;
}
.alerjen-secim input:checked + span{
  background: #FDECF0; border-color: #E0A9B8; color: #8E1B3C; font-weight: 600;
}
.alerjen-secim input:focus-visible + span{ outline: 2px solid var(--turkuaz); outline-offset: 2px }

.alerjen-yok-satir{
  margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.alerjen-durum{ font-size: 12px; font-weight: 600 }
.alerjen-durum.girilmedi { color: #8A5200 }
.alerjen-durum.girildi   { color: #8E1B3C }
.alerjen-durum.alerjen_yok{ color: var(--onay) }

/* toplu alerjen işaretleme — kategori başlığındaki "Alerjen" düğmesi
   (assets/js/isletme.js → topluAlerjenFormu). Dış kabuk görünmüyor;
   içerideki .alerjen-kutu zaten çerçeveli, iki çerçeve üst üste binmesin. */
.urun-form.toplu-alerjen{ background: transparent; border: 0; padding: 0 }
.toplu-alerjen .alerjen-kutu{ margin-bottom: 0 }

.toplu-kapsam{
  display: flex; flex-direction: column; gap: 7px;
  margin-bottom: 11px; padding: 10px 12px;
  background: var(--panel); border: 1px solid var(--line-soft); border-radius: 9px;
}
.toplu-secenek{
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; color: var(--ink-2); line-height: 1.45; cursor: pointer;
}
.toplu-secenek input{ margin-top: 2px; flex: 0 0 auto; accent-color: var(--turkuaz) }
.toplu-secenek b{ color: var(--ink) }

.toplu-uyari{ margin: 12px 0 0 !important; color: #8A5200 }


/* ==========================================================================
   MASALAR VE QR KODLARI
   ========================================================================== */
.sube-blok{
  background: #FFFFFF; border: 1px solid var(--line);
  border-radius: 16px; padding: 16px; margin-bottom: 12px;
}
.sube-ust{
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.sube-ad{
  font-family: var(--font-marka); font-size: 15px; font-weight: 600;
  color: var(--ink); margin: 0;
}
.sube-adres{ font-size: 11.5px; color: var(--ink-3); margin: 3px 0 0 }

.masa-izgara{
  display: grid; gap: 12px; margin-top: 14px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.masa-kart{
  border: 1px solid var(--line); border-radius: 13px;
  padding: 13px; text-align: center; background: var(--panel);
}
.masa-kart .qr{ background: #FFFFFF; border-radius: 8px; padding: 7px; display: block }
.masa-kart .qr svg{ display: block; width: 100%; height: auto }
.masa-kart b{
  display: block; margin: 10px 0 2px;
  font-family: var(--font-marka); font-size: 13px; font-weight: 600; color: var(--ink);
}
.masa-kart small{
  display: block; font-size: 10px; color: var(--ink-3);
  word-break: break-all; line-height: 1.4;
}
.masa-kart .eylemler{ justify-content: center; margin-top: 10px }
.masa-kart .dugme.kucuk{ font-size: 11.5px; padding: 7px 11px }

.masa-bos{
  padding: 26px 12px; text-align: center;
  font-size: 13px; color: var(--ink-3);
}

.toplu-kutu{
  margin-top: 14px; padding: 13px; border-radius: 11px;
  background: var(--vurgu-dim); border: 1px solid var(--line);
}
.toplu-kutu label{
  display: block; margin-bottom: 7px;
  font-family: var(--font-marka); font-size: 11px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
}
.toplu-kutu .satir-form{ margin: 0 }
.toplu-kutu .satir-form input{ max-width: 130px; flex: 0 1 130px }


/* --- yazdırma --- */
.baski-alani{ display: none }

@media print{
  body{ background: #FFFFFF }
  .yonetici-sayfa{ display: none }
  .baski-alani{ display: block }

  .baski-izgara{
    display: grid; gap: 14mm 10mm;
    grid-template-columns: repeat(3, 1fr);
  }
  .baski-kart{
    text-align: center; page-break-inside: avoid; break-inside: avoid;
    border: 1px dashed #BBBBBB; border-radius: 6mm; padding: 8mm 4mm;
  }
  .baski-kart svg{ width: 42mm; height: 42mm; display: block; margin: 0 auto }
  .baski-kart .isletme{
    font-family: "Outfit", sans-serif; font-size: 11pt; font-weight: 600;
    color: #0C205B; margin-top: 5mm; letter-spacing: .04em;
  }
  .baski-kart .masa{
    font-family: "Outfit", sans-serif; font-size: 16pt; font-weight: 700;
    color: #000000; margin-top: 2mm;
  }
  .baski-kart .yonerge{
    font-family: "Manrope", sans-serif; font-size: 8pt; color: #555555;
    margin-top: 3mm; line-height: 1.4;
  }
  .baski-baslik{ display: none }
}

/* sıralama okları — dar ve kare, metin düğmelerinden ayrılsın */
.dugme.kucuk.ok{
  padding: 8px 11px; font-size: 14px; line-height: 1; min-width: 36px;
}


/* ==========================================================================
   İŞLETME PROFİL DÜZENLEME
   ========================================================================== */
.bolum-kart{
  background: #FFFFFF; border: 1px solid var(--line);
  border-radius: 16px; padding: 18px; margin-bottom: 14px;
}
.bolum-kart > h2{
  font-family: var(--font-marka); font-size: 15px; font-weight: 600;
  color: var(--ink); margin: 0 0 4px;
}
.bolum-kart > .aciklama{
  font-size: 12.5px; color: var(--ink-2); margin: 0 0 16px; line-height: 1.6;
}

/* görsel seçiciler */
.gorsel-satiri{ display: grid; gap: 14px; margin-bottom: 16px }
@media (min-width: 560px){ .gorsel-satiri{ grid-template-columns: 150px 1fr } }

.gorsel-kutu{ display: flex; flex-direction: column; gap: 8px }
.gorsel-kutu > span.etiket{
  font-family: var(--font-marka); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.gorsel-onizleme{
  border: 1px dashed var(--line); border-radius: 12px;
  background: var(--panel); overflow: hidden;
  display: grid; place-items: center; position: relative;
}
.gorsel-onizleme.logo { aspect-ratio: 1 / 1 }
.gorsel-onizleme.kapak{ aspect-ratio: 16 / 7 }
.gorsel-onizleme img{ width: 100%; height: 100%; object-fit: cover; display: block }
.gorsel-onizleme .bos{
  font-size: 11.5px; color: var(--ink-3); text-align: center; padding: 12px;
}
.gorsel-kutu .eylemler{ gap: 6px }
.gorsel-kutu input[type=file]{ display: none }
.gorsel-ipucu{ font-size: 11px; color: var(--ink-3); line-height: 1.5 }

.kaydet-satiri{
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line-soft);
}
.kaydet-satiri .dugme{ width: auto }
.kaydet-notu{ font-size: 12px; color: var(--ink-3) }

/* Önizleme zemini dama deseni — beyaz ve şeffaf logolar düz gri kutuda
   görünmez oluyordu. Dama, görselin nerede bittiğini gösteriyor;
   grafik programlarında şeffaflığın standart gösterimi budur. */
.gorsel-onizleme{
  background-color: #FFFFFF;
  background-image:
    linear-gradient(45deg, #E7ECF2 25%, transparent 25%, transparent 75%, #E7ECF2 75%),
    linear-gradient(45deg, #E7ECF2 25%, transparent 25%, transparent 75%, #E7ECF2 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}
.gorsel-onizleme .bos{ background: rgba(255,255,255,.9); border-radius: 8px }


/* --- ürün görseli --- */
.urun-kucuk{
  width: 58px; height: 58px; flex: 0 0 58px;
  object-fit: cover; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel);
}

.urun-gorsel-alani{
  display: grid; gap: 12px; margin-bottom: 14px;
  grid-template-columns: 120px 1fr; align-items: start;
}
.gorsel-onizleme.urun{ aspect-ratio: 4 / 3 }
.urun-gorsel-alani .eylemler{ margin-bottom: 7px }


/* ==========================================================================
   ÜRÜN BOYUTLARI
   Bir ürünün birden fazla ölçüsü olabiliyor (Americano S/M/L).
   Gerekçe: veritabani/09-urun-boyutlari.sql
   ========================================================================== */
.boyut-alani{ margin-top: 2px }
.boyut-satirlari{ display: flex; flex-direction: column; gap: 8px }
.boyut-satirlari:not(:empty){ margin-bottom: 9px }

.boyut-satir{
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 38px;
  gap: 8px;
  align-items: center;
}

/* Izgara hücresi içindeki input, varsayılan olarak kendi "doğal" genişliğinin
   (yaklaşık 20 karakter) altına inmeyi reddeder ve hücreyi taşırır — satır
   kayar. min-width: 0 bu kilidi açıyor; box-sizing ise dolgu ve kenarlığın
   genişliğe dahil olmasını garantiye alıyor. İkisi de savunma amaçlı:
   base.css zaten * için border-box tanımlıyor, ama bu satır ona bağımlı
   kalmasın. */
.boyut-satir .b-isim,
.boyut-satir .b-fiyat{
  margin: 0;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.boyut-satir .b-isim{ text-align: center }

.boyut-sil{
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: transparent;
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.boyut-sil:hover{ border-color: var(--red); color: var(--red) }
.boyut-sil:focus-visible{ outline: 2px solid var(--vurgu); outline-offset: 2px }

.boyut-ekle{ align-self: flex-start }

/* Panelde sağdaki fiyat sütununda boyut sayısı */
.urun-boyut-sayisi{
  display: block;
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 2px;
  letter-spacing: .02em;
}

@media (max-width: 460px){
  .boyut-satir{ grid-template-columns: 76px minmax(0, 1fr) 38px }
}

/* Geçersiz/güvensiz adres — yönetici görür ama tıklayamaz (1 Ekim 2026) */
.guvensiz-adres{ color: var(--bordo, #8E1B3C); word-break: break-all; }
.guvensiz-adres b{ font-weight: 600; }