/* ============================================================
   CANER ADIGÜZEL TESBİH - ANA STİL DOSYASI
   Bu dosya tüm sayfaların ortak görünümünü içerir.
   Bölümler açıklama başlıklarıyla ayrılmıştır.
============================================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background: #f5f3ef;
  color: #182330;
}

.app-container {
  display: flex;
  min-height: 100vh;
}

/* =========================
   SIDEBAR / SOL YÖNETİM MENÜSÜ
   Logo, navigasyon ve alt bilgi alanı.
========================= */

.sidebar {
  width: 250px;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;

  background: linear-gradient(180deg, #101c26, #162733);

  color: white;

  display: flex;
  flex-direction: column;

  padding: 24px 16px;

  z-index: 1000;
}

.logo-area {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 15px 5px 25px;

  margin-bottom: 15px;
}

.sidebar-logo {
  width: 180px;
  max-width: 100%;

  height: auto;

  display: block;

  object-fit: contain;
}

.sidebar-menu {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.menu-item {
  display: flex;
  align-items: center;

  gap: 14px;

  padding: 13px 15px;

  color: #f5f5f5;

  text-decoration: none;

  border-radius: 7px;

  transition: 0.2s;
}

.menu-item i {
  width: 22px;
  text-align: center;
}

.menu-item:hover {
  color: white;
  background: #273844;
}

.menu-item.active {
  background: linear-gradient(135deg, #c69235, #aa7524);
  color: white;
}

.sidebar-footer {
  margin-top: auto;

  border-top: 1px solid #46515a;

  padding: 25px 10px;

  color: #9ca8af;

  text-align: center;

  font-style: italic;

  font-size: 13px;

  line-height: 1.8;
}

/* =========================
   ANA İÇERİK ALANI
   Sidebar dışındaki sayfa içeriğinin genel yerleşimi.
========================= */

.main-content {
  margin-left: 250px;
  width: calc(100% - 250px);

  padding: 25px;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 20px;
}

.page-header h1 {
  font-size: 26px;
  font-weight: 700;

  margin: 0;
}

.page-header p {
  color: #6e7780;
  font-size: 14px;

  margin: 5px 0 0;
}

.header-slogan {
  color: #8d7857;

  font-size: 14px;
  font-style: italic;

  display: flex;
  align-items: center;
  gap: 10px;
}

.header-slogan::before,
.header-slogan::after {
  content: "";

  width: 45px;
  height: 1px;

  background: #c59543;
}

/* =========================
   ORTAK İÇERİK KARTLARI
   Sayfalardaki beyaz içerik panellerinin ortak görünümü.
========================= */

.content-card {
  background: #ffffff;

  border-radius: 10px;

  padding: 22px;

  margin-bottom: 20px;

  box-shadow: 0 3px 18px rgba(0, 0, 0, 0.07);

  border: 1px solid #ececec;
}

.section-title {
  margin-bottom: 20px;
}

.section-title h2,
.collection-header h2 {
  font-size: 21px;
  font-weight: 700;

  margin: 0;
}

.section-title p,
.collection-header p {
  color: #76808a;
  font-size: 13px;

  margin: 4px 0 0;
}

/* =========================
   FORM ALANLARI
   Input, select, label ve textarea stilleri.
========================= */

.form-group {
  margin-bottom: 15px;
}

.form-group label,
.photo-label {
  display: block;

  font-size: 13px;
  font-weight: 700;

  margin-bottom: 6px;
}

.form-group label span {
  color: #dc3545;
}

.form-group small {
  display: block;

  font-size: 10px;
  color: #9199a0;

  margin-top: 4px;
}

.form-control,
.form-select {
  min-height: 42px;

  font-size: 13px;

  border-color: #dce0e4;

  border-radius: 6px;
}

.form-control:focus,
.form-select:focus {
  border-color: #bd8a34;

  box-shadow: 0 0 0 0.18rem rgba(189, 138, 52, 0.15);
}

.textarea {
  min-height: 110px;
  resize: vertical;
}

/* =========================
   FOTOĞRAF YÜKLEME / ÖNİZLEME
   Tesbih fotoğrafı seçme ve önizleme alanları.
========================= */

.photo-upload-box {
  width: 100%;
  min-height: 145px;

  border: 2px dashed #d6d9dc;

  border-radius: 8px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  cursor: pointer;

  transition: 0.2s;

  color: #44505b;

  padding: 20px;
}

.photo-upload-box:hover {
  border-color: #c38c30;

  background: #fcfaf5;
}

.photo-upload-box i {
  font-size: 35px;

  margin-bottom: 12px;

  color: #172633;
}

.photo-upload-box strong {
  font-size: 13px;
}

.photo-upload-box span {
  font-size: 11px;
  color: #8d959b;

  margin-top: 3px;
}

.photo-preview-container {
  margin-top: 12px;
}

.photo-preview {
  width: 100%;
  max-height: 170px;

  object-fit: cover;

  border-radius: 7px;

  border: 1px solid #dedede;
}

/* =========================
   FORM BUTONLARI
   Kaydet, temizle ve işlem butonları.
========================= */

.form-buttons {
  display: flex;
  justify-content: flex-end;

  gap: 10px;

  margin-top: 12px;
}

.btn-clear,
.btn-save {
  border: none;

  padding: 11px 25px;

  border-radius: 6px;

  color: white;

  font-size: 13px;
  font-weight: 600;

  cursor: pointer;
}

.btn-clear {
  background: #818b94;
}

.btn-save {
  background: linear-gradient(135deg, #c69338, #ad7726);
}

.btn-save i {
  margin-right: 6px;
}

/* =========================
   KOLEKSİYON SAYFASI ÜST ALANI
   Arama, başlık ve yeni kayıt butonu.
========================= */

.collection-header {
  display: flex;

  justify-content: space-between;
  align-items: center;

  margin-bottom: 15px;

  gap: 20px;
}

.collection-actions {
  display: flex;
  align-items: center;

  gap: 10px;
}

.search-box {
  height: 40px;

  display: flex;
  align-items: center;

  border: 1px solid #dcdfe3;

  border-radius: 6px;

  background: white;

  padding: 0 12px;
}

.search-box i {
  color: #56616b;

  margin-right: 8px;
}

.search-box input {
  border: none;
  outline: none;

  width: 180px;

  font-size: 13px;
}

.new-button {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  height: 40px;

  padding: 0 15px;

  border-radius: 6px;

  background: #b9842e;

  color: white;

  text-decoration: none;

  font-size: 13px;
}

.new-button:hover {
  color: white;
  background: #9d6f25;
}

/* TABLO */

.action-button.delete {
  color: #dc3545;

  border-color: #efc7ca;
}

/* =========================
   BOŞ LİSTE DURUMU
   Koleksiyonda kayıt bulunmadığında gösterilir.
========================= */

.empty-list {
  display: none;

  padding: 55px 20px;

  text-align: center;

  color: #87919a;
}

.empty-list i {
  font-size: 38px;

  color: #bc8c39;

  margin-bottom: 15px;
}

.empty-list h3 {
  font-size: 17px;

  color: #293642;
}

.empty-list p {
  font-size: 13px;
}

/* =========================
   MOBİL MENÜ BUTONU
   Küçük ekranlarda sidebar açma düğmesi.
========================= */

.mobile-menu-button {
  display: none;

  position: fixed;

  top: 15px;
  left: 15px;

  width: 42px;
  height: 42px;

  border: none;
  border-radius: 7px;

  background: #14232e;

  color: white;

  z-index: 1200;
}

/* =========================
   TESBİH DETAY SAYFASI
   QR ile açılan genel detay görünümünün stilleri.
========================= */

.detail-page {
  min-height: 100vh;

  background: #f4f2ed;

  padding: 40px 20px;
}

.detail-wrapper {
  width: 100%;
  max-width: 1100px;

  margin: auto;
}

.detail-card {
  background: white;

  border-radius: 12px;

  padding: 25px;

  box-shadow: 0 3px 20px rgba(0, 0, 0, 0.08);
}

.detail-photo {
  width: 100%;

  max-height: 520px;

  object-fit: cover;

  border-radius: 10px;
}

.detail-placeholder {
  width: 100%;
  height: 350px;

  background: #eceeef;

  border-radius: 10px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #9ba3aa;

  font-size: 70px;
}

.detail-title {
  font-size: 29px;
  font-weight: 700;

  margin-bottom: 20px;
}

.detail-info {
  width: 100%;
}

.detail-row {
  display: grid;

  grid-template-columns: 150px 1fr;

  padding: 8px 0;

  border-bottom: 1px solid #eeeeee;

  font-size: 14px;
}

.detail-row strong {
  color: #515b64;
}

#qrcode {
  display: flex;
  justify-content: center;

  margin-bottom: 12px;
}

#qrcode img,
#qrcode canvas {
  border: 10px solid white;
}

/* MOBİL */

@media (max-width: 900px) {
  .mobile-menu-button {
    display: block;
  }

  .sidebar {
    transform: translateX(-100%);

    transition: 0.3s;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .main-content {
    margin-left: 0;

    width: 100%;

    padding: 75px 14px 20px;
  }

  .page-header {
    align-items: flex-start;

    flex-direction: column;
  }

  .header-slogan {
    display: none;
  }

  .collection-header {
    flex-direction: column;

    align-items: stretch;
  }

  .collection-actions {
    flex-direction: column;

    align-items: stretch;
  }

  .search-box input {
    width: 100%;
  }

  .new-button {
    justify-content: center;
  }

  .detail-row {
    grid-template-columns: 120px 1fr;
  }
}

@media (max-width: 600px) {
  .content-card {
    padding: 16px;
  }

  .page-header h1 {
    font-size: 23px;
  }

  .form-buttons {
    flex-direction: column;
  }

  .btn-clear,
  .btn-save {
    width: 100%;
  }

  .detail-page {
    padding: 20px 12px;
  }

  .detail-card {
    padding: 15px;
  }

  .detail-title {
    font-size: 24px;
  }

  .detail-row {
    grid-template-columns: 1fr;

    gap: 3px;
  }
}
.dashboard-card {
  display: flex;
  align-items: center;
  gap: 18px;

  min-height: 140px;

  padding: 22px;

  background: #faf9f6;

  border: 1px solid #e7e1d7;
  border-radius: 10px;

  text-decoration: none;

  color: #182330;

  transition: 0.2s;
}

.dashboard-card:hover {
  transform: translateY(-3px);

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);

  color: #182330;

  border-color: #c8943a;
}

.dashboard-icon {
  width: 55px;
  height: 55px;

  min-width: 55px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #c28b30;

  color: white;

  font-size: 22px;
}

.dashboard-card h3 {
  font-size: 17px;
  font-weight: 700;

  margin: 0 0 6px;
}

.dashboard-card p {
  margin: 0;

  color: #747d84;

  font-size: 13px;
}
.stat-card {
  background: white;

  border: 1px solid #ebe7df;
  border-radius: 10px;

  min-height: 115px;

  display: flex;
  align-items: center;

  gap: 18px;

  padding: 20px;

  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.stat-icon {
  width: 55px;
  height: 55px;

  min-width: 55px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;

  background: #f4ede1;

  color: #b47d26;

  font-size: 23px;
}

.stat-card span {
  display: block;

  color: #7c858c;

  font-size: 13px;

  margin-bottom: 4px;
}

.stat-card h2 {
  margin: 0;

  font-size: 28px;
  font-weight: 700;

  color: #1b2934;
}

/* =========================
   ANA SAYFA / SON EKLENENLER
   Dashboard üzerindeki son tesbih kartları.
========================= */

.recent-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 18px;
}

.recent-card {
  background: #faf9f6;

  border: 1px solid #e6e1d8;

  border-radius: 10px;

  overflow: hidden;

  color: #1c2934;

  text-decoration: none;

  transition: 0.2s;
}

.recent-card:hover {
  transform: translateY(-3px);

  color: #1c2934;

  border-color: #c38b30;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.recent-image {
  width: 100%;
  height: 170px;

  background: #eceae6;
}

.recent-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.recent-placeholder {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #bb8b38;

  font-size: 42px;
}

.recent-content {
  padding: 15px;
}

.recent-code {
  font-size: 11px;

  font-weight: 700;

  color: #b27c28;
}

.recent-content h3 {
  margin: 5px 0;

  font-size: 16px;
  font-weight: 700;
}

.recent-content p {
  margin: 0;

  color: #7b848a;

  font-size: 12px;
}

@media (max-width: 1200px) {
  .recent-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .recent-grid {
    grid-template-columns: 1fr;
  }
}
.public-detail-top {
  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 20px;

  padding-bottom: 20px;

  margin-bottom: 5px;

  border-bottom: 1px solid #ece8df;
}

.public-brand {
  display: flex;
  align-items: center;

  gap: 12px;
}

.public-brand-icon {
  width: 45px;
  height: 45px;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #172733;

  color: #c99335;

  font-size: 20px;
}

.public-brand strong {
  display: block;

  font-size: 15px;
}

.public-brand span {
  display: block;

  margin-top: 2px;

  color: #8a9298;

  font-size: 11px;
}

.detail-code-badge {
  padding: 8px 13px;

  border-radius: 20px;

  background: #f4ede1;

  color: #a87529;

  font-size: 12px;
  font-weight: 700;
}

.detail-small-title {
  display: block;

  margin-bottom: 7px;

  color: #b17c29;

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 1.4px;
}

.detail-story {
  margin-top: 30px;

  padding: 22px;

  background: #faf8f4;

  border-left: 4px solid #c28b30;

  border-radius: 8px;
}

.detail-story-title {
  display: flex;
  align-items: center;

  gap: 10px;

  margin-bottom: 12px;
}

.detail-story-title i {
  color: #b7802c;
}

.detail-story-title h3 {
  margin: 0;

  font-size: 18px;
  font-weight: 700;
}

.detail-story p {
  margin: 0;

  color: #5f6970;

  line-height: 1.8;

  white-space: pre-line;
}

.public-footer {
  margin-top: 25px;

  padding-top: 20px;

  border-top: 1px solid #ece8df;

  text-align: center;

  color: #7e878e;

  font-size: 12px;
}

.public-footer i {
  margin-right: 6px;

  color: #b37c28;
}

@media (max-width: 600px) {
  .public-detail-top {
    align-items: flex-start;
  }

  .public-brand strong {
    font-size: 13px;
  }

  .detail-code-badge {
    font-size: 10px;
  }
}
.admin-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding-bottom: 20px;

  border-bottom: 1px solid #ececec;
}

.admin-detail-title {
  margin: 12px 0 0;

  font-size: 25px;
  font-weight: 700;
}

.admin-detail-actions {
  display: flex;
  gap: 8px;
}

.admin-action-button {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  padding: 10px 14px;

  border-radius: 6px;

  background: #172733;

  color: white;

  text-decoration: none;

  font-size: 12px;
}

.admin-action-button:hover {
  color: white;
  background: #243947;
}

.admin-action-button.public {
  background: #b47d29;
}

.admin-action-button.public:hover {
  background: #9b6b22;
}

.admin-section {
  margin-top: 10px;

  padding: 20px;

  border: 1px solid #e8e8e8;

  border-radius: 10px;

  background: #fff;
}

.admin-section h3 {
  display: flex;
  align-items: center;

  gap: 8px;

  margin: 0 0 17px;

  font-size: 17px;
  font-weight: 700;
}

.admin-section h3 i {
  color: #b77f29;
}

.admin-info-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 0 22px;
}

