/**
 * korbt.kimlik - CR80 ISO/IEC 7810 Student ID Card Styles (V9)
 * Dimensions: 85.60mm x 53.98mm (Corner Radius: 3.18mm)
 * - Okul adı sığmadığında alt satıra geçer
 * - Ön yüz bilgileri tek tip ve küçük puntolu
 * - Sembolsüz ve ortalı Öğrenci Kimlik Kartı başlığı, altında öğretim yılı
 * - Arka yüz bilgileri tamamen tek tip
 * - Adres ve telefon bir tık daha büyük
 * - Özel arkaplan görseli (customBackground) & Şeffaf Ay-Yıldız desteği
 */

:root {
  --cr80-w: 85.6mm;
  --cr80-h: 53.98mm;
  --cr80-r: 3.2mm;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
}

/* Base Card Container */
.cr80-card {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: var(--cr80-r);
  box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.18), 0 8px 12px -4px rgba(0, 0, 0, 0.1);
  font-family: var(--font-sans);
  background-color: #ffffff;
  color: #1e293b;
  user-select: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.cr80-card.horizontal {
  width: var(--cr80-w);
  height: var(--cr80-h);
  max-height: var(--cr80-h);
  display: flex;
  flex-direction: column;
}

.cr80-card.vertical {
  width: var(--cr80-h);
  height: var(--cr80-w);
  max-height: var(--cr80-w);
  display: flex;
  flex-direction: column;
}

/* ------------------------------------------------------------- */
/* Arkaplan Sanatı: Özel Görsel veya Şeffaf Ay-Yıldız Filigranı   */
/* ------------------------------------------------------------- */
.card-background-art {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* Kullanıcının Yüklediği Özel Arkaplan Görseli (Düşük Alpha / Saydam) */
.card-custom-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
  opacity: var(--custom-bg-opacity, 0.02);
}

/* Varsayılan Arkaplan: Resmî MEB Logosu */
.watermark-ay-yildiz {
  position: absolute;
  left: 50%;
  top: 33.5mm; /* Dikey eksende fotoğraf ve gövde hizasında */
  transform: translate(-50%, -50%);
  width: 42mm;
  height: 42mm;
  opacity: 0.08;
  background-image: url('../assets/meb_logo_official.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
}

.card-back .watermark-ay-yildiz {
  top: 29.5mm;
  width: 42mm;
  height: 42mm;
}

/* Texture Talebi Üzerine Kaldırıldı */
.card-security-pattern {
  display: none;
}

.card-edge-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8 0%, #ec4899 25%, #eab308 50%, #22c55e 75%, #38bdf8 100%);
  opacity: 0.85;
}

/* ============================================================= */
/* 5 KURUMSAL KART TEMASI                                        */
/* ============================================================= */

