/* Sona Bayi Portalı — yerleşim katmanı (W0).
   Renk ve yazı DEĞERLERİ buraya yazılmaz: hepsi kimlik token'larından
   (--sona-*) gelir; bu dosya yalnız yerleşim kurar. */

* { box-sizing: border-box; }
html { font-family: var(--sona-yazi); color: var(--sona-notr-900, #16191d); }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column;
       background: var(--sona-notr-50, #f7f8f9); }

.kap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 1.25rem; }

/* ---------- üst çubuk ---------- */
.ust { background: #fff; border-bottom: 1px solid var(--sona-notr-200, #e6e8eb); }
.ust__ic { display: flex; align-items: center; gap: 1.5rem; min-height: 56px; }
.ust__logo { display: flex; align-items: center; }
.ust__logo img { display: block; }
.ust__menu { display: flex; gap: 1rem; }
.ust__menu a { text-decoration: none; color: inherit; font-weight: 600; }
.ust__menu a:hover { color: var(--sona-mavi-600, #0076be); }
.ust__sag { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; }
.ust__kim { color: var(--sona-notr-600, #5c6570); font-size: 0.9rem; }

.govde { flex: 1; padding-block: 2rem 3rem; }

.alt { border-top: 1px solid var(--sona-notr-200, #e6e8eb); padding-block: 1rem;
       color: var(--sona-notr-600, #5c6570); font-size: 0.85rem; background: #fff; }

/* ---------- düğmeler (site .btn kalıbı) ---------- */
.btn { display: inline-block; padding: 0.55rem 1.1rem; border-radius: 6px;
       background: var(--sona-mavi-600, #0076be); color: #fff; font-weight: 600;
       text-decoration: none; border: 1px solid transparent; cursor: pointer;
       font-size: 0.95rem; font-family: inherit; }
.btn:hover { filter: brightness(1.08); }
.btn--ikincil { background: transparent; color: var(--sona-mavi-600, #0076be);
                border-color: currentColor; }
.btn--kucuk { padding: 0.3rem 0.7rem; font-size: 0.85rem; }

/* ---------- giriş ---------- */
.girisKutu { max-width: 380px; margin: 3rem auto; background: #fff;
             border: 1px solid var(--sona-notr-200, #e6e8eb); border-radius: 10px;
             padding: 2rem; }
.girisKutu h1 { margin-top: 0; }
.girisKutu label { display: block; margin-bottom: 1rem; }
.girisKutu label span { display: block; font-size: 0.85rem; font-weight: 600;
                        margin-bottom: 0.3rem; }
.girisKutu input { width: 100%; padding: 0.55rem 0.7rem; font: inherit;
                   border: 1px solid var(--sona-notr-300, #cfd4da); border-radius: 6px; }
.girisKutu input:focus { outline: 2px solid var(--sona-mavi-600, #0076be); outline-offset: 1px; }
.girisKutu .btn { width: 100%; margin-top: 0.5rem; }
.uyari { background: var(--sona-kirmizi-50, #fdf2f2); border: 1px solid var(--sona-kirmizi-300, #f1b9b7);
         color: var(--sona-kirmizi-700, #9b1c1c); padding: 0.6rem 0.8rem; border-radius: 6px;
         font-size: 0.9rem; }

/* ---------- katalog ---------- */
.notSatiri { color: var(--sona-notr-600, #5c6570); font-size: 0.9rem; }
.onizlemeSeridi { background: var(--sona-sari-50, #fdfdea); border: 1px solid var(--sona-sari-300, #f0e08a);
                  padding: 0.5rem 0.8rem; border-radius: 6px; font-size: 0.85rem; }
.katGrup { margin-top: 2rem; }
.katListe { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1rem; margin-top: 0.75rem; }
.katKart { background: #fff; border: 1px solid var(--sona-notr-200, #e6e8eb);
           border-radius: 10px; padding: 1.1rem 1.2rem; display: flex;
           flex-direction: column; gap: 0.6rem; }
.katKart__ust { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.katKart__ust h3 { margin: 0; font-size: 1.05rem; }
.katKart__kod { color: var(--sona-notr-600, #5c6570); font-family: var(--sona-yazi-mono);
                font-size: 0.8rem; white-space: nowrap; }
.katKart__tanim { margin: 0; font-size: 0.88rem; line-height: 1.5;
                  color: var(--sona-notr-700, #3f4854); }
.katKart__fiyat { margin: auto 0 0; display: flex; flex-direction: column; gap: 0.15rem;
                  border-top: 1px solid var(--sona-notr-100, #eef0f2); padding-top: 0.6rem; }
.katKart__fiyat div { display: flex; justify-content: space-between; font-size: 0.9rem; }
.katKart__fiyat dt { color: var(--sona-notr-600, #5c6570); }
.katKart__fiyat dd { margin: 0; font-variant-numeric: tabular-nums; }
.katKart__fiyat .net { font-weight: 700; font-size: 1rem; }
.ustuCizili { text-decoration: line-through; color: var(--sona-notr-500, #77808b); }

/* ---------- sipariş ---------- */
.baslikSatiri { display: flex; align-items: center; justify-content: space-between;
                gap: 1rem; flex-wrap: wrap; }
.baslikSatiri h1 { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

.tablo { width: 100%; border-collapse: collapse; background: #fff;
         border: 1px solid var(--sona-notr-200, #e6e8eb); border-radius: 10px;
         overflow: hidden; margin-block: 1rem; }
.tablo th, .tablo td { padding: 0.6rem 0.8rem; text-align: left;
                       border-bottom: 1px solid var(--sona-notr-100, #eef0f2); }
.tablo th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em;
            color: var(--sona-notr-600, #5c6570); background: var(--sona-notr-50, #f7f8f9); }
.tablo .sag { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabloKap { overflow-x: auto; }
.tablo .dar { width: 6.5rem; }
.tablo tfoot td { border-bottom: none; }
.toplamSatiri td { font-weight: 700; border-top: 2px solid var(--sona-notr-300, #cfd4da); }
.glr td { color: var(--sona-notr-600, #5c6570); font-size: 0.9rem; }
.adetGirdi { width: 5.5rem; padding: 0.4rem 0.5rem; font: inherit; text-align: right;
             border: 1px solid var(--sona-notr-300, #cfd4da); border-radius: 6px; }
.gorselH { width: 64px; }
.tanimH { min-width: 22rem; max-width: 38rem; font-size: 0.88rem; line-height: 1.5;
          color: var(--sona-notr-800, #2b323b); }
.urunMini { display: block; width: 56px; height: 56px; object-fit: contain; }
.urunMini--bos { background: var(--sona-notr-100, #eef0f2); border-radius: 8px; }
.adetGirdi:focus { outline: 2px solid var(--sona-mavi-600, #0076be); outline-offset: 1px; }

.odemeKutu { border: 1px solid var(--sona-notr-200, #e6e8eb); border-radius: 10px;
             background: #fff; padding: 1rem 1.2rem; margin-block: 1rem; }
.odemeKutu legend { font-weight: 700; padding-inline: 0.3rem; }
.odemeSecim { display: flex; align-items: center; gap: 0.5rem; padding-block: 0.25rem; }
.odemeSecim--kapali { opacity: 0.45; }

.sartKutu { background: var(--sona-notr-50, #f7f8f9); border: 1px solid var(--sona-notr-200, #e6e8eb);
            border-radius: 10px; padding: 0.9rem 1.2rem; margin-block: 1rem;
            font-size: 0.88rem; line-height: 1.55; color: var(--sona-notr-700, #3f4854); }
.sartKutu p { margin-block: 0.4rem; }
.sartOnay { display: flex; gap: 0.5rem; align-items: flex-start; font-weight: 600;
            color: var(--sona-notr-900, #16191d); margin-top: 0.6rem; }
.sartOnay input { margin-top: 0.2rem; }

.bilgiSeridi { background: var(--sona-yesil-50, #f0f9f4); border: 1px solid var(--sona-yesil-300, #a3d9b8);
               color: var(--sona-yesil-800, #1d6f42); padding: 0.6rem 0.8rem;
               border-radius: 6px; font-size: 0.9rem; }
.eylemSatiri { display: flex; gap: 0.8rem; align-items: center; margin-top: 1.5rem; }
.eylemSatiri form { margin: 0; }

.rozet { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 99px;
         font-size: 0.78rem; font-weight: 700; vertical-align: middle;
         background: var(--sona-notr-100, #eef0f2); color: var(--sona-notr-700, #3f4854); }
.rozet--onay_bekliyor, .rozet--odeme_bekliyor, .rozet--cek_bekleniyor,
.rozet--tahsilat_bekliyor { background: var(--sona-sari-50, #fdfdea);
                            color: var(--sona-sari-800, #8a6d1a); }
.rozet--planlandi, .rozet--kismi_sevk, .rozet--sevk_edildi,
.rozet--faturalandi { background: var(--sona-mavi-50, #eaf4fb); color: var(--sona-mavi-700, #005d96); }
.rozet--kapandi { background: var(--sona-yesil-50, #f0f9f4); color: var(--sona-yesil-800, #1d6f42); }
.rozet--reddedildi, .rozet--iptal { background: var(--sona-kirmizi-50, #fdf2f2);
                                    color: var(--sona-kirmizi-700, #9b1c1c); }