.admin-info-row {
  display: flex;
  justify-content: space-between;

  gap: 15px;

  padding: 10px 0;

  border-bottom: 1px solid #eeeeee;
}

.admin-info-label {
  color: #737d84;

  font-size: 12px;
}

.admin-info-value {
  text-align: right;

  color: #1e2c36;

  font-size: 13px;
  font-weight: 600;
}

.admin-text-box {
  min-height: 100px;

  padding: 15px;

  border-radius: 7px;

  background: #faf9f6;

  color: #5d676e;

  font-size: 13px;

  line-height: 1.8;

  white-space: pre-line;
}

.private-section {
  background: #fffdf8;

  border-color: #eadfc9;
}

.private-warning {
  padding: 10px 12px;

  margin-bottom: 15px;

  border-radius: 6px;

  background: #f7efe1;

  color: #936820;

  font-size: 11px;
}

.private-warning i {
  margin-right: 6px;
}

.admin-private-note {
  margin-top: 18px;
}

.admin-private-note strong {
  display: block;

  margin-bottom: 7px;

  font-size: 12px;
}

.admin-private-note p {
  margin: 0;

  padding: 12px;

  background: white;

  border: 1px solid #eee5d4;

  border-radius: 6px;

  color: #5d666d;

  font-size: 12px;

  white-space: pre-line;
}