/* 1. Kırmızı (Resmî Kırmızı) */
.theme-kirmizi .card-header,
.theme-meb-classic .card-header {
  background: linear-gradient(135deg, #991b1b 0%, #dc2626 55%, #7f1d1d 100%);
  color: #ffffff;
  border-bottom: 1.8px solid #fbbf24;
}
.theme-kirmizi .watermark-ay-yildiz,
.theme-meb-classic .watermark-ay-yildiz { color: #991b1b; }
.theme-kirmizi .card-sub-banner,
.theme-meb-classic .card-sub-banner {
  background: linear-gradient(90deg, #fff1f2 0%, #ffe4e6 100%);
  color: #991b1b;
  border-bottom: 1px solid #fecdd3;
}
.theme-kirmizi .photo-frame,
.theme-meb-classic .photo-frame {
  border: 1.8px solid #dc2626;
}
.theme-kirmizi .back-header,
.theme-meb-classic .back-header {
  background: linear-gradient(135deg, #991b1b 0%, #7f1d1d 100%);
  color: #ffffff;
  border-bottom: 1.8px solid #fbbf24;
}

/* 2. Bordo (Derin Vişne / Kurumsal Bordo) */
.theme-bordo .card-header {
  background: linear-gradient(135deg, #58061c 0%, #881337 55%, #4c0519 100%);
  color: #ffffff;
  border-bottom: 1.8px solid #fbbf24;
}
.theme-bordo .watermark-ay-yildiz { color: #881337; }
.theme-bordo .card-sub-banner {
  background: linear-gradient(90deg, #fff1f2 0%, #fce7f3 100%);
  color: #700c25;
  border-bottom: 1px solid #fbcfe8;
}
.theme-bordo .photo-frame {
  border: 1.8px solid #881337;
}
.theme-bordo .back-header {
  background: linear-gradient(135deg, #58061c 0%, #4c0519 100%);
  color: #ffffff;
  border-bottom: 1.8px solid #fbbf24;
}

/* 3. Lacivert (Prestij Koyu Lacivert) */
.theme-lacivert .card-header {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 55%, #172554 100%);
  color: #ffffff;
  border-bottom: 1.8px solid #93c5fd;
}
.theme-lacivert .watermark-ay-yildiz { color: #1e3a8a; }
.theme-lacivert .card-sub-banner {
  background: linear-gradient(90deg, #eff6ff 0%, #dbeafe 100%);
  color: #1e3a8a;
  border-bottom: 1px solid #bfdbfe;
}
.theme-lacivert .photo-frame {
  border: 1.8px solid #1e3a8a;
}
.theme-lacivert .back-header {
  background: linear-gradient(135deg, #0f172a 0%, #172554 100%);
  color: #ffffff;
  border-bottom: 1.8px solid #93c5fd;
}

/* 4. Mavi (Gök / Kraliyet Mavisi) */
.theme-mavi .card-header,
.theme-anadolu-lacivert .card-header {
  background: linear-gradient(135deg, #0369a1 0%, #0284c7 55%, #075985 100%);
  color: #ffffff;
  border-bottom: 1.8px solid #38bdf8;
}
.theme-mavi .watermark-ay-yildiz,
.theme-anadolu-lacivert .watermark-ay-yildiz { color: #0284c7; }
.theme-mavi .card-sub-banner,
.theme-anadolu-lacivert .card-sub-banner {
  background: linear-gradient(90deg, #f0f9ff 0%, #e0f2fe 100%);
  color: #0369a1;
  border-bottom: 1px solid #bae6fd;
}
.theme-mavi .photo-frame,
.theme-anadolu-lacivert .photo-frame {
  border: 1.8px solid #0284c7;
}
.theme-mavi .back-header,
.theme-anadolu-lacivert .back-header {
  background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
  color: #ffffff;
  border-bottom: 1.8px solid #38bdf8;
}

/* 5. Turkuaz (Türk Petrol / Turkuaz) */
.theme-turkuaz .card-header {
  background: linear-gradient(135deg, #115e59 0%, #0f766e 55%, #134e4a 100%);
  color: #ffffff;
  border-bottom: 1.8px solid #2dd4bf;
}
.theme-turkuaz .watermark-ay-yildiz { color: #0f766e; }
.theme-turkuaz .card-sub-banner {
  background: linear-gradient(90deg, #f0fdfa 0%, #ccfbf1 100%);
  color: #0f766e;
  border-bottom: 1px solid #99f6e4;
}
.theme-turkuaz .photo-frame {
  border: 1.8px solid #0f766e;
}
.theme-turkuaz .back-header {
  background: linear-gradient(135deg, #115e59 0%, #134e4a 100%);
  color: #ffffff;
  border-bottom: 1.8px solid #2dd4bf;
}

/* 6. Yeşil (Zümrüt Yeşili) */
.theme-yesil .card-header,
.theme-imam-hatip .card-header {
  background: linear-gradient(135deg, #14532d 0%, #15803d 55%, #052e16 100%);
  color: #ffffff;
  border-bottom: 1.8px solid #4ade80;
}
.theme-yesil .watermark-ay-yildiz,
.theme-imam-hatip .watermark-ay-yildiz { color: #15803d; }
.theme-yesil .card-sub-banner,
.theme-imam-hatip .card-sub-banner {
  background: linear-gradient(90deg, #f0fdf4 0%, #dcfce7 100%);
  color: #15803d;
  border-bottom: 1px solid #bbf7d0;
}
.theme-yesil .photo-frame,
.theme-imam-hatip .photo-frame {
  border: 1.8px solid #15803d;
}
.theme-yesil .back-header,
.theme-imam-hatip .back-header {
  background: linear-gradient(135deg, #14532d 0%, #052e16 100%);
  color: #ffffff;
  border-bottom: 1.8px solid #4ade80;
}

/* 7. Turuncu (Sıcak Amber / Bakır) */
.theme-turuncu .card-header {
  background: linear-gradient(135deg, #9a3412 0%, #c2410c 55%, #7c2d12 100%);
  color: #ffffff;
  border-bottom: 1.8px solid #fb923c;
}
.theme-turuncu .watermark-ay-yildiz { color: #c2410c; }
.theme-turuncu .card-sub-banner {
  background: linear-gradient(90deg, #fff7ed 0%, #ffedd5 100%);
  color: #c2410c;
  border-bottom: 1px solid #fed7aa;
}
.theme-turuncu .photo-frame {
  border: 1.8px solid #c2410c;
}
.theme-turuncu .back-header {
  background: linear-gradient(135deg, #9a3412 0%, #7c2d12 100%);
  color: #ffffff;
  border-bottom: 1.8px solid #fb923c;
}

/* 8. Mor (Akademik Asil Mor) */
.theme-mor .card-header {
  background: linear-gradient(135deg, #581c87 0%, #7e22ce 55%, #3b0764 100%);
  color: #ffffff;
  border-bottom: 1.8px solid #c084fc;
}
.theme-mor .watermark-ay-yildiz { color: #7e22ce; }
.theme-mor .card-sub-banner {
  background: linear-gradient(90deg, #faf5ff 0%, #f3e8ff 100%);
  color: #6b21a8;
  border-bottom: 1px solid #e9d5ff;
}
.theme-mor .photo-frame {
  border: 1.8px solid #7e22ce;
}
.theme-mor .back-header {
  background: linear-gradient(135deg, #581c87 0%, #3b0764 100%);
  color: #ffffff;
  border-bottom: 1.8px solid #c084fc;
}

/* 9. Siyah (Antrasit / Mat Siyah & Altın Vurgu) */
.theme-siyah .card-header,
.theme-akilli-siyah .card-header {
  background: linear-gradient(135deg, #09090b 0%, #18181b 55%, #27272a 100%);
  color: #ffffff;
  border-bottom: 1.8px solid #eab308;
}
.theme-siyah .watermark-ay-yildiz,
.theme-akilli-siyah .watermark-ay-yildiz { color: #ca8a04; }
.theme-siyah .card-sub-banner,
.theme-akilli-siyah .card-sub-banner {
  background: linear-gradient(90deg, #f4f4f5 0%, #e4e4e7 100%);
  color: #18181b;
  border-bottom: 1px solid #d4d4d8;
}
.theme-siyah .photo-frame,
.theme-akilli-siyah .photo-frame {
  border: 1.8px solid #18181b;
}
.theme-siyah .back-header,
.theme-akilli-siyah .back-header {
  background: linear-gradient(135deg, #09090b 0%, #18181b 100%);
  color: #ffffff;
  border-bottom: 1.8px solid #eab308;
}

/* 10. Beyaz (Minimalist Beyaz & Grafit) */
.theme-beyaz .card-header,
.theme-academic-minimal .card-header {
  background: #ffffff;
  color: #0f172a;
  border-bottom: 2px solid #0f172a;
}
.theme-beyaz .watermark-ay-yildiz,
.theme-academic-minimal .watermark-ay-yildiz { color: #0f172a; }
.theme-beyaz .ministry-title,
.theme-academic-minimal .ministry-title { color: #475569; }
.theme-beyaz .school-title,
.theme-academic-minimal .school-title { color: #0f172a; }
.theme-beyaz .card-sub-banner,
.theme-academic-minimal .card-sub-banner {
  background: #f8fafc;
  color: #334155;
  border-bottom: 1px solid #e2e8f0;
}
.theme-beyaz .photo-frame,
.theme-academic-minimal .photo-frame {
  border: 1.8px solid #334155;
}
.theme-beyaz .back-header,
.theme-academic-minimal .back-header {
  background: #ffffff;
  color: #0f172a;
  border-bottom: 2px solid #0f172a;
}
.theme-beyaz .back-country,
.theme-academic-minimal .back-country { color: #475569; }
.theme-beyaz .back-school-name,
.theme-academic-minimal .back-school-name { color: #0f172a; }

/* ============================================================= */
/* CARD HEADER (BÜYÜK ALAN & ALT SATIRA GEÇEN OKUL ADI)          */
/* ============================================================= */
.card-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.8mm;
  padding: 1mm 2.2mm;
  height: 10.8mm;
  box-sizing: border-box;
}

/* Sol Logo Container (Okul Logosu) */
.header-logo-left {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 9mm;
  height: 9mm;
  background: #ffffff;
  border-radius: 50%;
  padding: 0.4mm;
  box-sizing: border-box;
}

.school-logo-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* Orta Başlık Alanı */
.header-titles {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  line-height: 1.15;
  padding: 0 0.5mm;
}

.ministry-title {
  font-size: 4.8pt;
  font-weight: 800;
  letter-spacing: 0.35pt;
  opacity: 0.96;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  margin-bottom: 0.2mm;
}

/* Okul Adı: Sığmadığında Alt Satıra Geçer */
.school-title {
  font-size: 5.2pt;
  font-weight: 800;
  letter-spacing: -0.05pt;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  line-height: 1.14;
  text-align: center;
  max-height: 6mm;
  overflow: hidden;
}

/* Sağ Logo Container (MEB Logosu) */
.header-logo-right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 9mm;
  height: 9mm;
  background: #ffffff;
  border-radius: 50%;
  padding: 0.3mm;
  box-sizing: border-box;
}

.meb-official-logo-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* ============================================================= */
/* SUB-BANNER RIBBON (SEMBOLSÜZ, ORTALI, ÖĞRETİM YILI ALTINDA)    */
/* ============================================================= */
.card-sub-banner.centered-banner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.3mm 2mm;
  height: 4.8mm;
  box-sizing: border-box;
  text-align: center;
  gap: 0.1mm;
}

.banner-title-centered {
  font-size: 5.6pt;
  font-weight: 900;
  letter-spacing: 0.6pt;
  line-height: 1.1;
  text-transform: uppercase;
}

.banner-year-centered {
  font-size: 4.4pt;
  font-weight: 700;
  letter-spacing: 0.3pt;
  opacity: 0.88;
  line-height: 1;
}

/* ============================================================= */
/* CARD BODY (FRONT)                                             */
/* ============================================================= */
.card-front .card-body {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2.2mm;
  padding: 0.8mm 2.2mm 0.5mm;
  box-sizing: border-box;
}

/* Photo Container */
.photo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.photo-frame {
  width: 21mm;
  height: 25.5mm;
  border-radius: 1.8mm;
  overflow: hidden;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-blank {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}

.student-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Student Details: TEK TİP VE KÜÇÜK PUNTOLU */
.student-details.front-clean-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.front-fields-uniform {
  display: flex;
  flex-direction: column;
  gap: 1.1mm;
}

.front-fields-uniform .field-row {
  display: flex;
  align-items: baseline;
  gap: 1.2mm;
}

.front-fields-uniform .f-label {
  font-size: 6.2pt;
  font-weight: 700;
  color: #475569;
  width: 17mm;
  flex-shrink: 0;
}

.front-fields-uniform .f-val {
  min-width: 0;
  font-size: 6.5pt;
  font-weight: 800;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* BÜYÜTÜLMÜŞ KAREKOD ALANI (14mm x 14mm) */
.qr-prominent-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
  gap: 0.3mm;
}

.qr-svg-wrapper {
  background: #ffffff;
  padding: 0.5mm;
  border-radius: 1mm;
  border: 0.8px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-svg-wrapper svg {
  width: 14mm;
  height: 14mm;
  max-width: 14mm;
  max-height: 14mm;
  display: block;
}

.qr-sub-label {
  font-size: 3.3pt;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 0.2pt;
  text-align: center;
  white-space: nowrap;
}

/* Footer Barcode */
.card-front .card-footer {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 6.2mm;
  padding: 0 2.2mm 0.5mm;
  margin-top: auto;
  box-sizing: border-box;
}

.footer-barcode {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.footer-barcode svg {
  max-width: 56mm;
  height: 5mm;
  display: block;
}

/* ============================================================= */
/* CARD BACK STYLING                                             */
/* ============================================================= */
.card-back {
  background-color: #ffffff;
}

.magnetic-strip-mock {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6mm;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  opacity: 0.07;
}

.back-header {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1mm 2.2mm;
  height: 8.5mm;
  box-sizing: border-box;
}

.back-header-left {
  display: flex;
  align-items: center;
  gap: 1.5mm;
  min-width: 0;
  flex: 1;
}

.back-logo-left-circle {
  width: 7mm;
  height: 7mm;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4mm;
  box-sizing: border-box;
  flex-shrink: 0;
}

.back-school-logo-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.back-title-group {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}

.back-country {
  font-size: 4.8pt;
  font-weight: 700;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.back-school-name {
  font-size: 5.2pt;
  font-weight: 800;
  letter-spacing: -0.1pt;
  white-space: normal;
  word-break: break-word;
  line-height: 1.12;
  max-height: 4.8mm;
  overflow: hidden;
}

.back-header-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.back-logo-right-circle {
  width: 7mm;
  height: 7mm;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.3mm;
  box-sizing: border-box;
  flex-shrink: 0;
}

.back-meb-logo-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* Back Body: TAMAMEN TEK TİP BİLGİLER */
.card-back .back-body {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6mm 2.2mm 0.5mm;
  gap: 1.5mm;
  box-sizing: border-box;
}

.back-info-table {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6mm;
  min-width: 0;
}

.b-row {
  display: flex;
  align-items: baseline;
  font-size: 5.5pt;
  line-height: 1.15;
}

.b-label {
  width: 16.5mm;
  flex-shrink: 0;
  color: #475569;
  font-weight: 700;
  font-size: 5.4pt;
}

.b-val {
  font-weight: 800;
  font-size: 5.6pt;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Auth Section (Custom Stamp & Signature Image - Mühür, İmza & İsim Tek Görseli) */
.auth-section {
  width: 28mm;
  height: 16mm;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}

.auth-stamp-signature-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Back Footer: BİR TIK DAHA BÜYÜK İLETİŞİM VE UYARI */
.back-footer {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.4mm;
  padding: 0.5mm 2.2mm 0.8mm;
  margin-top: auto;
  border-top: 0.5px solid #f1f5f9;
  box-sizing: border-box;
}

.school-contact-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 5.2pt;
  color: #1e293b;
  font-weight: 700;
}

.school-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 0.8mm;
}

.contact-icon {
  width: 2.4mm;
  height: 2.4mm;
  flex-shrink: 0;
  color: #0f172a;
}

.legal-notice {
  font-size: 4.5pt;
  color: #475569;
  line-height: 1.25;
  text-align: justify;
}

.back-barcode-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.back-barcode-container svg {
  max-width: 48mm;
  height: 4.2mm;
}

/* ============================================================= */
/* VERTICAL CARD LAYOUT                                          */
/* ============================================================= */
.cr80-card.vertical .card-header {
  padding: 1.8mm 2mm;
  height: 11mm;
}
.cr80-card.vertical .card-front .card-body {
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1mm 2mm;
  gap: 1.5mm;
}
.cr80-card.vertical .photo-frame {
  width: 23mm;
  height: 29mm;
}
.cr80-card.vertical .student-details {
  align-items: center;
  width: 100%;
}
.cr80-card.vertical .front-fields-uniform {
  width: 100%;
}
.cr80-card.vertical .field-row {
  justify-content: space-between;
}
.cr80-card.vertical .f-label {
  width: auto;
}
.cr80-card.vertical .card-front .card-footer {
  flex-direction: column;
  gap: 1mm;
  height: 14mm;
  padding: 1mm 2mm 1.8mm;
}
.cr80-card.vertical .footer-barcode svg {
  max-width: 44mm;
  height: 5.5mm;
}

.cr80-card.vertical.card-back .back-body {
  flex-direction: column;
  padding: 1.5mm 2.5mm;
  gap: 1.2mm;
}

.cr80-card.vertical.card-back .auth-section {
  width: 100%;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 1mm;
}

.cr80-card.vertical .watermark-ay-yildiz {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 38mm;
  height: 38mm;
  background-size: contain;
  background-position: center;
}