:root{
  --bg:#f4f6fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;

  --green:#16a34a;
  --green2:#15803d;

  --blue:#3558e8;
  --dark:#111827;
  --light:#eef2f7;

  --radius:16px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* =========================
   HEADER
   ========================= */
.page-header{
  max-width: 1100px;
  margin: 18px auto 10px;
  padding: 0 16px;
}
.page-header h1{
  margin:0;
  font-size: 28px;
  font-weight: 900;
}

/* =========================
   TOP BAR
   ========================= */
.top-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

.top-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(16,24,40,.08);
  padding: 14px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
}

.left{
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.search{
  flex: 1;
  min-width: 260px;
  max-width: 520px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  font-size: 16px;
  outline: none;
  background:#fff;
}
.search:focus{
  border-color:#93c5fd;
  box-shadow: 0 0 0 4px rgba(59,130,246,.15);
}

.right{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

/* Genel toplam pill */
.total-pill{
  display:flex;
  align-items:center;
  gap: 10px;
  white-space: nowrap;
  padding: 8px 12px;
  border-radius: 14px;
  background: #f0f6ff;
  border: 1px solid #dbeafe;
}
.total-label{
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
  line-height: 1;
}
.total-value{
  font-size: 20px;
  font-weight: 900;
  color: #1e3a8a;
  line-height: 1;
}

/* Butonlar */
.btn{
  height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 900;
  font-size: 15px;
  white-space: nowrap;
  transition: transform .06s ease, opacity .2s ease;
}
.btn:active{ transform: translateY(1px); }
.btn:disabled{ opacity:.65; cursor:not-allowed; }

.btn-green{ background: var(--green); color:#fff; }
.btn-green:hover{ background: var(--green2); }

.btn-blue{  background: var(--blue);  color:#fff; }
.btn-dark{  background: var(--dark);  color:#fff; }
.btn-light{ background: var(--light); color:#111827; }

/* =========================
   CONTENT
   ========================= */
.content{
  max-width:1100px;
  margin: 14px auto 60px;
  padding: 0 16px;
}

.list{ list-style:none; padding:0; margin:0; }

/* =========================
   PRODUCT ROW (AKTİF LİSTE TASARIMI)
   Masaüstünde: her zaman yan yana
   ========================= */
.product-row{
  display:grid;
  grid-template-columns: 5fr 100px 130px 120px 170px 130px;
  gap: 14px;
  align-items: center;

  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: 0 14px 30px rgba(16,24,40,.06);
}

.product-row .cell{ min-width:0; }

/* Ürün adı: 2 satır, okunur */
.product-row .name{
  font-weight: 900;
  font-size: 15px;
  line-height: 1.25;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  overflow: hidden;
  white-space: normal;
}

/* Input alanları kompakt */
.product-row .field .label{
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  margin-bottom: 4px;
}
.product-row .field input{
  width:100%;
  height:36px;
  padding:0 10px;
  border:1px solid #cbd5e1;
  border-radius:12px;
  font-size:14px;
  outline:none;
  background:#fff;
}
.product-row .field input:focus{
  border-color:#86efac;
  box-shadow: 0 0 0 4px rgba(34,197,94,.12);
}

.product-row .muted{
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.product-row .meta{
  white-space: nowrap;
  font-weight: 900;
}

.product-row .total{
  white-space: nowrap;
  font-weight: 900;
  padding: 8px 12px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
}

.product-row .actions{
  display:flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

/* Kaydet butonu */
.saveBtn{
  height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: var(--green);
  color:#fff;
  font-weight: 900;
  cursor:pointer;
  transition: background .15s ease, transform .06s ease, opacity .2s ease;
}
.saveBtn:hover{ background: var(--green2); }
.saveBtn:active{ transform: translateY(1px); }
.saveBtn:disabled{ opacity:.7; cursor:not-allowed; }

.msg{
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
  min-height: 14px;
}

/* =========================
   ✅ MOBİL TOPBAR (İSTEDİĞİNİZ):
   1. satır: Sesli Ara | Tümü | Excel (yan yana)
   2. satır: Arama (tam genişlik)
   3. satır: Genel Toplam (tam genişlik)
   PDF: mobilde gizli
   ========================= */
@media (max-width: 720px){

  /* topbar düzeni */
  .topbar{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
      "voice all excel"
      "search search search"
      "total total total";
    gap: 10px;
    align-items: center;
  }

  /* left/right wrapperlar grid'i bozmasın */
  .left, .right{ display: contents; }

  /* yerleşimler */
  #voiceBtn{ grid-area: voice; }
  #allBtn{ grid-area: all; }
  #excelBtn{ grid-area: excel; }
  #searchBox{ grid-area: search; }

  /* PDF mobilde tamamen gizli */
  #pdfBtn{ display:none !important; }

  /* butonlar */
  #voiceBtn, #allBtn, #excelBtn{
    width:100%;
    height:46px;
    border-radius:14px;
    font-size:14px;
    font-weight:900;
    padding:0 8px;
  }

  /* arama */
  #searchBox{
    width:100%;
    height:46px;
    border-radius:14px;
    font-size:15px;
    min-width:0;
    max-width:none;
  }

  /* toplam */
  .total-pill{
    grid-area: total;
    width:100%;
    justify-content: space-between;
  }
}

/* =========================
   ✅ ÜRÜN SATIRI MOBİL KIRILIMI
   Sadece gerçek telefon (480px ve altı)
   ========================= */
@media (max-width: 480px){
  .product-row{
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .product-row .name{
    grid-column: 1 / -1;
    -webkit-line-clamp: 3;
  }

  .product-row .meta{ grid-column: 1 / 2; }
  .product-row .total{ grid-column: 2 / 3; }

  .product-row .actions{
    grid-column: 1 / -1;
    align-items: stretch;
  }

  .saveBtn{
    width: 100%;
    height: 46px;
  }
}

/* =========================
   PRINT
   ========================= */
@media print{
  .top-wrap, .page-header{ display:none !important; }
  body{ background:#fff; }
  .content{ padding:0; max-width:none; }
  .product-row{
    box-shadow:none;
    border-radius:0;
    border:0;
    border-bottom:1px solid #ddd;
  }
  .saveBtn, .msg{ display:none !important; }
  input{ border:0 !important; }
}
/* =========================
   MOBİL FINAL: Sesli Ara Geniş | Tümü | Excel
   ========================= */
@media (max-width: 720px){

  .topbar{
    display: grid !important;
    grid-template-columns: 1.3fr 1fr 1fr !important; /* 🔥 fark burada */
    grid-template-areas:
      "voice all excel"
      "search search search"
      "total total total";
    gap: 10px !important;
    align-items: center !important;
  }

  .left, .right{ 
    display: contents !important; 
  }

  #voiceBtn{ 
    grid-area: voice; 
  }
  #allBtn{ 
    grid-area: all; 
  }
  #excelBtn{ 
    grid-area: excel; 
  }
  #searchBox{ 
    grid-area: search; 
  }

  /* PDF mobilde yok */
  #pdfBtn{ 
    display: none !important; 
  }

  /* Butonlar */
  #voiceBtn, #allBtn, #excelBtn{
    width: 100% !important;
    height: 46px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    padding: 0 8px !important;
  }

  /* Arama */
  #searchBox{
    width: 100% !important;
    height: 46px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /* Genel toplam */
  .total-pill{
    grid-area: total;
    width: 100% !important;
    justify-content: space-between !important;
  }
}
@media (max-width: 720px){

  /* Topbar grid yap: 1. satır butonlar, 2. satır arama, 3. satır toplam */
  .topbar{
    display:grid !important;
    grid-template-columns: 1fr !important;
    gap:10px !important;
  }

  /* wrapperlar bölmesin */
  .left, .right{
    display: contents !important;
  }

  /* 1) Buton satırı: Sesli + (actions) yan yana */
  /* left içindeki voiceBtn ile right içindeki actions'ı aynı satırda tutmak için
     voiceBtn'yi actions içine alamıyoruz; o yüzden topbar’a doğrudan yerleşim veriyoruz. */
  #voiceBtn{
    order: 1 !important;
    width:100% !important;
    height:46px !important;
    border-radius:14px !important;
  }

  /* right içindeki buton grubu */
  .actions{
    order: 2 !important;
    display:grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap:8px !important;
  }

  #allBtn, #excelBtn, #pdfBtn{
    width:100% !important;
    height:46px !important;
    border-radius:14px !important;
    font-size:14px !important;
    padding:0 8px !important;
  }

  /* PDF mobilde görünmesin (istersen kaldır) */
  #pdfBtn{
    display:none !important;
  }
  /* PDF gizlenince 2 buton kalıyor; grid 3 kolon kalmasın */
  .actions{
    grid-template-columns: 1fr 1fr !important;
  }

  /* 2) Arama satırı */
  #searchBox{
    order: 3 !important;
    width:100% !important;
    height:46px !important;
    border-radius:14px !important;
    min-width:0 !important;
    max-width:none !important;
  }

  /* 3) Toplam satırı */
  .total-pill{
    order: 4 !important;
    width:100% !important;
    justify-content: space-between !important;
  }
}