.qr-admin-section {
  text-align: center;
}

.qr-admin-section > p {
  color: #7f888f;

  font-size: 12px;

  margin-bottom: 20px;
}

#adminQrCode {
  display: flex;
  justify-content: center;

  margin-bottom: 15px;
}

#adminQrCode img,
#adminQrCode canvas {
  padding: 10px;

  background: white;

  border: 1px solid #e5e5e5;
}

.admin-qr-name {
  display: flex;
  flex-direction: column;

  gap: 3px;

  margin-bottom: 15px;
}

.admin-qr-name strong {
  color: #ac7726;

  font-size: 13px;
}

.admin-qr-name span {
  font-size: 14px;
  font-weight: 600;
}

.admin-qr-buttons {
  display: flex;
  justify-content: center;
}

@media (max-width: 800px) {
  .admin-detail-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-detail-actions {
    width: 100%;

    flex-direction: column;
  }

  .admin-action-button {
    justify-content: center;
  }

  .admin-info-grid {
    grid-template-columns: 1fr;
  }
}
.etiket-select {
  height: 40px;

  border: 1px solid #d7dce0;
  border-radius: 6px;

  padding: 0 10px;

  background: white;

  font-size: 12px;

  outline: none;
}

.admin-qr-buttons {
  display: flex;

  justify-content: center;
  align-items: center;

  gap: 10px;

  flex-wrap: wrap;
}

/* Normal ekranda görünmesin */

.etiket-yazdir-alani {
  display: none;
}

/* =========================
   QR ETİKET TASARIMI
   Yazdırılacak fiziksel QR etiketinin görünümü.
========================= */

.qr-sticker {
  background: white;

  color: black;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 2mm;

  overflow: hidden;

  padding: 2mm;

  box-sizing: border-box;

  font-family: Arial, Helvetica, sans-serif;
}

.qr-sticker-code {
  display: flex;

  align-items: center;
  justify-content: center;
}

.qr-sticker-code img,
.qr-sticker-code canvas {
  width: 22mm !important;
  height: 22mm !important;

  display: block;
}

.qr-sticker-info {
  flex: 1;

  display: flex;
  flex-direction: column;

  justify-content: center;

  min-width: 0;
}

.qr-sticker-info strong {
  font-size: 8pt;

  line-height: 1.1;

  margin-bottom: 1mm;
}

.qr-sticker-info span {
  font-size: 6pt;

  line-height: 1.1;

  overflow: hidden;
}

/* =========================
   YAZDIRMA AYARLARI
   Baskı sırasında yalnızca QR etiketini görünür yapar.
========================= */

@media print {
  @page {
    margin: 0;
  }

  body * {
    visibility: hidden !important;
  }

  #etiketYazdirAlani,
  #etiketYazdirAlani * {
    visibility: visible !important;
  }

  #etiketYazdirAlani {
    display: block !important;

    position: absolute;

    left: 0;
    top: 0;

    margin: 0;
    padding: 0;
  }

  .qr-sticker {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}
.login-page {
  min-height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  background: linear-gradient(135deg, #0f1d27, #172d3a);

  padding: 20px;
}

.login-card {
  width: 100%;
  max-width: 420px;

  background: white;

  border-radius: 14px;

  padding: 35px;

  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.25);
}

.login-card h1 {
  text-align: center;

  font-size: 23px;
  font-weight: 700;

  margin-bottom: 5px;
}

.login-card > p {
  text-align: center;

  color: #7c858b;

  margin-bottom: 28px;
}

.password-box {
  position: relative;
}

.password-box input {
  padding-right: 45px;
}

.password-box button {
  position: absolute;

  right: 8px;
  top: 50%;

  transform: translateY(-50%);

  border: none;

  background: transparent;

  color: #69737a;
}

.login-button {
  width: 100%;

  margin-top: 10px;

  padding: 12px;

  border: none;
  border-radius: 7px;

  background: linear-gradient(135deg, #c99335, #a87124);

  color: white;

  font-weight: 600;
}

.login-error {
  min-height: 25px;

  margin-top: 5px;

  color: #dc3545;

  font-size: 12px;
}
body.admin-page {
  visibility: hidden;
}

body.admin-page.admin-ready {
  visibility: visible;
}
/* SIDEBAR YENİ LOGO */
/* =====================================================
   KOLEKSİYON KART GÖRÜNÜMÜ
===================================================== */

.collection-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 20px;
}

.collection-item-card {
  overflow: hidden;

  background: white;

  border: 1px solid #e6e1d8;

  border-radius: 12px;

  transition: 0.2s;

  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
}

.collection-item-card:hover {
  transform: translateY(-4px);

  border-color: #c68a2e;

  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.09);
}

/* =========================
   FOTOĞRAF YÜKLEME / ÖNİZLEME
   Tesbih fotoğrafı seçme ve önizleme alanları.
========================= */

.collection-card-image {
  position: relative;

  width: 100%;
  height: 240px;

  overflow: hidden;

  background: #ebe9e4;
}

.collection-card-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition: transform 0.3s ease;
}

.collection-item-card:hover .collection-card-image img {
  transform: scale(1.03);
}

.collection-card-placeholder {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #bd8128;

  font-size: 50px;
}

/* KOLEKSİYON NO */

.collection-card-code {
  position: absolute;

  left: 12px;
  bottom: 12px;

  padding: 6px 9px;

  border-radius: 5px;

  background: rgba(15, 29, 39, 0.88);

  color: white;

  font-size: 10px;
  font-weight: 700;

  backdrop-filter: blur(4px);
}

/* İÇERİK */

.collection-card-body {
  padding: 16px;
}

.collection-card-body h3 {
  margin: 0 0 5px;

  font-size: 16px;
  font-weight: 700;

  color: #172632;
}

.collection-card-material {
  margin: 0 0 13px;

  color: #b27723;

  font-size: 12px;
  font-weight: 600;
}

/* DETAYLAR */

.collection-card-details {
  min-height: 55px;

  display: flex;
  flex-wrap: wrap;

  gap: 7px 12px;

  margin-bottom: 15px;
}

.collection-card-details span {
  display: inline-flex;
  align-items: center;

  gap: 5px;

  color: #737d84;

  font-size: 11px;
}

.collection-card-details i {
  color: #bd8128;
}

/* =========================
   FORM BUTONLARI
   Kaydet, temizle ve işlem butonları.
========================= */

.collection-card-actions {
  display: grid;

  grid-template-columns: 1fr 1fr 38px;

  gap: 7px;

  padding-top: 12px;

  border-top: 1px solid #eeeeee;
}

.card-action {
  min-height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  border: 1px solid #dce0e3;
  border-radius: 6px;

  background: white;

  color: #26343e;

  font-size: 11px;

  cursor: pointer;

  transition: 0.2s;
}

.card-action:hover {
  background: #f5f5f5;
}

.card-action.view {
  background: #142733;
  border-color: #142733;

  color: white;
}

.card-action.view:hover {
  background: #203a49;
}

.card-action.edit {
  color: #9c6a20;
}

.card-action.delete {
  color: #dc3545;

  border-color: #efc8cb;
}

/* =========================
   TABLET UYUMLULUĞU
========================= */

@media (max-width: 1300px) {
  .collection-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1050px) {
  .collection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================
   TELEFON UYUMLULUĞU
========================= */

@media (max-width: 600px) {
  .collection-grid {
    grid-template-columns: 1fr;
  }

  .collection-card-image {
    height: 300px;
  }
}
/* =========================
   QR DETAY SAYFASI LOGOSU
========================= */

/* =========================
   QR DETAY ÜST BAŞLIK
   Logo solda, koleksiyon numarası sağda.
========================= */

.public-detail-top {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding-bottom: 18px;
  margin-bottom: 18px;

  border-bottom: 1px solid #ece8df;
}

/* QR sayfasındaki marka logosu */

/* =========================
   QR DETAY ÜST BAŞLIK
   Logo solda, koleksiyon numarası sağda.
========================= */

.public-detail-top {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding-bottom: 18px;
  margin-bottom: 18px;

  border-bottom: 1px solid #ece8df;
}

/* QR sayfasındaki marka logosu */

.public-brand {
  display: flex;
  align-items: center;

  min-width: 0;
}

.public-brand-logo {
  width: 180px;
  height: 70px;

  max-width: 100%;

  display: block;

  object-fit: contain;
  object-position: left center;
}

/* Sağdaki koleksiyon numarası */

.detail-code-badge {
  flex-shrink: 0;

  width: auto;

  padding: 8px 14px;

  border-radius: 20px;

  background: #f4ede1;

  color: #a87529;

  font-size: 12px;
  font-weight: 700;

  white-space: nowrap;
}
@media (max-width: 600px) {
  .public-detail-top {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    gap: 10px;
  }

  .public-brand-logo {
    width: 135px;
    height: 55px;
  }

  .detail-code-badge {
    width: auto;

    padding: 7px 10px;

    font-size: 10px;
  }
}