/* ============================================
   CRITICAL CSS - Load First to Prevent FOUC
   SVG Icon Visibility Protection
   ============================================ */

/* Form geni?li?i - t?m mod?ller desktop 1400px */
/* Ba?lang??ta main element'e varsay?lan geni?lik ver (FOUC ?nleme) */
/* Tailwind max-w-3xl (768px) override ediliyor */
#awp-printwise-root main,
#awp-printwise-root main.max-w-3xl,
#awp-printwise-root main.module-ders-notu-active,
#awp-printwise-root main.module-rulo-baski-active,
#awp-printwise-root main.module-dijital-baski-active,
#awp-printwise-root main.module-katalog-active {
  max-width: 1500px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 16px !important;
}

#awp-printwise-root main.module-katalog-active {
  margin-top: 0 !important;
}

/* PWA Splash Screen (inline style azaltma) */
#pwa-splash-screen {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  overflow: hidden;
  transition: transform 0.5s ease-out;
  will-change: transform;
  backface-visibility: hidden;
}

#pwa-splash-screen.awp-splash-slide-down {
  transform: translateY(100%);
}

#pwa-splash-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

#pwa-splash-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  /* Logo uzaktan yakla?ma: ba?ta k???k ve ?effaf, .awp-splash-logo-in ile b?y?y?p g?r?n?r */
  transform: scale(0.2);
  opacity: 0;
  transition: transform 0.9s ease-out, opacity 0.6s ease-out;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

#pwa-splash-container.awp-splash-logo-in {
  transform: scale(1);
  opacity: 1;
}

#pwa-splash-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: auto;
}

/* ==========================================================================
   AWP Product Gallery Component - Birle?ik g?rsel bile?eni
   T?m mod?llerde ortak: Ders Notu, Rulo, Dijital Bask?, Kartvizit, Bro??r
   Mobile-first, Tailwind breakpoints: sm 640px, md 768px, lg 1024px
   Ana g?rsel + thumbnail tek wrapper; formlar her zaman alt?nda, ta?ma/?st ?ste binme yok
   ========================================================================== */

/* Product image clickable - modal i?in */
.awp-product-image-fixed,
#dn-product-image-wrap,
#rulo-product-image-wrap,
#yeni_urun-product-image-wrap,
#lbt_urun-product-image-wrap,
#dijital-product-image-wrap,
#katalog-product-image-wrap {
  cursor: pointer;
}

/* --- Component wrapper: varsay?lan (galeri kurulunca a?a??daki kart kurallar? ge?er) --- */
.awp-product-image-fixed {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  margin-left: 0;
  margin-right: 0;
  overflow: visible;
  box-sizing: border-box;
}

/* Galeri yokken (ham img / placeholder): kare kutu */
.awp-product-image-fixed:not(.awp-has-product-gallery):not(:has(.awp-product-gallery)) {
  min-height: 430px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* --- Galeri kart?: ?zel form (.awp-fe-product-visual-card) ile ayn? token?lar --- */
.awp-product-image-fixed:has(.awp-product-gallery),
.awp-product-image-fixed.awp-has-product-gallery,
.awp-product-gallery-component {
  width: 100%;
  max-width: 350px;
  min-width: 0;
  height: auto;
  min-height: min-content;
  aspect-ratio: auto;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
  background: #fff;
  border-radius: 6px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
  border: 1px solid #e5e7eb;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

#dn-product-image-wrap,
#rulo-product-image-wrap,
#yeni_urun-product-image-wrap,
#lbt_urun-product-image-wrap,
#dijital-product-image-wrap,
#katalog-product-image-wrap {
  overflow: visible;
  position: relative;
  z-index: 1;
  min-height: min-content;
}

/* Tek g?rsel: thumb yok; zoom ana kutuda (?zel form ile ayn? y?kseklik hissi) */
.awp-single-image-gallery,
.awp-product-image-fixed.awp-single-image-gallery {
  min-height: min-content;
}
.awp-single-image-gallery .awp-product-gallery,
.awp-product-image-fixed.awp-single-image-gallery .awp-product-gallery {
  gap: 0;
}
#dn-product-image-wrap.awp-single-image-gallery,
#rulo-product-image-wrap.awp-single-image-gallery,
#yeni_urun-product-image-wrap.awp-single-image-gallery,
#lbt_urun-product-image-wrap.awp-single-image-gallery,
#dijital-product-image-wrap.awp-single-image-gallery,
#katalog-product-image-wrap.awp-single-image-gallery {
  min-height: min-content;
}

/* Sol s?tunlar: g?rsel bile?eni kesmesin */
#awp-printwise-root .module-ders-notu-left-col,
#awp-printwise-root .module-rulo-baski-left-col,
#awp-printwise-root .module-dijital-baski-left-col,
#awp-printwise-root .module-katalog-left-col {
  overflow: visible;
}

/* --- ?? galeri: ?zel form .awp-fe-product-visual-main + .awp-fe-simple-thumbs aral??? --- */
.awp-product-gallery {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  overflow: visible;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

/* Ana g?rsel alan? ? form-engine .awp-fe-product-visual-main ile e?it */
.awp-product-gallery-main {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.18), transparent 28%),
    linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -28px 46px rgba(15, 23, 42, 0.12);
}

.awp-product-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin-top: 0px;
  transition:
    opacity 0.35s ease-in-out,
    transform 0.35s ease,
    filter 0.35s ease;
}

.awp-product-gallery:hover .awp-product-gallery-main img {
  transform: scale(1.012);
  filter: saturate(1.04) contrast(1.02);
}

.awp-product-gallery-main img.awp-gallery-img-changing {
  opacity: 0.4;
}

/* Zoom: ana g?rsel sa? alt ? premium banking glass */
.awp-product-gallery-zoom-btn {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(23, 49, 79, 0.92) 0%, rgba(12, 31, 55, 0.92) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  color: #ffffff;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.015em;
  text-transform: none;
  line-height: 1.2;
  cursor: pointer;
  box-shadow:
    0 12px 28px rgba(2, 6, 23, 0.28),
    0 2px 8px rgba(37, 99, 235, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition:
    background 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.15s;
}
.awp-product-gallery-zoom-btn::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(147, 197, 253, 0.95), rgba(255, 255, 255, 0.18), rgba(59, 130, 246, 0.55));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.awp-product-gallery-zoom-btn:hover {
  background:
    linear-gradient(180deg, rgba(31, 70, 110, 0.96) 0%, rgba(17, 44, 74, 0.96) 100%);
  color: #ffffff;
  border-color: rgba(191, 219, 254, 0.42);
  box-shadow:
    0 16px 34px rgba(2, 6, 23, 0.34),
    0 4px 16px rgba(37, 99, 235, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
  transform: translateY(-2px);
}
.awp-product-gallery-zoom-btn:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}
.awp-product-gallery-zoom-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #dbeafe;
}
.awp-product-gallery-zoom-text {
  white-space: nowrap;
}

/* Thumbnail ?eridi ? kompakt; mobilde tam s??ar */
.awp-product-gallery-thumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  min-height: 48px;
  flex-shrink: 0;
  overflow: visible;
  padding: 4px 6px;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.92), rgba(241, 245, 249, 0.72));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 6px 14px rgba(15, 23, 42, 0.05);
}

.awp-product-gallery-thumbs-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: #1e293b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 4px 12px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition:
    background 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.15s;
}
.awp-product-gallery-thumbs-btn:hover {
  background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
  border-color: #93c5fd;
  box-shadow:
    0 6px 14px rgba(37, 99, 235, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transform: translateY(-1px);
}
.awp-product-gallery-thumbs-btn svg {
  width: 14px;
  height: 14px;
}

.awp-product-gallery-thumbs-track {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  display: flex;
  justify-content: center;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 1px;
  min-height: 48px;
}
.awp-product-gallery-thumbs-track::-webkit-scrollbar {
  display: none;
}

.awp-product-gallery-thumb {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 5px;
  overflow: hidden;
  border: 2px solid transparent;
  background: #f8fafc;
  cursor: pointer;
  box-shadow:
    inset 0 0 0 1px rgba(15, 23, 42, 0.06),
    0 3px 10px rgba(15, 23, 42, 0.07);
  transition:
    transform 0.18s,
    border-color 0.2s,
    box-shadow 0.2s;
  padding: 0;
  display: block;
}
.awp-product-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.awp-product-gallery-thumb:hover {
  border-color: #bfdbfe;
  transform: translateY(-1px) scale(1.02);
  box-shadow:
    0 6px 14px rgba(37, 99, 235, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}
.awp-product-gallery-thumb.active {
  border-color: #2563eb;
  box-shadow:
    0 0 0 2px rgba(59, 130, 246, 0.18),
    0 6px 16px rgba(37, 99, 235, 0.2);
}

/* sm+: biraz daha rahat thumb */
@media (min-width: 640px) {
  .awp-product-gallery-thumbs,
  .awp-product-gallery-thumbs-track {
    min-height: 56px;
    gap: 8px;
  }
  .awp-product-gallery-thumbs {
    padding: 5px 8px;
  }
  .awp-product-gallery-thumbs-btn {
    width: 30px;
    height: 30px;
  }
  .awp-product-gallery-thumb {
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
  }
}

/* --- lg: 1024px ? galeri yokken kare kutu; galeri kart?nda ana g?rsel kart padding?i ile ayn? bo?lukta (tam geni?lik) --- */
@media (min-width: 1024px) {
  .awp-product-image-fixed:not(.awp-has-product-gallery):not(
      :has(.awp-product-gallery)
    ) {
    width: 425px;
    max-width: 425px;
    min-height: 425px;
  }
}

/* Form grid - dil de?i?iminde label/desc 2-3 sat?r olsa da input'lar ayn? hizada */
.awp-form-grid-aligned {
  align-items: end !important;
}

/* Inter Font - Primary Font (Coolors.co style, supports Cyrillic) */
/* Font paths are set via inline CSS in PHP for proper WordPress URL handling */

/* Spinner animation for loading states */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Katalog result cards - remove gradients, use solid soft colors */
#katalog_format_result,
#katalog_sigma_result,
#katalog_sheets_result,
#katalog_prints_result {
  line-height: 1.3 !important;
  word-break: break-word !important;
  white-space: normal !important;
}

/* Format result card */
#katalog_format_result {
  display: block !important;
}

/* Sigma, Sheets, Prints result cards - 2 line format */
#katalog_sigma_result,
#katalog_sheets_result,
#katalog_prints_result {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: auto !important;
}

/* Katalog result card backgrounds - solid soft colors (remove gradients) */
#katalog_results .grid > div:first-child,
#katalog_results .grid > div.bg-blue-50 {
  background: #eff6ff !important;
  background-image: none !important;
  background-color: #eff6ff !important;
  border-color: #dbeafe !important;
}

#katalog_results .grid > div:nth-child(2),
#katalog_results .grid > div.bg-emerald-50 {
  background: #ecfdf5 !important;
  background-image: none !important;
  background-color: #ecfdf5 !important;
  border-color: #d1fae5 !important;
}

#katalog_results .grid > div:nth-child(3),
#katalog_results .grid > div.bg-purple-50 {
  background: #faf5ff !important;
  background-image: none !important;
  background-color: #faf5ff !important;
  border-color: #f3e8ff !important;
}

#katalog_results .grid > div:nth-child(4),
#katalog_results .grid > div.bg-orange-50 {
  background: #fff7ed !important;
  background-image: none !important;
  background-color: #fff7ed !important;
  border-color: #ffedd5 !important;
}

/* Main number (large) - Compact UI */
#katalog_sigma_result > div:first-child,
#katalog_sheets_result > div:first-child,
#katalog_prints_result > div:first-child {
  font-size: 1.125rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  color: inherit !important;
}

/* Sub text (small) - Compact UI */
#katalog_sigma_result > div:last-child,
#katalog_sheets_result > div:last-child,
#katalog_prints_result > div:last-child {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  margin-top: 0.25rem !important;
  opacity: 0.8 !important;
  color: inherit !important;
}

/* Critical styles to prevent icon/layout flash - ULTRA SPECIFIC to override Tailwind */
/* Base SVG styles - ensure visibility */
#awp-printwise-root svg {
  display: inline-block !important;
  flex-shrink: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  vertical-align: middle !important;
}

/* Specific size classes - HIGH SPECIFICITY to override Tailwind */
#awp-printwise-root svg.w-6 {
  width: 1.5rem !important;
  height: 1.5rem !important;
  min-width: 1.5rem !important;
  min-height: 1.5rem !important;
  max-width: 1.5rem !important;
  max-height: 1.5rem !important;
}

#awp-printwise-root svg.w-5 {
  width: 1.25rem !important;
  height: 1.25rem !important;
  min-width: 1.25rem !important;
  min-height: 1.25rem !important;
  max-width: 1.25rem !important;
  max-height: 1.25rem !important;
}

#awp-printwise-root svg.w-4 {
  width: 1rem !important;
  height: 1rem !important;
  min-width: 1rem !important;
  min-height: 1rem !important;
  max-width: 1rem !important;
  max-height: 1rem !important;
}

#awp-printwise-root svg.w-10 {
  width: 2.5rem !important;
  height: 2.5rem !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  max-width: 2.5rem !important;
  max-height: 2.5rem !important;
}

#awp-printwise-root svg.w-16 {
  width: 4rem !important;
  height: 4rem !important;
  min-width: 4rem !important;
  min-height: 4rem !important;
  max-width: 4rem !important;
  max-height: 4rem !important;
}

#awp-printwise-root img[id^="flag-"] {
  object-fit: cover !important;
  display: block !important;
  visibility: visible !important;
  flex-shrink: 0 !important;
}

/* ============================================
   General Calculator Styles
   ============================================ */

/* Ana wrapper: 100vw + negatif margin scrollbar’da sağda boş şerit yapar; tam genişlik %100 + tema sarmalayıcıları full-canvas ile.
   Üst/alt margin: PHP awp_printwise_root_margin_px ile aynı (varsayılan 0 — negatif margin body overflow-y:hidden ile kampanya şeridini keser). */
#awp-printwise-root {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
  background-color: #f9fafb;
  /* 100vh tek ba??na mobilde/scrollbar ile fazla dikey scroll ?retebilir; dvh/svh tercih */
  min-height: 100vh;
  min-height: 100dvh;
  min-height: 100svh;
  overflow-x: hidden;
  overflow-y: visible;
  font-family: var(--font-family-base, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  -webkit-font-smoothing: antialiased;
  font-size: var(--font-size-base, var(--font-size-md, 14px));
  --dn-field-height: 36px;
  --dn-field-radius: 6px;
  --dn-field-padding-y: 10px;
  --dn-field-padding-x: 12px;
  padding-bottom: 0;
}
#awp-printwise-root::before {
  content: "";
  position: fixed;
  inset: 0;
  /* inset:0 yeterli; ek min-height belge y?ksekli?ine g?lge scroll ekleyebilir */
  background: inherit;
  z-index: -1;
  pointer-events: none;
}

/* ==========================================================================
   Module summary panels (shared) ? Ders Notu, Rulo, Dijital, Katalog
   Fiyat paneli ortak taban stilleri; mod?l dosyalar?nda sadece farklar (scrollbar rengi vb.)
   ========================================================================== */
#awp-printwise-root .module-ders-notu-summary,
#awp-printwise-root .module-rulo-baski-summary,
#awp-printwise-root .module-dijital-baski-summary,
#awp-printwise-root .module-katalog-summary {
  grid-area: summary;
  align-self: start;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 20;
  width: 100%;
  min-width: 300px;
  max-width: 400px;
  max-height: none;
  overflow-y: visible;
  overflow-x: hidden;
  /* Koyu lacivert zemin; admin?deki yanl?? a??k renk se?imlerini bast?r?r */
  background: var(--awp-summary-panel-bg, #0f172a) !important;
  border-radius: var(--awp-summary-radius, 6px);
  padding: var(--awp-summary-padding, 20px);
  color: #fff;
  box-sizing: border-box;
  transition: box-shadow 0.25s ease-out;
}

/* Sa? panel ba?l?k / alt ba?l?k: koyu zeminde her zaman a??k renk (tema h3 / admin CSS de?i?keni siyah kalmas?n) */
#awp-printwise-root .module-ders-notu-summary-header h3.module-ders-notu-summary-title,
#awp-printwise-root .module-rulo-baski-summary-header h3.module-rulo-baski-summary-title,
#awp-printwise-root .module-dijital-baski-summary-header h3.module-dijital-baski-summary-title,
#awp-printwise-root .module-katalog-summary-header h3.module-katalog-summary-title,
#awp-printwise-root .module-ders-notu-summary-title,
#awp-printwise-root .module-rulo-baski-summary-title,
#awp-printwise-root .module-dijital-baski-summary-title,
#awp-printwise-root .module-katalog-summary-title {
  color: #f1f5f9 !important;
}

#awp-printwise-root .module-ders-notu-summary-subtitle,
#awp-printwise-root .module-rulo-baski-summary-subtitle,
#awp-printwise-root .module-dijital-baski-summary-subtitle,
#awp-printwise-root .module-katalog-summary-subtitle {
  color: #94a3b8 !important;
}

/* Summary panel scrollbar (shared): mod?l dosyalar? sadece CSS de?i?kenlerini ayarlar */
#awp-printwise-root .module-ders-notu-summary,
#awp-printwise-root .module-rulo-baski-summary,
#awp-printwise-root .module-dijital-baski-summary,
#awp-printwise-root .module-katalog-summary {
  scrollbar-color:
    var(--awp-summary-scrollbar-thumb, rgba(148, 163, 184, 0.4))
    var(--awp-summary-scrollbar-track, rgba(20, 27, 56, 0.85));
}

#awp-printwise-root .module-ders-notu-summary::-webkit-scrollbar,
#awp-printwise-root .module-rulo-baski-summary::-webkit-scrollbar,
#awp-printwise-root .module-dijital-baski-summary::-webkit-scrollbar,
#awp-printwise-root .module-katalog-summary::-webkit-scrollbar {
  width: 6px;
}

#awp-printwise-root .module-ders-notu-summary::-webkit-scrollbar-track,
#awp-printwise-root .module-rulo-baski-summary::-webkit-scrollbar-track,
#awp-printwise-root .module-dijital-baski-summary::-webkit-scrollbar-track,
#awp-printwise-root .module-katalog-summary::-webkit-scrollbar-track {
  background: var(--awp-summary-scrollbar-track, rgba(20, 27, 56, 0.85));
  border-radius: 6px;
}

#awp-printwise-root .module-ders-notu-summary::-webkit-scrollbar-thumb,
#awp-printwise-root .module-rulo-baski-summary::-webkit-scrollbar-thumb,
#awp-printwise-root .module-dijital-baski-summary::-webkit-scrollbar-thumb,
#awp-printwise-root .module-katalog-summary::-webkit-scrollbar-thumb {
  background: var(--awp-summary-scrollbar-thumb, rgba(148, 163, 184, 0.4));
  border-radius: 6px;
}

#awp-printwise-root .module-ders-notu-summary::-webkit-scrollbar-thumb:hover,
#awp-printwise-root .module-rulo-baski-summary::-webkit-scrollbar-thumb:hover,
#awp-printwise-root .module-dijital-baski-summary::-webkit-scrollbar-thumb:hover,
#awp-printwise-root .module-katalog-summary::-webkit-scrollbar-thumb:hover {
  background: var(--awp-summary-scrollbar-thumb-hover, rgba(148, 163, 184, 0.6));
}

#awp-printwise-root .module-ders-notu-summary::-webkit-scrollbar-thumb:active,
#awp-printwise-root .module-rulo-baski-summary::-webkit-scrollbar-thumb:active,
#awp-printwise-root .module-dijital-baski-summary::-webkit-scrollbar-thumb:active,
#awp-printwise-root .module-katalog-summary::-webkit-scrollbar-thumb:active {
  background: var(--awp-summary-scrollbar-thumb-active, rgba(148, 163, 184, 0.75));
}

/* Summary header (shared): mod?l dosyalar? yaln?zca de?i?ken/farklar? tan?mlar */
#awp-printwise-root .module-ders-notu-summary-header,
#awp-printwise-root .module-rulo-baski-summary-header,
#awp-printwise-root .module-dijital-baski-summary-header,
#awp-printwise-root .module-katalog-summary-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding: 16px 0;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  background: var(--awp-summary-panel-bg, var(--awp-summary-header-bg, #141b38));
  border-bottom: 1px solid var(--awp-summary-header-border, rgba(255, 255, 255, 0.1));
  box-shadow: var(--awp-summary-header-shadow, 0 2px 4px rgba(0, 0, 0, 0.1));
  transition: var(--awp-summary-header-transition, none);
}

#awp-printwise-root .module-ders-notu-summary-header-text,
#awp-printwise-root .module-rulo-baski-summary-header-text,
#awp-printwise-root .module-dijital-baski-summary-header-text,
#awp-printwise-root .module-katalog-summary-header-text {
  flex: 1;
  min-width: 0;
}

/* Marka a??klamas? ? her dilde 2 sat?rl?k stabil y?kseklik */
#brand-description {
  line-height: 1.4;
  min-height: calc(1.4em * 2);
}

/* Mod?l ba?l?klar?: yaln?zca klavye ile :focus-visible iken odak ?er?evesi (sekme t?klan?nca ?er?eve yok) */
#awp-printwise-root #dn-module-heading:focus:not(:focus-visible),
#awp-printwise-root #rulo-module-heading:focus:not(:focus-visible),
#awp-printwise-root #dijital-calc-title:focus:not(:focus-visible),
#awp-printwise-root #katalog-module-heading:focus:not(:focus-visible),
#awp-printwise-root #awp-delivery-steps-heading:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

#awp-printwise-root,
#awp-printwise-root main,
.module-ders-notu,
.module-rulo-baski,
.module-dijital-baski,
.module-katalog {
  overflow: visible;
}

/* Mobil: fiyat paneli ekran geni?li?ine tam s??s?n (t?m mod?ller) */
@media (max-width: 900px) {
  #awp-printwise-root .module-ders-notu-summary,
  #awp-printwise-root .module-rulo-baski-summary,
  #awp-printwise-root .module-dijital-baski-summary,
  #awp-printwise-root .module-katalog-summary {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
}

@media (max-width: 640px) {
  #awp-printwise-root .module-ders-notu-summary,
  #awp-printwise-root .module-rulo-baski-summary,
  #awp-printwise-root .module-dijital-baski-summary,
  #awp-printwise-root .module-katalog-summary {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
}

/* Section title layout (Ek Uygulamalar, Grafik Tasar?m Hizmeti, vb.): 8px icon?title, 4px title?subtitle, 16px between sections */
#awp-printwise-root .awp-info-block,
#awp-printwise-root #tab-content-dijital-baski .awp-info-block,
#awp-printwise-root #tab-content-katalog .awp-info-block {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 16px;
}
#awp-printwise-root .awp-info-block .rulo-tooltip-wrap,
#awp-printwise-root .awp-info-block .rulo-tooltip-btn {
  flex-shrink: 0;
  margin-top: 2px;
}
#awp-printwise-root .awp-info-text-block {
  min-width: 0;
}
#awp-printwise-root .awp-info-desc,
#awp-printwise-root #tab-content-dijital-baski .awp-info-desc,
#awp-printwise-root #tab-content-katalog .awp-info-desc {
  margin-top: 4px;
  margin-bottom: 0;
}

/* Footer fills bottom completely - no gap at bottom */
#awp-printwise-root footer {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#awp-printwise-root footer:last-child {
  margin-bottom: 0;
}

#awp-printwise-root footer #footer-copyright,
#awp-printwise-root .awp-footer-copyright {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  padding-bottom: 0 !important;
}

#awp-printwise-root footer #footer-copyright p,
#awp-printwise-root .awp-footer-copyright-text {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Ensure wrapper has no bottom padding/margin */
#awp-printwise-root:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Remove empty paragraphs and chrome extension scripts after footer */
#awp-printwise-root footer ~ p:empty,
#awp-printwise-root footer ~ p:has(script[src*="chrome-extension"]),
#awp-printwise-root footer + p:empty,
#awp-printwise-root footer + p:has(script[src*="chrome-extension"]),
#awp-printwise-root footer ~ script[src*="chrome-extension"],
#awp-printwise-root footer + script[src*="chrome-extension"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Remove any empty paragraphs containing only non-breaking space */
#awp-printwise-root footer ~ p:has(> *:only-child):empty,
#awp-printwise-root footer + p:has(> *:only-child):empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  line-height: 0 !important;
}

/* Override Flatsome/theme margins for form elements - Scoped to calculator only */
/* Flatsome adds margin-right: 1em to buttons - remove to prevent extra space on right */
#awp-printwise-root .button,
#awp-printwise-root .btn,
#awp-printwise-root button {
  margin-right: 0 !important;
}
/* App-like Compact UI: Base font 13px - Flatsome margin-left/margin-bottom 1em ?ak??mas?n? kapat */
#awp-printwise-root .button,
#awp-printwise-root button,
#awp-printwise-root fieldset,
#awp-printwise-root input,
#awp-printwise-root select,
#awp-printwise-root textarea {
  margin-left: 0 !important;
  margin-bottom: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif !important;
}

#awp-printwise-root label,
#awp-printwise-root legend {
  margin-bottom: 0 !important;
}

/* Restore margin-bottom only where needed within calculator */
#awp-printwise-root .space-y-4 > * + *,
#awp-printwise-root .space-y-3 > * + *,
#awp-printwise-root .space-y-5 > * + * {
  margin-top: 1rem;
}

#awp-printwise-root .space-y-3 > * + * {
  margin-top: 0.75rem;
  margin-bottom: 25px;
}

#awp-printwise-root .space-y-5 > * + * {
  margin-top: 1.25rem;
}

/* Dropdown text color & background fix - scoped to calculator */
/* App-like Compact UI: Font 13px */
#awp-printwise-root select {
  color: #1f2937 !important;
  background-color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif !important;
}

/* T?m select option'lar? i?in font e?itleme */
#awp-printwise-root select option,
.modern-select option,
select option {
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif !important;
}

#awp-printwise-root select option {
  color: #1f2937 !important;
  background-color: #ffffff !important;
}

#awp-printwise-root select:focus,
#awp-printwise-root select:active,
#awp-printwise-root select:hover {
  color: #1f2937 !important;
  background-color: #ffffff !important;
}

#awp-printwise-root select option:checked,
#awp-printwise-root select option:hover,
#awp-printwise-root select option:focus {
  color: #1f2937 !important;
  background-color: #f3f4f6 !important;
}

/* Unified form field sizing for all inputs & selects inside calculator */
#awp-printwise-root input[type="text"],
#awp-printwise-root input[type="email"],
#awp-printwise-root input[type="tel"],
#awp-printwise-root input[type="number"],
#awp-printwise-root select {
  min-height: var(--dn-field-height);
  border-radius: 6px;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: var(
      --font-family-base,
      "Inter",
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      sans-serif
    )
    !important;
}

/* Header redesign: gorsel altta, kaplama ustte ayri katman */
/* overflow:hidden ?st promosyon metnini kesiyordu; x+y visible ? yatay ta?ma 100vw kald?r?larak giderildi */
#awp-main-header.awp-modern-header {
  position: relative;
  overflow: visible;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
  /* Typography & Design (#awp-printwise-root ?zerindeki --font-family-*) */
  font-family: var(--font-family-base, var(--font-family, inherit));
  background-color: #14163f !important;
  background-image: var(--awp-header-bg-image) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  background-blend-mode: normal !important;
  padding-top: 0 !important;
}

#awp-main-header.awp-modern-header.awp-header-bg-solid {
  background: var(--awp-header-bg-solid-color, #14163f) !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}

#awp-main-header.awp-modern-header.awp-header-bg-overlay-off {
  background-image: var(--awp-header-bg-image) !important;
}

#awp-main-header.awp-modern-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--awp-header-bg-overlay, rgba(0, 0, 0, 0.55));
  pointer-events: none;
  mix-blend-mode: normal !important;
}

#awp-main-header.awp-modern-header.awp-header-bg-overlay-off::after,
#awp-main-header.awp-modern-header.awp-header-bg-solid::after {
  background: transparent !important;
}

#awp-main-header.awp-modern-header.awp-header-overlay-linear.awp-header-overlay-linear-to-bottom:not(.awp-header-bg-overlay-off):not(.awp-header-bg-solid)::after {
  background: linear-gradient(
    to bottom,
    var(--awp-header-bg-overlay, rgba(0, 0, 0, 0.55)) 0%,
    var(--awp-header-bg-overlay, rgba(0, 0, 0, 0.55)) var(--awp-header-overlay-linear-stop, 55%),
    rgba(0, 0, 0, 0) 100%
  ) !important;
}

#awp-main-header.awp-modern-header.awp-header-overlay-linear.awp-header-overlay-linear-to-top:not(.awp-header-bg-overlay-off):not(.awp-header-bg-solid)::after {
  background: linear-gradient(
    to top,
    var(--awp-header-bg-overlay, rgba(0, 0, 0, 0.55)) 0%,
    var(--awp-header-bg-overlay, rgba(0, 0, 0, 0.55)) var(--awp-header-overlay-linear-stop, 55%),
    rgba(0, 0, 0, 0) 100%
  ) !important;
}

/* Promosyon ?eridi: ::after kaplamas? ?stten turuncu alan? karart?yor / ?kesilmi?? hissi veriyordu; ofset t?m overlay varyantlar?nda */
#awp-main-header.awp-modern-header:has(.awp-header-promo-bar)::after {
  top: 3.25rem;
}

#awp-main-header.awp-modern-header.awp-header-overlay-linear.awp-header-overlay-linear-to-bottom:not(.awp-header-bg-overlay-off):not(.awp-header-bg-solid):has(.awp-header-promo-bar)::after,
#awp-main-header.awp-modern-header.awp-header-overlay-linear.awp-header-overlay-linear-to-top:not(.awp-header-bg-overlay-off):not(.awp-header-bg-solid):has(.awp-header-promo-bar)::after {
  top: 3.25rem;
}

#awp-main-header.awp-modern-header > * {
  position: relative;
  z-index: 1;
}

#awp-printwise-root > .awp-search-focus-overlay,
body > .awp-search-focus-overlay {
  position: fixed;
  top: var(--awp-search-overlay-top, 0px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10040;
  margin: 0;
  padding: 0;
  border: 0;
}

#awp-main-header .awp-header-inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}

#awp-main-header .awp-header-promo-bar {
  background: linear-gradient(90deg, var(--awp-home-promo-bg-start, #ea580c) 0%, var(--awp-home-promo-bg-end, #f59e0b) 100%);
  color: var(--awp-home-promo-text-color, #fff);
  font-family: var(--awp-home-promo-font-family, var(--font-family-heading, var(--font-family-base)));
  font-size: var(--awp-home-promo-font-size, 11px);
  font-weight: var(--awp-home-promo-font-weight, 800);
  font-stretch: var(--awp-home-promo-font-stretch, normal);
  text-align: center;
  letter-spacing: 0.15em;
  padding: 10px 16px;
  line-height: 1.5;
  min-height: 2.75rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  overflow: visible;
  position: relative;
  z-index: 2;
}

#awp-main-header .awp-header-promo-bar .awp-header-promo-link {
  color: inherit;
  text-decoration: none;
  display: block;
}
#awp-main-header .awp-header-promo-bar .awp-header-promo-link[data-awp-promo-lightbox] {
  cursor: pointer;
}

/* ?? Promo Lightbox Modal ??????????????????????????????????? */
.awp-promo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.awp-promo-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
.awp-promo-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.awp-promo-lightbox__body {
  position: relative;
  max-width: 92vw;
  max-height: 90vh;
  transform: translateY(60px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.awp-promo-lightbox.is-open .awp-promo-lightbox__body {
  transform: translateY(0);
}
.awp-promo-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 88vh;
  width: auto;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  object-fit: contain;
}
.awp-promo-lightbox__close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: #1e293b;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
  z-index: 1;
}
.awp-promo-lightbox__close:hover {
  transform: scale(1.1);
}
@media (max-width: 640px) {
  .awp-promo-lightbox {
    padding: 10px;
  }
  .awp-promo-lightbox__body {
    max-width: 96vw;
    max-height: 92vh;
  }
  .awp-promo-lightbox__img {
    max-height: 85vh;
    border-radius: 6px;
  }
  .awp-promo-lightbox__close {
    top: -10px;
    right: -10px;
    width: 32px;
    height: 32px;
    font-size: 18px;
  }
}

#awp-main-header .awp-header-top-links .awp-header-top-link-anchor,
#awp-main-header .awp-header-top-status .awp-header-top-status-anchor {
  color: inherit;
  text-decoration: none;
}

#awp-main-header .awp-header-top-links .awp-header-top-link-anchor:hover,
#awp-main-header .awp-header-top-status .awp-header-top-status-anchor:hover {
  text-decoration: underline;
  opacity: 1;
}

#awp-main-header .awp-header-top-links .awp-header-top-link-anchor:focus-visible,
#awp-main-header .awp-header-top-status .awp-header-top-status-anchor:focus-visible {
  outline: none;
  text-decoration: underline;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  padding: 2px 4px;
  margin: -2px -4px;
}

#awp-main-header .awp-header-top-utility {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--awp-home-top-utility-bg, rgba(12, 19, 40, 0.72));
}

#awp-main-header .awp-header-top-utility .awp-header-inner {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

#awp-main-header .awp-header-top-links {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--awp-home-top-utility-font-family, var(--font-family-base));
  font-size: var(--awp-home-top-utility-font-size, 10px);
  font-weight: var(--awp-home-top-utility-font-weight, 100);
  font-stretch: var(--awp-home-top-utility-font-stretch, normal);
  letter-spacing: 0em;
  text-transform: uppercase;
  color: var(--awp-home-top-utility-text, rgba(255, 255, 255, 0.7));
}

#awp-main-header .awp-header-top-status {
  font-family: var(--awp-home-top-utility-font-family, var(--font-family-base));
  font-size: var(--awp-home-top-utility-font-size, 10px);
  font-weight: var(--awp-home-top-utility-font-weight, 700);
  font-stretch: var(--awp-home-top-utility-font-stretch, normal);
  letter-spacing: 0.12em;
  color: var(--awp-home-top-status-text, rgba(255, 255, 255, 0.68));
}

#awp-main-header .awp-header-main-nav {
  padding: 10px 0;
  z-index: 10020;
  background: rgb(19 1 1 / 88%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition:
    box-shadow 0.25s ease,
    background-color 0.25s ease,
    transform 0.25s ease;
}

#awp-main-header .awp-header-main-nav.is-fixed {
  position: fixed !important;
  top: var(--awp-promo-bar-height, 0px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 10030 !important;
  overflow: visible !important;
  clip-path: none !important;
  box-shadow: 0 10px 28px rgba(2, 8, 23, 0.42);
  transform: translateY(0);
}

body.admin-bar #awp-main-header .awp-header-main-nav.is-fixed {
  top: calc(32px + var(--awp-promo-bar-height, 0px)) !important;
}

@media screen and (max-width: 782px) {
  body.admin-bar #awp-main-header .awp-header-main-nav.is-fixed {
    top: calc(46px + var(--awp-promo-bar-height, 0px)) !important;
  }
}

#awp-main-header .awp-header-main-nav-placeholder {
  width: 100%;
  display: none;
}

#awp-main-header .awp-header-main-nav .awp-header-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

#awp-main-header .awp-header-brand {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
}

/* Header Search - Modern glassmorphism */
#awp-main-header .awp-header-search-wrap {
  flex: 1 1 280px;
  max-width: 420px;
  min-width: 0;
}

#awp-main-header .awp-header-search-inner {
  position: relative;
  display: flex;
  align-items: center;
}

#awp-main-header .awp-header-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--awp-search-bar-icon-color, rgba(255, 255, 255, 0.6));
  pointer-events: none;
  transition: color 0.2s ease;
}

#awp-main-header .awp-header-search-input {
  width: 100%;
  height: 42px;
  padding: 0 16px 0 44px;
  font-family: var(--awp-search-bar-font-family, var(--font-family-base));
  font-size: var(--awp-search-bar-font-size, 14px);
  font-weight: var(--awp-search-bar-font-weight, 500);
  font-stretch: var(--awp-search-bar-font-stretch, normal);
  color: var(--awp-search-bar-text-color, #fff);
  background: var(--awp-search-bar-bg, rgba(255, 255, 255, 0.16));
  border: 1px solid var(--awp-search-bar-border-color, rgba(255, 255, 255, 0.32));
  border-radius: 6px;
  outline: none;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

#awp-main-header .awp-header-search-input::placeholder {
  color: var(--awp-search-bar-placeholder-color, rgba(255, 255, 255, 0.78));
}

#awp-main-header .awp-header-search-input:hover {
  background: var(--awp-search-bar-bg-hover, rgba(148, 163, 184, 0.14));
  border-color: var(--awp-search-bar-border-color-focus, rgba(148, 163, 184, 0.38));
}

#awp-main-header .awp-header-search-input:focus {
  background: var(--awp-search-bar-bg-focus, rgba(148, 163, 184, 0.22));
  border-color: var(--awp-search-bar-border-color-focus, rgba(148, 163, 184, 0.38));
  box-shadow: 0 0 0 3px var(--awp-search-bar-focus-ring-color, rgba(148, 163, 184, 0.22));
}

#awp-main-header .awp-header-search-inner:focus-within .awp-header-search-icon {
  color: var(--awp-search-bar-icon-color, rgba(255, 255, 255, 0.88));
}

#awp-main-header .awp-header-search-inner:focus-within .awp-header-search-results {
  visibility: visible;
  opacity: 1;
}

#awp-main-header .awp-header-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 360px;
  overflow-y: auto;
  background: var(--awp-search-results-bg, rgba(15, 23, 42, 0.98));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.15s ease, opacity 0.15s ease;
  z-index: 10050;
  scrollbar-width: thin;
  scrollbar-color:
    var(--awp-search-results-scrollbar-thumb, rgba(148, 163, 184, 0.42))
    var(--awp-search-results-scrollbar-track, rgba(255, 255, 255, 0.08));
}

#awp-main-header .awp-header-search-results::-webkit-scrollbar {
  width: 8px;
}

#awp-main-header .awp-header-search-results::-webkit-scrollbar-track {
  background: var(--awp-search-results-scrollbar-track, rgba(255, 255, 255, 0.08));
  border-radius: 999px;
}

#awp-main-header .awp-header-search-results::-webkit-scrollbar-thumb {
  background: var(--awp-search-results-scrollbar-thumb, rgba(148, 163, 184, 0.42));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

#awp-main-header .awp-header-search-results::-webkit-scrollbar-thumb:hover {
  background: var(--awp-search-results-scrollbar-thumb-hover, rgba(148, 163, 184, 0.58));
}

/* Arama odak overlay — nav altindan baslar; arama cubugu ve sonuc listesi net kalir */
.awp-search-focus-overlay {
  position: fixed;
  top: var(--awp-search-overlay-top, 0px);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--awp-search-focus-overlay-color, rgba(15, 23, 42, 0.32));
  backdrop-filter: blur(var(--awp-search-focus-overlay-blur, 4px));
  -webkit-backdrop-filter: blur(var(--awp-search-focus-overlay-blur, 4px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0.22s ease;
  z-index: 10040;
}

body.awp-search-focused .awp-search-focus-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 10040;
}

body.awp-search-focused #awp-main-header .awp-header-main-nav {
  z-index: 10050;
}

body.awp-search-focused #awp-main-header .awp-header-main-nav.is-fixed {
  z-index: 10050 !important;
}

body.awp-search-focused #awp-main-header .awp-header-search-wrap {
  position: relative;
  z-index: 10051;
  isolation: isolate;
}

body.awp-search-focused #awp-main-header .awp-header-search-inner {
  position: relative;
  z-index: 10052;
}

body.awp-search-focused #awp-main-header .awp-header-search-results {
  z-index: 10053;
}

#awp-main-header .awp-header-search-results-section {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#awp-main-header .awp-header-search-results-section:last-child {
  border-bottom: none;
}

#awp-main-header .awp-header-search-results-title {
  padding: 6px 16px;
  font-size: 11px;
  font-weight: var(--awp-search-results-title-font-weight, 700);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--awp-search-results-title-color, rgba(255, 255, 255, 0.5));
}

#awp-main-header .awp-header-search-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.15s ease;
  text-decoration: none;
  color: inherit;
}

#awp-main-header .awp-header-search-result:hover {
  background: var(--awp-search-results-item-hover-bg, rgba(148, 163, 184, 0.12));
}

#awp-main-header .awp-header-search-result-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#awp-main-header .awp-header-search-result-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

#awp-main-header .awp-header-search-result-text {
  flex: 1;
  min-width: 0;
}

#awp-main-header .awp-header-search-result-title {
  font-size: 14px;
  font-weight: var(--awp-search-results-item-font-weight, 600);
  color: var(--awp-search-results-item-title-color, #fff);
}

#awp-main-header .awp-header-search-result-subtitle {
  font-size: 12px;
  color: var(--awp-search-results-item-subtitle-color, rgba(255, 255, 255, 0.6));
  margin-top: 2px;
}

#awp-main-header .awp-header-search-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: 14px;
  color: var(--awp-search-results-title-color, rgba(255, 255, 255, 0.5));
}

@media (max-width: 900px) {
  #awp-main-header .awp-header-search-wrap {
    display: none;
  }
}

#awp-main-header .awp-header-main-nav .admin-buttons-container {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  margin-left: auto !important;
}

#awp-main-header .awp-header-main-nav .awp-inline-lang-switcher,
#awp-main-header .awp-header-main-nav .lang-switcher {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

#awp-main-header .awp-header-main-nav .lang-buttons-container {
  gap: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
}

#awp-main-header .awp-header-main-nav .lang-btn {
  width: 54px !important;
  height: 40px !important;
  min-width: 54px !important;
  min-height: 40px !important;
  border-radius: 6px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(71, 85, 105, 0.72) !important;
  background: linear-gradient(
    180deg,
    rgba(30, 41, 59, 0.96) 0%,
    rgba(15, 23, 42, 0.98) 100%
  ) !important;
  box-shadow: none !important;
  transform: none !important;
}

#awp-main-header .awp-header-main-nav .lang-btn::before {
  display: none !important;
}

#awp-main-header .awp-header-main-nav .lang-btn img[id^="flag-"] {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 6px !important;
  opacity: 0.56;
  filter: saturate(0.68) brightness(0.72) contrast(0.92) !important;
  transform: none !important;
  position: static !important;
  transition: opacity 0.2s ease, filter 0.2s ease !important;
}

#awp-main-header .awp-header-main-nav .lang-btn:hover img[id^="flag-"] {
  opacity: 1;
  filter: saturate(1.05) brightness(1.03) contrast(1.02) !important;
}

#awp-main-header .awp-header-main-nav .lang-btn.active,
#awp-main-header .awp-header-main-nav .lang-btn[aria-pressed="true"] {
  border-color: rgba(125, 211, 252, 0.92) !important;
  background: linear-gradient(
    180deg,
    rgba(59, 130, 246, 0.24) 0%,
    rgba(30, 64, 175, 0.2) 100%
  ) !important;
  box-shadow:
    0 8px 18px rgba(2, 8, 23, 0.34),
    0 0 0 1px rgba(125, 211, 252, 0.6) inset,
    0 0 12px rgba(56, 189, 248, 0.32) !important;
}

#awp-main-header .awp-header-main-nav .lang-btn.active img[id^="flag-"],
#awp-main-header .awp-header-main-nav .lang-btn[aria-pressed="true"] img[id^="flag-"] {
  opacity: 1;
  filter: saturate(1.1) brightness(1.05) contrast(1.04) !important;
}

#awp-main-header .awp-header-main-nav .awp-cart-button,
#awp-main-header .awp-header-main-nav .admin-settings-btn,
#awp-main-header .awp-header-main-nav .admin-logout-btn,
#awp-main-header .awp-header-main-nav .awp-customer-account-btn,
#awp-main-header .awp-header-main-nav .awp-customer-register-btn,
#awp-main-header .awp-header-main-nav .lang-btn {
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  background: linear-gradient(
    180deg,
    rgba(51, 65, 85, 0.88) 0%,
    rgba(30, 41, 59, 0.92) 100%
  ) !important;
  box-shadow:
    0 2px 6px rgba(2, 8, 23, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  transition:
    transform 0.18s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease !important;
}

#awp-main-header .awp-header-main-nav .awp-cart-button:hover,
#awp-main-header .awp-header-main-nav .admin-settings-btn:hover,
#awp-main-header .awp-header-main-nav .admin-logout-btn:hover,
#awp-main-header .awp-header-main-nav .awp-customer-account-btn:hover,
#awp-main-header .awp-header-main-nav .awp-customer-register-btn:hover,
#awp-main-header .awp-header-main-nav .lang-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(147, 197, 253, 0.8) !important;
  background: linear-gradient(
    180deg,
    rgba(59, 130, 246, 0.26) 0%,
    rgba(30, 64, 175, 0.24) 100%
  ) !important;
  box-shadow:
    0 8px 18px rgba(2, 8, 23, 0.34),
    0 0 0 1px rgba(147, 197, 253, 0.45) inset,
    0 0 14px rgba(59, 130, 246, 0.34);
}

#awp-main-header .awp-header-main-nav .lang-btn:hover {
  filter: saturate(1.06);
}

#awp-main-header .awp-header-main-nav .awp-cart-button:active,
#awp-main-header .awp-header-main-nav .admin-settings-btn:active,
#awp-main-header .awp-header-main-nav .admin-logout-btn:active,
#awp-main-header .awp-header-main-nav .awp-customer-account-btn:active,
#awp-main-header .awp-header-main-nav .awp-customer-register-btn:active,
#awp-main-header .awp-header-main-nav .lang-btn:active {
  transform: translateY(0);
  box-shadow:
    0 3px 8px rgba(2, 8, 23, 0.28),
    inset 0 1px 2px rgba(15, 23, 42, 0.45) !important;
}

#awp-main-header .awp-header-main-nav .awp-cart-button:focus-visible,
#awp-main-header .awp-header-main-nav .admin-settings-btn:focus-visible,
#awp-main-header .awp-header-main-nav .admin-logout-btn:focus-visible,
#awp-main-header .awp-header-main-nav .awp-customer-account-btn:focus-visible,
#awp-main-header .awp-header-main-nav .awp-customer-register-btn:focus-visible,
#awp-main-header .awp-header-main-nav .lang-btn:focus-visible {
  outline: none;
  border-color: rgba(125, 211, 252, 0.95) !important;
  box-shadow:
    0 0 0 2px rgba(14, 165, 233, 0.22),
    0 0 0 4px rgba(14, 165, 233, 0.12),
    0 10px 20px rgba(2, 8, 23, 0.34) !important;
}

#awp-main-header .awp-header-main-nav .currency-toggle-wrapper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;  
  gap: 6px !important;
}

#awp-main-header .awp-header-main-nav .currency-toggle-wrapper span {
  font-size: 10px !important;
}

/* Para birimi anahtar?: ?st men?de dikey hizalama (position:absolute daire i?in korunur) */
#awp-main-header .currency-toggle-wrapper {
  align-items: center !important;
  align-self: center;
}

#awp-main-header .currency-toggle-switch {
  align-self: center;
}

/* Sepet: Tailwind hidden + inline display ?ak??mas?n? kald?r ? tek para sat?r? */
#awp-main-header .awp-cart-price-stack--desktop {
  display: none !important;
}

#awp-main-header .awp-cart-price-stack--mobile {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

@media (min-width: 640px) {
  #awp-main-header .awp-cart-price-stack--desktop {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }

  #awp-main-header .awp-cart-price-stack--mobile {
    display: none !important;
  }
}

/* Service cards: lazer effect removed intentionally */

#awp-main-header .awp-header-hero {
  /* Alt padding: descender (g, y, p) + overflow:hidden header ile kesilme riski */
  padding: 16px 0 14px;
}

#awp-main-header .awp-header-inner-hero {
  text-align: center;
}

#awp-main-header #main-title {
  margin: 0;
  font-size: clamp(1.9rem, 5vw, 3.9rem);
  /* <1 keskin g?r?n?r ama descender?lar? k?rpar; header overflow:hidden ile birle?ince g vb. kesilir */
  line-height: 1.12 !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em;
  font-family: var(--font-family-heading, var(--font-family-base));
}

#awp-main-header #brand-description {
  margin: 12px auto 0;
  max-width: 820px;
  color: rgba(226, 232, 240, 0.88);
  font-size: 13px;
  font-family: var(--font-family-base);
}

/*
 * Hero: harf maskesi i?inde dar buz-mavi / buz-beyaz ???lt? (background-clip: text).
 */
#awp-main-header .awp-header-hero .awp-hero-text-shimmer {
  --awp-hero-text-fill: #ffffff;
  --awp-hero-shimmer-ice: rgb(224, 242, 254);
  --awp-hero-shimmer-ice-bright: rgb(240, 249, 255);
  display: block;
  /* background-clip:text ile text-shadow g?r?nmez; g?lge i?in drop-shadow (?r. ~2px 2px 4px?ten biraz daha kal?n) */
  filter: drop-shadow(3px 5px 10px rgba(0, 0, 0, 0.52)) drop-shadow(2px 3px 6px rgba(0, 0, 0, 0.4))
    drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.35));
  /* background-clip:text baz? motorlarda sat?r kutusunu s?k? hesaplar; min. nefes */
  line-height: inherit;
  overflow: visible;
  background-image: linear-gradient(
    92deg,
    var(--awp-hero-text-fill) 0%,
    var(--awp-hero-text-fill) 47%,
    var(--awp-hero-shimmer-ice) 49%,
    rgb(255, 255, 255) 50%,
    var(--awp-hero-shimmer-ice-bright) 51%,
    var(--awp-hero-text-fill) 53%,
    var(--awp-hero-text-fill) 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-font-smoothing: antialiased;
  transform: translateZ(0);
  backface-visibility: hidden;
  animation: awpHeroTextGlitter 7s linear infinite alternate;
}

/* Ana ba?l?k: ayn? dar buz-beyaz ?erit (b?y?k punto; sat?r y?ksekli?i #main-title ?zerinden descender alan? verir) */
#awp-main-header .awp-header-hero #main-title .awp-hero-title-line1.awp-hero-text-shimmer {
  background-image: linear-gradient(
    92deg,
    var(--awp-hero-text-fill) 0%,
    var(--awp-hero-text-fill) 46.5%,
    rgb(186, 230, 253) 48.5%,
    rgb(255, 255, 255) 50%,
    rgb(224, 242, 254) 51.5%,
    var(--awp-hero-text-fill) 53.5%,
    var(--awp-hero-text-fill) 100%
  );
  background-size: 250% 100%;
  animation-duration: 6.5s;
}

#awp-main-header .awp-header-hero #brand-description.awp-hero-text-shimmer {
  display: block;
  animation-duration: 8s;
  animation-delay: 0.6s;
  /* Alt a??klama: ayn? g?lge hissi, hafif daha yumu?ak */
  filter: drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.48)) drop-shadow(2px 3px 5px rgba(0, 0, 0, 0.36))
    drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.3));
}

@media (prefers-reduced-motion: reduce) {
  #awp-main-header .awp-header-hero .awp-hero-text-shimmer {
    filter: drop-shadow(2px 3px 5px rgba(0, 0, 0, 0.4));
  }
  #awp-main-header .awp-header-hero #brand-description.awp-hero-text-shimmer {
    filter: drop-shadow(1px 2px 4px rgba(0, 0, 0, 0.35));
  }
}

/* prefers-reduced-motion: class-ders-notu-hesaplama.php inline CSS */

@keyframes awpHeroTextGlitter {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

#awp-main-header .awp-header-tabs-row {
  padding-top: 12px;
}

#awp-main-header .awp-header-tabs-row #subtitle {
  margin-top: 10px !important;
  margin-bottom: 4px !important;
  color: rgba(226, 232, 240, 0.9);
}

#awp-main-header .awp-header-service-cards-row {
  margin-top: 14px;
}

#awp-main-header .awp-header-service-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

#awp-main-header .awp-header-service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--awp-home-service-card-bg, linear-gradient(180deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.94)));
  border-radius: 6px;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  padding: 0;
  margin: 0;
  color: #fff;
  box-shadow: 0 10px 24px rgba(2, 8, 23, 0.3);
  vertical-align: top;
}

#awp-main-header button.awp-header-service-card {
  margin: 0;
  font: inherit;
  line-height: inherit;
}

#awp-main-header .awp-header-service-card.awp-header-service-card-link {
  text-decoration: none;
  color: inherit;
}

#awp-main-header .awp-header-service-card:hover {
  transform: translateY(-2px);
  border-color: rgba(249, 115, 22, 0.44);
  background: var(--awp-home-service-card-hover-bg, linear-gradient(180deg, rgba(51, 65, 85, 0.96), rgba(30, 41, 59, 0.98)));
  box-shadow: 0 14px 30px rgba(2, 8, 23, 0.38);
}

#awp-main-header .awp-header-service-card:hover .awp-header-service-content strong,
#awp-main-header .awp-header-service-card:hover .awp-header-service-content small {
  color: var(--awp-home-service-hover-title-color, #f97316);
  transition: color 0.2s ease;
}

#awp-main-header .awp-header-service-card:hover .awp-header-service-content small {
  color: var(--awp-home-service-hover-subtitle-color, #f97316);
}

#awp-main-header .awp-header-service-card:focus-visible {
  outline: none;
  box-shadow:
    0 14px 30px rgba(2, 8, 23, 0.38),
    0 0 0 3px rgba(249, 115, 22, 0.5);
  border-color: rgba(249, 115, 22, 0.6);
}

#awp-main-header .awp-header-service-card:active {
  transform: translateY(0);
  box-shadow: 0 8px 20px rgba(2, 8, 23, 0.32);
}

/* Hero servis kartlar?: ?evrede d?nen alt?n neon (admin: Hero ? Gezen neon ?er?eveyi a?) */
@property --awp-neon-border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes awp-service-neon-spin {
  to {
    --awp-neon-border-angle: 360deg;
  }
}

#awp-main-header.awp-header--service-neon .awp-header-service-card {
  --awp-neon-border-angle: 0deg;
  overflow: visible;
  border: 2px solid transparent;
  background:
    var(--awp-home-service-card-bg, linear-gradient(180deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.94))) padding-box,
    conic-gradient(
      from var(--awp-neon-border-angle),
      transparent 0deg,
      transparent 58%,
      rgba(255, 215, 0, 0.2) 65%,
      rgba(255, 236, 140, 0.98) 72%,
      rgba(255, 193, 7, 0.95) 78%,
      rgba(255, 215, 0, 0.35) 85%,
      transparent 92%
    ) border-box;
  animation: awp-service-neon-spin 3.2s linear infinite;
  box-shadow:
    0 10px 24px rgba(2, 8, 23, 0.3),
    0 0 20px rgba(255, 200, 60, 0.14);
}

#awp-main-header.awp-header--service-neon .awp-header-service-image-wrap {
  overflow: hidden;
  border-radius: 5px 5px 0 0;
}

#awp-main-header.awp-header--service-neon .awp-header-service-card:hover {
  transform: translateY(-2px);
  border-color: transparent;
  background:
    var(--awp-home-service-card-hover-bg, linear-gradient(180deg, rgba(51, 65, 85, 0.96), rgba(30, 41, 59, 0.98))) padding-box,
    conic-gradient(
      from var(--awp-neon-border-angle),
      transparent 0deg,
      transparent 58%,
      rgba(255, 215, 0, 0.2) 65%,
      rgba(255, 236, 140, 0.98) 72%,
      rgba(255, 193, 7, 0.95) 78%,
      rgba(255, 215, 0, 0.35) 85%,
      transparent 92%
    ) border-box;
  box-shadow:
    0 14px 30px rgba(2, 8, 23, 0.38),
    0 0 22px rgba(255, 200, 60, 0.2);
}

#awp-main-header.awp-header--service-neon .awp-header-service-card:focus-visible {
  border-color: transparent;
  background:
    var(--awp-home-service-card-bg, linear-gradient(180deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.94))) padding-box,
    conic-gradient(
      from var(--awp-neon-border-angle),
      transparent 0deg,
      transparent 58%,
      rgba(255, 215, 0, 0.2) 65%,
      rgba(255, 236, 140, 0.98) 72%,
      rgba(255, 193, 7, 0.95) 78%,
      rgba(255, 215, 0, 0.35) 85%,
      transparent 92%
    ) border-box;
  box-shadow:
    0 14px 30px rgba(2, 8, 23, 0.38),
    0 0 0 3px rgba(249, 115, 22, 0.45),
    0 0 24px rgba(255, 200, 60, 0.22);
}

@media (prefers-reduced-motion: reduce) {
  #awp-main-header.awp-header--service-neon .awp-header-service-card {
    animation: none;
    --awp-neon-border-angle: 42deg;
  }
}

#awp-main-header .awp-header-service-image-wrap {
  flex: 0 0 auto;
  height: 150px;
  min-height: 150px;
  background: #1e293b;
  overflow: hidden;
}

#awp-main-header .awp-header-service-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

#awp-main-header .awp-header-service-content {
  flex: 0 0 auto;
  min-height: 98px;
  padding: 10px 10px 11px;
  display: grid;
  gap: 4px;
  margin: 0;
}

#awp-main-header .awp-header-service-content strong {
  font-family: var(--awp-home-service-title-font-family, var(--font-family-heading, var(--font-family-base)));
  font-size: var(--awp-home-service-title-font-size, 11px);
  font-weight: var(--awp-home-service-title-font-weight, 800);
  font-stretch: var(--awp-home-service-title-font-stretch, normal);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--awp-home-service-title-color, #f8fafc);
  line-height: 1.2;
}

#awp-main-header .awp-header-service-content small {
  font-family: var(--awp-home-service-subtitle-font-family, var(--font-family-base));
  font-size: var(--awp-home-service-subtitle-font-size, 10px);
  font-weight: var(--awp-home-service-subtitle-font-weight, inherit);
  font-stretch: var(--awp-home-service-subtitle-font-stretch, normal);
  line-height: 1.5;
  color: var(--awp-home-service-subtitle-color, rgba(100, 116, 139, 0.95));
  text-transform: lowercase;
  min-height: 30px;
}

/* Renk: Ana Sayfa ??erik ? Stiller ? Fiyat g?stergesi rengi (--awp-home-service-price-color) */
#awp-main-header .awp-header-service-price {
  font-size: 16px;
  font-weight: 900;
  color: var(--awp-home-service-price-color, #f97316);
  line-height: 2;
}

#awp-main-header .awp-header-service-price .awp-header-card-price {
  color: inherit;
}

#awp-main-header .awp-header-service-price em {
  font-style: normal;
  font-size: 10px;
  color: var(--awp-home-service-price-color, #f97316);
  margin-left: 2px;
  font-weight: 900;
}

#awp-main-header .awp-header-service-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 22px;
  min-width: 22px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 9px;
  line-height: 1;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.05em;
  z-index: 2;
  box-sizing: border-box;
}

#awp-main-header .awp-header-service-badge svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  display: block;
}

#awp-main-header .awp-badge-green { background: #10b981; }
#awp-main-header .awp-badge-blue { background: #3b82f6; }
#awp-main-header .awp-badge-pink { background: #ec4899; }

#awp-main-header .awp-header-tabs-proxy {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
}

#awp-main-header .awp-header-trust-row {
  margin-top: 10px;
  background: var(--awp-home-trust-bar-bg, linear-gradient(90deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95)));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 999;
  box-shadow: var(--awp-home-trust-bar-shadow, inset 0 1px 2px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.2), 0 10px 20px -4px rgba(0,0,0,0.25));
}

/* Trust bar: t?m ??eler tek sat?r (dinamik say?); dar ekranda yatay kayd?rma */
#awp-main-header .awp-header-trust-grid {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(6px, 1.2vw, 14px);
  padding-top: 12px;
  padding-bottom: 12px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

#awp-main-header .awp-header-trust-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: left;
  flex: 1 1 0;
  min-width: 0;
}

#awp-main-header .awp-header-trust-item.awp-header-trust-item-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

#awp-main-header .awp-header-trust-item.awp-header-trust-item-link:hover {
  opacity: 1;
  transform: scale(1.02);
}

#awp-main-header .awp-header-trust-item.awp-header-trust-item-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.6);
  border-radius: 6px;
}

#awp-main-header .awp-header-trust-item.awp-header-trust-item-link:active {
  transform: scale(0.98);
}

#awp-main-header .awp-header-trust-icon {
  min-width: 28px;
  min-height: 28px;
  max-width: 250px;
  max-height: 250px;
  width: auto;
  height: auto;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: rgba(249, 115, 22, 0.18);
  border: 1px solid rgba(249, 115, 22, 0.34);
  flex-shrink: 0;
  box-sizing: content-box;
}

#awp-main-header .awp-header-trust-icon-img {
  display: block;
  max-width: 250px;
  max-height: 250px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 999px;
  background: #dbe1ff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.2), 0 10px 20px -4px rgba(0, 0, 0, 0.25);
  border: 4px solid #ffffff;
}

#awp-main-header .awp-header-trust-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

#awp-main-header .awp-header-trust-text strong {
  font-family: var(--awp-home-trust-bar-title-font-family, var(--font-family-heading, var(--font-family-base)));
  font-size: var(--awp-home-trust-bar-title-font-size, 10px);
  font-weight: var(--awp-home-trust-bar-title-font-weight, 700);
  font-stretch: var(--awp-home-trust-bar-title-font-stretch, normal);
  line-height: 1.85;
  letter-spacing: 0.08em;
  color: var(--awp-home-trust-bar-text, #f8fafc);
  white-space: nowrap;
}

/* Alt a??klama: en fazla 2 sat?r, ta?an k?s?m kesilir */
#awp-main-header .awp-header-trust-text span {
  font-family: var(--awp-home-trust-bar-subtitle-font-family, var(--font-family-base));
  font-size: var(--awp-home-trust-bar-subtitle-font-size, 10px);
  font-weight: var(--awp-home-trust-bar-subtitle-font-weight, 100);
  font-stretch: var(--awp-home-trust-bar-subtitle-font-stretch, normal);
  line-height: 1.3;
  color: var(--awp-home-trust-bar-subtitle, rgba(226, 232, 240, 0.92));
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

#awp-main-header .awp-header-cart-button .awp-cart-label,
#awp-main-header .awp-header-cart-button #awp-cart-total,
#awp-main-header .awp-header-cart-button #awp-cart-total-mobile {
  color: #fff !important;
}

/* Sepet ikonu koyu ba?l?k ?zerinde masa?st? ve mobilde daima okunakl? kals?n. */
#awp-main-header .awp-header-cart-button svg,
body.awp-scrolled #awp-main-header .awp-header-cart-button svg {
  color: #fff !important;
  stroke: #fff !important;
}

body.awp-scrolled #awp-main-header .awp-header-cart-button .icon-circle {
  background: rgba(255, 255, 255, 0.25) !important;
}

@media (max-width: 980px) {
  #awp-main-header .awp-header-main-nav .awp-header-inner {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  #awp-main-header .awp-header-brand {
    justify-content: center;
  }

  #awp-main-header .awp-header-main-nav .lang-btn {
    width: 50px !important;
    height: 36px !important;
    min-width: 50px !important;
    min-height: 36px !important;
  }

  #awp-main-header .admin-buttons-container {
    justify-content: center !important;
  }

  #awp-main-header .awp-header-service-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  #awp-main-header .awp-header-promo-bar {
    /* Admin ayarını koru; yalnızca boşsa 9px’e düş */
    font-size: var(--awp-home-promo-font-size, 9px);
    letter-spacing: 0.1em;
    padding: 8px 10px;
    min-height: 2.5rem;
    line-height: 1.5;
  }

  #awp-main-header.awp-modern-header:has(.awp-header-promo-bar)::after,
  #awp-main-header.awp-modern-header.awp-header-overlay-linear.awp-header-overlay-linear-to-bottom:not(.awp-header-bg-overlay-off):not(.awp-header-bg-solid):has(.awp-header-promo-bar)::after,
  #awp-main-header.awp-modern-header.awp-header-overlay-linear.awp-header-overlay-linear-to-top:not(.awp-header-bg-overlay-off):not(.awp-header-bg-solid):has(.awp-header-promo-bar)::after {
    top: 2.85rem;
  }

  #awp-main-header .awp-header-top-links {
    gap: 8px;
    letter-spacing: 0.05em;
    font-size: var(--awp-home-top-utility-font-size, 9px);
  }

  #awp-main-header .awp-header-top-status {
    display: none;
  }

  #awp-main-header .awp-header-hero {
    padding-top: 10px;
  }

  #awp-main-header #brand-description {
    /* Inline !important hero ayarı yoksa mobil fallback */
    font-size: var(--awp-hero-subtitle-font-size, 12px);
    padding: 0 6px;
  }

  #awp-main-header .awp-header-service-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  #awp-main-header .awp-header-service-image-wrap {
    height: 92px;
    min-height: 92px;
  }

  #awp-main-header .awp-header-service-content {
    min-height: 82px;
    padding: 8px;
    gap: 3px;
  }

  #awp-main-header .awp-header-service-content strong {
    font-size: var(--awp-home-service-title-font-size, 10px);
  }

  #awp-main-header .awp-header-service-content small {
    font-size: var(--awp-home-service-subtitle-font-size, 9px);
    min-height: 28px;
  }

  #awp-main-header .awp-header-service-price {
    font-size: 14px;
  }

  /* Trust bar: yine tek sat?r; i?erik s??mazsa yatay kayd?r */
  #awp-main-header .awp-header-trust-grid {
    gap: 6px 8px;
    padding-left: 2px;
    padding-right: 2px;
    justify-content: flex-start;
  }

  #awp-main-header .awp-header-trust-item {
    flex: 1 1 auto;
    min-width: 112px;
    justify-content: flex-start;
  }
}

/* Header: t?m metinler Inter fontu */
#awp-main-header,
#awp-main-header h1,
#awp-main-header #main-title,
#awp-main-header #brand-description,
#awp-main-header #subtitle,
#awp-main-header .lang-switcher,
#awp-main-header .lang-switcher .text-white,
#awp-main-header .currency-toggle-wrapper span,
#awp-main-header .awp-cart-label,
#awp-main-header .admin-settings-btn span,
#awp-main-header .admin-logout-btn span,
#awp-main-header .calculator-tab-text-line {
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif !important;
}

/* Desktop header y?ksekli?i ? en az 500px (sabit hero hissi) */
@media (min-width: 769px) {
  #awp-main-header {
    min-height: 500px;
  }
}

/* Main title styles */
#main-title {
  color: white !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
  line-height: 1.3 !important;
  max-width: 100% !important;
  font-weight: 900 !important;
}

#footer-hours {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#footer-hours-title {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ============================================
   Styles moved from calculator.php template
   ============================================ */

/* Base Reset */
#awp-printwise-root * {
  box-sizing: border-box;
}
/* SVG icons */
label svg,
.calculator-menu-item svg,
h2 svg,
h3 svg,
a svg,
button svg {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  display: inline-block;
}

/* Labels as flex containers */
label.block,
#label-print-type {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Left-aligned labels without icons */
#label-pages,
#label-quantity,
#label-binding {
  display: block;
  text-align: left;
}

/* Number Input Spinner Controls - Hidden */
/* Base styles for all number inputs */
#awp-printwise-root input[type="number"],
input[type="number"].input-shared,
input[type="number"].modern-input,
input[type="number"] {
  /* Hide spinner by default in Firefox */
  -moz-appearance: textfield;
  appearance: textfield;
  /* Reset padding since we don't need space for spinners */
  padding-right: 12px !important;
}

/* Hide spinner by default and on focus */
#awp-printwise-root input[type="number"]::-webkit-inner-spin-button,
#awp-printwise-root input[type="number"]::-webkit-outer-spin-button,
input[type="number"].input-shared::-webkit-inner-spin-button,
input[type="number"].input-shared::-webkit-outer-spin-button,
input[type="number"].modern-input::-webkit-inner-spin-button,
input[type="number"].modern-input::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button,
#awp-printwise-root
  input[type="number"]:focus::-webkit-inner-spin-button,
#awp-printwise-root
  input[type="number"]:focus::-webkit-outer-spin-button,
input[type="number"].input-shared:focus::-webkit-inner-spin-button,
input[type="number"].input-shared:focus::-webkit-outer-spin-button,
input[type="number"].modern-input:focus::-webkit-inner-spin-button,
input[type="number"].modern-input:focus::-webkit-outer-spin-button,
input[type="number"]:focus::-webkit-inner-spin-button,
input[type="number"]:focus::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
  display: none !important;
  opacity: 0 !important;
}

/* Mobile optimizations - App-like Compact UI (sadece #awp-printwise-root i?i) */
@media (max-width: 640px) {
  #awp-printwise-root input,
  #awp-printwise-root select,
  #awp-printwise-root button,
  #awp-printwise-root textarea {
    font-size: 13px !important;
    min-height: 36px;
  }

  /* Number input spinner - Hidden on mobile too */
  #awp-printwise-root input[type="number"],
  input[type="number"].input-shared,
  input[type="number"].modern-input,
  input[type="number"] {
    padding-right: 12px !important;
  }

  #awp-printwise-root input[type="number"]::-webkit-inner-spin-button,
  #awp-printwise-root input[type="number"]::-webkit-outer-spin-button,
  input[type="number"].input-shared::-webkit-inner-spin-button,
  input[type="number"].input-shared::-webkit-outer-spin-button,
  input[type="number"].modern-input::-webkit-inner-spin-button,
  input[type="number"].modern-input::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button,
  #awp-printwise-root
    input[type="number"]:focus::-webkit-inner-spin-button,
  #awp-printwise-root
    input[type="number"]:focus::-webkit-outer-spin-button,
  input[type="number"].input-shared:focus::-webkit-inner-spin-button,
  input[type="number"].input-shared:focus::-webkit-outer-spin-button,
  input[type="number"].modern-input:focus::-webkit-inner-spin-button,
  input[type="number"].modern-input:focus::-webkit-outer-spin-button,
  input[type="number"]:focus::-webkit-inner-spin-button,
  input[type="number"]:focus::-webkit-outer-spin-button {
    display: none !important;
    -webkit-appearance: none !important;
  }

  .lang-buttons-container {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
  }

  .lang-btn {
    width: 80px !important;
    height: 60px !important;
    min-width: 80px !important;
    min-height: 60px !important;
    padding: 0 !important;
    border-radius: 6px !important;
  }

  .lang-btn img[id^="flag-"] {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    flex-shrink: 0;
  }

  .lang-btn span {
    display: none !important;
  }

  /* Print type buttons - ensure grid works on mobile */
  .grid.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* LANGUAGE SWITCHER - App-like Compact UI
   -------------------------------------------- */
.lang-switcher {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  transition:
    background 0.3s ease,
    backdrop-filter 0.3s ease,
    opacity 0.4s ease;
}

/* Hide scrollbar for all browsers */
.lang-switcher::-webkit-scrollbar {
  display: none;
}

/* Sticky men? body'ye ta??n?nca layout kaymas?n ? header'daki bo?luk placeholder ile doldurulur (JS) */
.lang-switcher-placeholder {
  display: block !important;
  flex-shrink: 0;
  visibility: hidden;
  pointer-events: none;
  box-sizing: border-box;
}

/* Sticky: yumu?ak ini?/kalk?? ? transform translateY + opacity, uzun easing */
.lang-switcher.sticky {
  position: fixed !important;
  top: 0 !important;
  left: 50% !important;
  right: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  z-index: 99999 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  padding: 0.5rem 1rem !important;
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  justify-content: center !important;
  /* transform: JS ile animate edilir (translateX -50% + translateY) */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05)
  ) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  /* Yumu?ak ini?/kalk??: 0.6s ease-out curve */
  transition:
    transform 0.6s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.5s ease !important;
}

.lang-switcher.sticky .currency-toggle-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.lang-switcher.sticky .currency-toggle-switch {
  margin: 0 auto !important;
  align-self: center !important;
}

/* Hide sticky header on small mobile screens only (not tablet/desktop) */
@media (max-width: 480px) {
  .lang-switcher.sticky {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/*
 * NOT: #awp-printwise-root * { position: relative } kullan?lmamal? ? t?m alt ??elere
 * relative vermek .currency-toggle-circle { position: absolute } ile ?ak???r (?zg?ll?k)
 * ve para birimi anahtar? ile rulo bilgi paneli d?zenini bozar.
 */
#awp-printwise-root {
  position: relative;
}

#awp-printwise-root .lang-switcher.sticky,
main .lang-switcher.sticky,
body .lang-switcher.sticky {
  position: fixed !important;
  z-index: 99999 !important;
}

/* Mobile responsive (Samsung S24 hedefli) - 2 sat?r grid, agresif k???ltme */
@media (max-width: 768px) {
  /* Mobilde inline style'lar? ez: 2 sat?r grid sistemi */
  .lang-switcher,
  .lang-switcher.sticky {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 8px 10px !important;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "flags toggle"
      "admin admin";
    column-gap: 8px !important;
    row-gap: 8px !important;
    align-items: center !important;
    justify-items: center !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    border-radius: 0 !important;
  }

  .lang-buttons-container {
    grid-area: flags;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    width: 100% !important;
  }

  /* Bayraklar - agresif k???lt (S24 i?in) */
  .lang-btn {
    width: 32px !important;
    height: 24px !important;
    min-width: 32px !important;
    min-height: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
  }

  /* Eski mobil kurallar img'yi absolute yapabiliyor; mobilde s?f?rla */
  .lang-btn img[id^="flag-"] {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Currency toggle - mobil i?in yeniden tasarland? */
  .currency-toggle-wrapper {
    grid-area: toggle;
    flex-shrink: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0.35rem 0.5rem !important;
    margin: 0 !important;
    gap: 3px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .currency-toggle-wrapper .currency-toggle-switch {
    margin: 0 auto !important;
    align-self: center !important;
  }

  .currency-toggle-wrapper span {
    font-size: 8px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .currency-toggle-switch {
    width: 48px !important;
    height: 24px !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
  }

  /* Currency toggle switch - now uses circle instead of handle */

  /* Admin butonlar? - ikon-only, k???lt */
  .admin-buttons-container {
    grid-area: admin;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  /* Mobilde ikon-only: alan kazand?r */
  .admin-settings-btn span,
  .admin-logout-btn span,
  .awp-customer-account-btn span,
  .awp-customer-register-btn span {
    display: none !important;
  }

  .admin-settings-btn,
  .admin-logout-btn,
  .awp-customer-account-btn,
  .awp-customer-register-btn {
    padding: 6px 8px !important;
    height: 40px !important;
    min-height: 40px !important;
    flex-shrink: 0 !important;
    border-radius: 6px !important;
  }

  .icon-circle {
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
  }

  .admin-settings-btn svg,
  .admin-logout-btn svg,
  .awp-customer-account-btn svg,
  .awp-customer-register-btn svg {
    width: 16px !important;
    height: 16px !important;
  }
}

.lang-buttons-container {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 !important;
  margin: 0 !important;
}

.lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 48px;
  min-width: 64px;
  min-height: 48px;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(0);
}

.lang-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.lang-btn img[id^="flag-"] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  transition: transform 0.3s ease;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.lang-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.35);
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

.lang-btn:hover::before {
  opacity: 1;
}

.lang-btn:hover img[id^="flag-"] {
  transform: scale(1.05);
}

.lang-btn:active {
  transform: translateY(0);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.1),
    inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.lang-btn.active,
.lang-btn[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(16px) saturate(200%);
  -webkit-backdrop-filter: blur(16px) saturate(200%);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow:
    0 8px 20px rgba(59, 130, 246, 0.2),
    0 0 0 2px rgba(255, 255, 255, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    inset 0 -2px 0 rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

.lang-btn.active::before,
.lang-btn[aria-pressed="true"]::before {
  opacity: 1;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
}

.lang-btn.active img[id^="flag-"],
.lang-btn[aria-pressed="true"] img[id^="flag-"] {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}

.lang-switcher .currency-toggle-wrapper {
  padding: 0.5rem 0.75rem !important;
  margin: 0 !important;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(15, 23, 42, 0.4);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Admin Buttons Container */
.admin-buttons-container {
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#awp-main-header .awp-header-main-nav .admin-settings-btn,
#awp-main-header .awp-header-main-nav .admin-logout-btn,
#awp-main-header .awp-header-main-nav .awp-customer-account-btn,
#awp-main-header .awp-header-main-nav .awp-customer-register-btn {
  height: 40px !important;
  min-height: 40px !important;
  align-self: center !important;
}

.admin-settings-btn,
.admin-logout-btn,
.awp-customer-account-btn,
.awp-customer-register-btn {
  padding: 6px 10px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}

#admin-logout-btn {
  background: rgba(127, 29, 29, 0.8) !important;
}

#admin-settings-btn {
  background: rgba(127, 29, 29, 0.8) !important;
}

/* FILE UPLOAD - Banking/SaaS style: progress bar + preview + X
   -------------------------------------------- */
.awp-file-upload-item {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: #fff;
}

.awp-file-upload-progress {
  width: 100%;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.awp-file-progress-bar {
  height: 10px;
  background: #e5e7eb;
  border-radius: 6px;
  overflow: hidden;
}

.awp-file-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #3b82f6, #6366f1);
  border-radius: 6px;
  transition: width 0.08s ease-out;
}

.awp-file-progress-label {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}

.awp-file-upload-preview {
  width: 72px;
  height: 72px;
  min-width: 72px;
  min-height: 72px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 72px;
}

.awp-file-preview-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 6px;
}

.awp-file-preview-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.awp-file-preview-pdf {
  width: 100%;
  height: 100%;
  border: none;
  pointer-events: none;
}

.awp-file-preview-icon {
  color: #6366f1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.awp-file-preview-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  aspect-ratio: 1;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  line-height: 0;
  box-sizing: border-box;
  transition: background 0.2s, transform 0.2s;
  z-index: 2;
}

.awp-file-preview-remove svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.awp-file-preview-remove:hover {
  background: #dc2626;
  transform: scale(1.08);
}

/* BELGE KAYNA?I | ?ZEL TAL?MATLAR ? Simetrik hizalama (ba?l?k, alt ba?l?k, input alanlar? yatay ?izgilerde) */
.awp-form-bottom-grid {
  --awp-bottom-field-h: 96px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Ba?l?k / a??klama / input sat?rlar? ? input sat?r?nda iki s?tun ayn? y?kseklikte (alt kenar hizas?) */
  grid-template-rows: auto auto auto;
  gap: 0 16px;
  row-gap: 8px;
  align-items: stretch;
}

.awp-form-bottom-grid .awp-form-bottom-label {
  display: block;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #111827;
  margin: 0 0 4px 0;
  line-height: 1.25;
}

/* Mod?l ba?l?k stillerini koru (ders-notu, rulo, dijital) */
#tab-content-ders-notu .awp-form-bottom-grid .awp-form-bottom-label {
  font-family: var(--dn-form-label-font) !important;
  font-size: var(--dn-form-label-size) !important;
  font-weight: var(--dn-form-label-weight) !important;
  color: var(--dn-form-label-color);
}

#tab-content-rulo-baski .awp-form-bottom-grid .awp-form-bottom-label {
  font-family: var(--rulo-form-label-font) !important;
  font-size: var(--rulo-form-label-size) !important;
  font-weight: var(--rulo-form-label-weight) !important;
  color: var(--rulo-form-label-color) !important;
}

#tab-content-dijital-baski .awp-form-bottom-grid .awp-form-bottom-label {
  font-family: var(--dijital-form-label-font) !important;
  font-size: var(--dijital-form-label-size) !important;
  font-weight: var(--dijital-form-label-weight) !important;
  color: var(--dijital-form-label-color) !important;
}

#tab-content-katalog .awp-form-bottom-grid .awp-form-bottom-label {
  font-family: var(--katalog-form-label-font) !important;
  font-size: var(--katalog-form-label-size) !important;
  font-weight: var(--katalog-form-label-weight) !important;
  color: var(--katalog-form-label-color) !important;
}

#awp-printwise-root.awp-form-engine-page .awp-form-bottom-grid .awp-form-bottom-label {
  font-family: var(--dn-form-label-font) !important;
  font-size: var(--dn-form-label-size) !important;
  font-weight: var(--dn-form-label-weight) !important;
  color: var(--dn-form-label-color);
}

.awp-form-bottom-grid .awp-form-bottom-desc {
  font-size: 10px;
  color: #4b5563;
  margin: 0;
  line-height: 1.25;
  min-height: 1.25rem;
}

#awp-printwise-root.awp-form-engine-page .awp-form-bottom-grid .awp-form-bottom-desc {
  font-family: var(--dn-form-label-font) !important;
  font-size: var(--dn-form-desc-size) !important;
  font-weight: var(--dn-form-desc-weight) !important;
  color: var(--dn-form-desc-color);
}

.awp-form-bottom-grid .awp-form-bottom-input-wrap {
  min-height: var(--awp-bottom-field-h);
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
}

.awp-form-bottom-grid .awp-form-bottom-input-wrap .awp-form-file-upload,
.awp-form-bottom-grid .awp-form-bottom-input-wrap .module-ders-notu-upload-zone,
.awp-form-bottom-grid .awp-form-bottom-input-wrap .module-rulo-baski-upload-zone,
.awp-form-bottom-grid .awp-form-bottom-input-wrap .module-dijital-baski-upload-zone {
  flex: 1 1 auto;
  height: var(--awp-bottom-field-h) !important;
  min-height: var(--awp-bottom-field-h) !important;
  max-height: var(--awp-bottom-field-h) !important;
  padding: 8px 12px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-sizing: border-box;
}

.awp-form-bottom-grid .awp-form-bottom-input-wrap .awp-form-file-upload svg,
.awp-form-bottom-grid .awp-form-bottom-input-wrap .module-ders-notu-upload-zone svg,
.awp-form-bottom-grid .awp-form-bottom-input-wrap .module-rulo-baski-upload-zone svg,
.awp-form-bottom-grid .awp-form-bottom-input-wrap .module-dijital-baski-upload-zone svg {
  width: 28px !important;
  height: 28px !important;
  margin: 0 0 2px !important;
  flex-shrink: 0;
}

.awp-form-bottom-grid .awp-form-bottom-input-wrap .awp-form-file-upload p,
.awp-form-bottom-grid .awp-form-bottom-input-wrap .module-ders-notu-upload-zone p,
.awp-form-bottom-grid .awp-form-bottom-input-wrap .module-rulo-baski-upload-zone p,
.awp-form-bottom-grid .awp-form-bottom-input-wrap .module-dijital-baski-upload-zone p {
  margin: 0 !important;
  line-height: 1.2;
}

.awp-form-bottom-grid .awp-form-bottom-input-wrap textarea,
.awp-form-bottom-grid .awp-form-bottom-input-wrap .module-ders-notu-instructions,
.awp-form-bottom-grid .awp-form-bottom-input-wrap .module-rulo-baski-instructions,
.awp-form-bottom-grid .awp-form-bottom-input-wrap .module-dijital-baski-instructions {
  flex: 1 1 auto;
  height: var(--awp-bottom-field-h) !important;
  min-height: var(--awp-bottom-field-h) !important;
  box-sizing: border-box;
  width: 100%;
  resize: vertical;
  align-self: stretch;
}

/* Bo?ken mt-3 y?kleme kutusu ile textarea alt?n? hizalam?yordu; bo?lu?u yaln?zca dosya varken ver */
.awp-form-bottom-grid .awp-form-bottom-uploaded-files {
  margin-top: 0 !important;
  flex-shrink: 0;
}

.awp-form-bottom-grid .awp-form-bottom-uploaded-files:empty {
  display: none !important;
}

.awp-form-bottom-grid .awp-form-bottom-uploaded-files:not(:empty) {
  margin-top: 0.75rem !important;
}

.awp-form-bottom-uploaded-files {
  grid-column: 1;
}

.awp-form-bottom-grid .awp-form-bottom-uploaded-files {
  display: flex;
  flex-wrap: wrap;
}

/* Y?kleme alan? ile kartlar aras? simetrik bo?luk - container tam geni?lik
   Not: .awp-form-bottom-uploaded-files burada yok; alt gridde bo?luk ?stteki !important kurallar?yla y?netilir */
.awp-form-file-upload + .dn-uploaded-files-list,
.awp-form-file-upload + .rulo-uploaded-files-list,
.awp-form-file-upload + .dijital-uploaded-files-list,
#upload-area + #uploaded-files,
#upload-area + [id$="-uploaded-files"] {
  margin-top: 1rem;
  width: 100%;
}

#uploaded-files,
.dn-uploaded-files-list,
.rulo-uploaded-files-list,
.dijital-uploaded-files-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}

/* Progress bar: y?kleme alan? ile ayn? geni?likte */
.awp-file-upload-progress {
  width: 100%;
  flex: 0 0 100%;
  box-sizing: border-box;
}

/* Kartlar - sabit boyut, ayn? hizada */
.awp-file-upload-preview {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
}

/* Ders Notu BELGE KAYNA?I: #upload-area ile ID ?ak??mas?n ? tam s?tun geni?li?i */
#awp-printwise-root #dn-upload-area-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  align-self: stretch;
}

#awp-printwise-root #dn-upload-area-wrap .module-ders-notu-upload-zone {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* FILE UPLOAD AREA (mobil m??teri modal? ? #mobile-customer-modal #upload-area)
   -------------------------------------------- */
#upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-align: center;
}

#upload-description,
#upload-hint {
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(0.85rem, 3.4vw, 0.95rem);
  line-height: 1.5;
  word-break: break-word;
}

#upload-description {
  font-weight: 500;
  color: #111827;
}

#upload-hint {
  color: #6b7280;
}

#btn-upload {
  width: auto !important;
  min-width: clamp(9rem, 50vw, 12rem);
  height: auto !important;
  padding: 0.7rem 1.6rem !important;
  border-radius: 999px !important;
  background-image: none !important;
  background-color: #ff8300 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: none !important;
  font-family: inherit !important;
  cursor: pointer !important;
  position: relative !important;
  gap: 0.5rem;
  font-weight: 900;
  font-size: clamp(0.9rem, 3.4vw, 1rem);
  box-shadow: 0 8px 18px rgba(255, 131, 0, 0.45);
  margin-left: auto !important;
  pointer-events: auto !important;
  overflow: hidden !important;
}

#btn-upload-wrapper {
  position: relative !important;
  display: inline-block !important;
  z-index: 10 !important;
}

/* G?rsel Buton Stili */
#btn-upload-visual {
  width: auto !important;
  min-width: clamp(9rem, 50vw, 12rem) !important;
  height: auto !important;
  padding: 0.7rem 1.6rem !important;
  border-radius: 999px !important;
  background: linear-gradient(to right, #667eea, #764ba2) !important;
  background-color: #ff8300 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: clamp(0.9rem, 3.4vw, 1rem) !important;
  box-shadow: 0 8px 18px rgba(255, 131, 0, 0.45) !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

/* Gizli #fileInput (body sonunda) ? ASLA tam ekran kaplamas?n; t?klama JS fileInput.click() ile */
#fileInput {
  position: fixed !important;
  left: -9999px !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  max-width: 1px !important;
  max-height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: default !important;
  display: block !important;
  font-size: 0 !important;
}

/* Mobil optimizasyon */
@media (max-width: 640px) {
  #btn-upload-visual {
    min-width: 140px !important;
    max-width: 200px !important;
    height: 44px !important;
    font-size: 0.875rem !important;
    margin-right: auto !important;
  }
}

#btn-upload:hover {
  background-color: #e56f00 !important;
  box-shadow: 0 10px 22px rgba(255, 131, 0, 0.55);
}

#btn-upload:active {
  transform: translateY(1px);
  box-shadow: 0 4px 10px rgba(255, 131, 0, 0.45);
}

#btn-upload-text {
  white-space: nowrap;
}

/* Mobil i?in Y?kle butonu d?zenlemeleri */
@media (max-width: 640px) {
  #btn-upload {
    width: auto !important;
    min-width: 140px !important;
    max-width: 200px !important;
    height: 44px !important;
    padding: 0.6rem 1.2rem !important;
    margin: 1rem auto 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    font-size: 0.875rem !important;
    font-weight: 900 !important;
    box-shadow: 0 6px 14px rgba(255, 131, 0, 0.4) !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  #btn-upload:active {
    transform: scale(0.98) !important;
    box-shadow: 0 4px 10px rgba(255, 131, 0, 0.35) !important;
  }

  #btn-upload-text {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    white-space: nowrap !important;
  }

  /* Upload area mobilde daha kompakt */
  #upload-area {
    padding: 1.5rem 1rem !important;
    min-height: auto !important;
  }

  #upload-area svg {
    width: 3rem !important;
    height: 3rem !important;
  }
}

/* #uploaded-files grid stili yukar?da tan?ml? - .dn-uploaded-files-list ile birlikte */

/* PRIMARY ACTION BUTTONS
   -------------------------------------------- */
#btn-submit-order,
#btn-pdf-action {
  background-image: none !important;
  background-color: #ff8300 !important;
  border-radius: 100px !important;
  box-shadow: 0 9px 20px rgba(255, 131, 0, 0.45) !important;
  padding-block: 0.9rem !important;
  padding-inline: 1.5rem !important;
  min-height: clamp(48px, 11vw, 56px) !important;
  font-size: clamp(0.95rem, 3.4vw, 1.02rem) !important;
  letter-spacing: normal !important;
}

#btn-submit-order span,
#btn-pdf-action span,
#btn-submit-order *,
#btn-pdf-action * {
  letter-spacing: normal !important;
}

#btn-submit-order:hover,
#btn-pdf-action:hover {
  background-color: #e56f00 !important;
  box-shadow: 0 11px 24px rgba(255, 131, 0, 0.55) !important;
}

#btn-submit-order:active,
#btn-pdf-action:active {
  transform: translateY(1px);
  box-shadow: 0 5px 12px rgba(255, 131, 0, 0.5) !important;
}

@media (max-width: 640px) {
  #awp-printwise-root .grid.grid-cols-1.sm\:grid-cols-2.gap-3 {
    row-gap: 0.75rem;
  }
}

/* Dark background text */
.bg-gradient-to-r h2,
.bg-gradient-to-r h3,
.bg-gradient-to-r h4 {
  color: white !important;
}

/* Input fields - ensure consistent font size */
#pageCount,
#quantity,
#bindingType,
#customerFirstName,
#customerLastName,
#customerPhone,
#customerEmail {
  font-size: 16px !important;
}

/* Select dropdown styling */
#bindingType {
  color: #111 !important;
  background: white !important;
}

/* Footer border section visibility */
.border-t.border-gray-700.pt-6 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Visually hidden - consolidated above with .sr-only */

/* Tab Navigation Styles - Horizontal Grid Layout with Icon-First Design */
/* App-like Compact UI: 5 kolon (4 mod?l + 1 ?r?n market) */
.calculator-tabs-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5 kolon: 4 mod?l + 1 ?r?n market */
  gap: 8px;
  margin-bottom: 16px;
  padding: 8px;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

/* WooCommerce yoksa 4 kolon */
.calculator-tabs-grid:not(:has(#tab-urunler)) {
  grid-template-columns: repeat(4, 1fr);
}

.calculator-tab-btn-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 8px;
  margin: 0;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  min-height: auto;
  height: auto;
  width: 100%;
  box-sizing: border-box;
  will-change: transform;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: visible;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Icon-first design - Compact UI */
.calculator-tab-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-bottom: 2px;
}

.calculator-tab-icon {
  width: 78px;
  height: 78px;
  min-width: 78px;
  min-height: 78px;
  max-width: 78px;
  max-height: 78px;
  object-fit: scale-down;
  display: block;
  will-change: transform;
  transition: transform 0.2s ease;
}

/* Text wrapper - Secondary to icons */
.calculator-tab-text-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.0625rem;
  width: 100%;
  text-align: center;
}

.calculator-tab-text-line {
  display: block;
  font-family:
    "Inter",
    "Roboto",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-weight: 900;
  font-size: 0.75rem;
  line-height: 1.15;
  color: white;
  white-space: nowrap;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* Color variants for each button */
#tab-ders-notu {
  background-color: #10b981 !important;
}

#tab-rulo-baski {
  background-color: #3b82f6 !important;
}

#tab-dijital-baski {
  background-color: #ef4444 !important;
}

#tab-katalog {
  background-color: #ec4899 !important;
}

/* ?r?n Market - Soft amber/turuncu renk (mod?l renklerinden farkl?) */
#tab-urunler {
  background-color: #f59e0b !important; /* Soft amber - mod?l renklerinden farkl? */
}

/* Hover effects - App-like Compact UI (subtle) */
.calculator-tab-btn-grid:hover {
  transform: scale(1.02);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  filter: brightness(1.05);
}

.calculator-tab-btn-grid:hover .calculator-tab-icon {
  transform: scale(1.05);
}

/* Active state - Compact UI */
.calculator-tab-btn-grid.active {
  transform: scale(1.01);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  filter: brightness(1.08);
  border-color: rgba(255, 255, 255, 0.4);
}

.calculator-tab-btn-grid.active .calculator-tab-icon {
  transform: scale(1.08);
}

/* Focus - klavye erisimi icin belirgin ring */
.calculator-tab-btn-grid:focus-visible {
  outline: none;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.15),
    0 0 0 3px rgba(59, 130, 246, 0.5);
  border-color: rgba(59, 130, 246, 0.6);
}

/* Active state - Pressed effect */
.calculator-tab-btn-grid:active {
  transform: scale(0.98);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.calculator-tab-btn-grid:active .calculator-tab-icon {
  transform: scale(1.02);
}

/* Responsive adjustments - App-like Compact UI */
@media (max-width: 640px) {
  .calculator-tabs-grid {
    grid-template-columns: repeat(
      5,
      1fr
    ) !important; /* 5 kolon: 4 mod?l + 1 ?r?n market */
    gap: 6px;
    padding: 8px;
    margin-bottom: 12px;
  }

  /* WooCommerce yoksa mobilde de 4 kolon */
  .calculator-tabs-grid:not(:has(#tab-urunler)) {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  .calculator-tab-btn-grid {
    padding: 10px 6px;
    gap: 4px;
    margin: 0;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    width: 100%;
    min-height: 64px;
    background-color: inherit !important;
  }

  .calculator-tab-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
  }

  .calculator-tab-icon-wrapper {
    min-height: 40px;
    margin-bottom: 0.25rem;
  }

  .calculator-tab-text-line {
    font-size: 0.6rem;
    line-height: 1.1;
  }

  .calculator-tab-btn-grid.active {
    border-color: rgba(255, 255, 255, 0.6) !important;
    box-shadow:
      0 6px 20px rgba(0, 0, 0, 0.3),
      0 2px 8px rgba(0, 0, 0, 0.2),
      inset 0 2px 0 rgba(255, 255, 255, 0.4) !important;
    transform: scale(1.02) !important;
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.35),
      rgba(255, 255, 255, 0.25)
    ) !important;
  }

  .calculator-tab-btn-grid .calculator-tab-text-line {
    font-weight: 900 !important;
    text-shadow:
      0 1px 2px rgba(0, 0, 0, 0.4),
      0 0 8px rgba(255, 255, 255, 0.3) !important;
    color: rgba(255, 255, 255, 0.95) !important;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .calculator-tab-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
  }

  .calculator-tab-icon-wrapper {
    min-height: 40px;
  }
}

/* Dijital Subtype Content - Smooth transitions to prevent layout shift */
.dijital-subtype-content,
#dijital-baski-form-content,
#kartvizit-form-content,
#brosur-form-content {
  transition: opacity 0.15s ease-in-out !important;
  will-change: opacity;
}

/* Hidden state */
.dijital-subtype-content:not(.active),
#dijital-baski-form-content:not(.active),
#kartvizit-form-content:not(.active),
#brosur-form-content:not(.active) {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Active state */
.dijital-subtype-content.active,
#dijital-baski-form-content.active,
#kartvizit-form-content.active,
#brosur-form-content.active {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Performance optimizations */
.calculator-tabs-grid {
  contain: layout style paint;
}

.calculator-tab-btn-grid {
  contain: layout style paint;
}

.calculator-tab-icon {
  contain: strict;
}

/* Currency Selector Styles */
.currency-selector {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.currency-btn {
  transition: all 0.2s ease;
}

.currency-btn.active {
  background-color: rgba(255, 255, 255, 0.3) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Currency Unit Styles - Half size of parent */
.currency-unit {
  font-size: 0.5em !important;
  vertical-align: baseline;
  opacity: 0.9;
  display: inline-block;
  line-height: 1;
  font-weight: 500;
}

.calculator-tab-btn {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  padding: 12px 20px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 14px;
  position: relative;
  z-index: 10;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  flex: 0 1 auto;
}

.calculator-tab-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.calculator-tab-btn.active {
  background: rgba(255, 255, 255, 0.35);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px);
}

.calculator-tab-content {
  display: none !important;
}

.calculator-tab-content.active {
  display: block !important;
}

/* content-visibility kald?r?ld?: aktif sekmede ilk boyamada ?i?erik ?er?evede / sonra geni?liyor? fla??na yol a??yordu */

/* Currency Toggle Switch Styles */
.currency-toggle-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 10px !important;
  margin: 0 !important;
}

.currency-toggle-wrapper span {
  font-size: 10px !important;
}

.currency-toggle-switch {
  /* switch */
  --switch-width: 46px;
  --switch-height: 24px;
  --switch-bg: rgb(131, 131, 131);
  --switch-checked-bg: #1676df;
  --switch-offset: calc((var(--switch-height) - var(--circle-diameter)) / 2);
  --switch-transition: all 0.2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
  /* circle */
  --circle-diameter: 18px;
  --circle-bg: #fff;
  --circle-shadow: 1px 1px 2px rgba(146, 146, 146, 0.45);
  --circle-checked-shadow: -1px 1px 2px rgba(163, 163, 163, 0.45);
  --circle-transition: var(--switch-transition);
  /* icon */
  --icon-transition: all 0.2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
  --icon-cross-color: var(--switch-bg);
  --icon-cross-size: 6px;
  --icon-checkmark-color: var(--switch-checked-bg);
  --icon-checkmark-size: 10px;
  /* effect line */
  --effect-width: calc(var(--circle-diameter) / 2);
  --effect-height: calc(var(--effect-width) / 2 - 1px);
  --effect-bg: var(--circle-bg);
  --effect-border-radius: 1px;
  --effect-transition: all 0.2s ease-in-out;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: var(--switch-width);
  height: var(--switch-height);
  flex-shrink: 0;
  overflow: visible;
  margin: 0 auto;
}

.currency-toggle-switch input {
  display: none;
}

.currency-toggle-circle svg {
  -webkit-transition: var(--icon-transition);
  -o-transition: var(--icon-transition);
  transition: var(--icon-transition);
  position: absolute;
  top: 50%;
  left: 50%;
  height: auto;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.currency-toggle-circle .currency-toggle-checkmark {
  width: var(--icon-checkmark-size);
  height: var(--icon-checkmark-size);
  color: var(--icon-checkmark-color);
  -webkit-transform: translate(-50%, -50%) scale(0);
  -ms-transform: translate(-50%, -50%) scale(0);
  transform: translate(-50%, -50%) scale(0);
}

.currency-toggle-circle .currency-toggle-cross {
  width: var(--icon-cross-size);
  height: var(--icon-cross-size);
  color: var(--icon-cross-color);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.currency-toggle-slider {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: var(--switch-width);
  height: var(--switch-height);
  background: var(--switch-bg);
  border-radius: 999px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  -webkit-transition: var(--switch-transition);
  -o-transition: var(--switch-transition);
  transition: var(--switch-transition);
  cursor: pointer;
  margin: 0;
}

.currency-toggle-circle {
  width: var(--circle-diameter);
  height: var(--circle-diameter);
  background: var(--circle-bg);
  border-radius: 50%;
  -webkit-box-shadow: var(--circle-shadow);
  box-shadow: var(--circle-shadow);
  -webkit-transition: var(--circle-transition);
  -o-transition: var(--circle-transition);
  transition: var(--circle-transition);
  z-index: 1;
  position: absolute;
  left: var(--switch-offset);
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

/* Currency toggle handle - alias for currency-toggle-circle */
.currency-toggle-handle {
  width: var(--circle-diameter);
  height: var(--circle-diameter);
  background: var(--circle-bg);
  border-radius: 50%;
  -webkit-box-shadow: var(--circle-shadow);
  box-shadow: var(--circle-shadow);
  -webkit-transition: var(--circle-transition);
  -o-transition: var(--circle-transition);
  transition: var(--circle-transition);
  z-index: 1;
  position: absolute;
  left: var(--switch-offset);
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

.currency-toggle-slider::before {
  content: "";
  position: absolute;
  width: var(--effect-width);
  height: var(--effect-height);
  left: calc(var(--switch-offset) + (var(--effect-width) / 2));
  background: var(--effect-bg);
  border-radius: var(--effect-border-radius);
  -webkit-transition: var(--effect-transition);
  -o-transition: var(--effect-transition);
  transition: var(--effect-transition);
}

/* actions */

.currency-toggle-switch input:checked + .currency-toggle-slider {
  background: var(--switch-checked-bg);
}

.currency-toggle-switch
  input:checked
  + .currency-toggle-slider
  .currency-toggle-circle
  .currency-toggle-checkmark {
  -webkit-transform: translate(-50%, -50%) scale(1);
  -ms-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
}

.currency-toggle-switch
  input:checked
  + .currency-toggle-slider
  .currency-toggle-circle
  .currency-toggle-cross {
  -webkit-transform: translate(-50%, -50%) scale(0);
  -ms-transform: translate(-50%, -50%) scale(0);
  transform: translate(-50%, -50%) scale(0);
}

.currency-toggle-switch input:checked + .currency-toggle-slider::before {
  left: calc(
    100% - var(--effect-width) - (var(--effect-width) / 2) -
      var(--switch-offset)
  );
}

.currency-toggle-switch
  input:checked
  + .currency-toggle-slider
  .currency-toggle-circle,
.currency-toggle-switch
  input:checked
  + .currency-toggle-slider
  .currency-toggle-handle {
  left: calc(100% - var(--circle-diameter) - var(--switch-offset));
  -webkit-box-shadow: var(--circle-checked-shadow);
  box-shadow: var(--circle-checked-shadow);
  transform: translateY(-50%);
}

/* Klasik modda 6 alt tip butonu i?in sat?r ba??na daha esnek grid */
.calculator-tabs-grid[data-subtype-grid="true"] {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1rem; /* Aralar? a??ld? */
  padding: 1rem; /* Padding geni?letildi */
  margin-bottom: 1rem;
  justify-content: center;
  max-width: 100%;
  overflow: visible !important;
}
@media (min-width: 901px) {
  #tab-content-dijital-baski .calculator-tabs-grid[data-subtype-grid="true"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Alt tip butonlar? i?in daha k???k ikonlar */
.calculator-tabs-grid[data-subtype-grid="true"] .calculator-tab-icon-wrapper {
  min-height: 64px;
  margin-bottom: 0.25rem;
}

.calculator-tabs-grid[data-subtype-grid="true"] .calculator-tab-icon {
  width: 64px;
  height: 64px;
  min-width: 64px;
  min-height: 64px;
  max-width: 64px;
  max-height: 64px;
}

/* Kartvizit ve Bro??r butonlar? i?in b?y?k ikonlar */
#btn-kartvizit .calculator-tab-icon-wrapper,
#btn-brosur .calculator-tab-icon-wrapper {
  min-height: 80px !important;
  margin-bottom: 0.5rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

#btn-dijital-baski-default .calculator-tab-icon,
#btn-kartvizit .calculator-tab-icon,
#btn-brosur .calculator-tab-icon {
  width: 134px !important;
  height: 134px !important;
  min-width: 134px !important;
  min-height: 134px !important;
  max-width: 134px !important;
  max-height: 134px !important;
  right: -25px;
}

#btn-dijital-baski-default .calculator-tab-icon-wrapper,
#btn-kartvizit .calculator-tab-icon-wrapper,
#btn-brosur .calculator-tab-icon-wrapper {
  min-height: 64px !important;
}

/* Kartvizit ve Bro??r label'lar? i?in d?zenleme */
#btn-kartvizit .calculator-tab-text-wrapper,
#btn-brosur .calculator-tab-text-wrapper {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Alt tip butonlar? i?in daha k???k padding */
.calculator-tabs-grid[data-subtype-grid="true"] .calculator-tab-btn-grid {
  padding: 0.75rem 0.5rem;
  min-height: 90px;
  background-color: rgba(239, 68, 68, 0.15) !important;
  border: 2px solid rgba(239, 68, 68, 0.3);
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 10;
  position: relative;
  overflow: visible !important;
  margin-bottom: 0.5rem;
}

/* Dijital Bask? Butonu - K?rm?z? (ana men? rengi) */
#btn-dijital-baski-default {
  background: linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.25),
    rgba(239, 68, 68, 0.15)
  ) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
}

#btn-dijital-baski-default.active {
  background: linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.35),
    rgba(239, 68, 68, 0.25)
  ) !important;
  border-color: rgba(239, 68, 68, 0.7) !important;
  box-shadow:
    0 6px 20px rgba(239, 68, 68, 0.5),
    0 2px 8px rgba(239, 68, 68, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.3) !important;
  transform: scale(1.02) !important;
}

#btn-dijital-baski-default:hover {
  background: linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.3),
    rgba(239, 68, 68, 0.2)
  ) !important;
  border-color: rgba(239, 68, 68, 0.6) !important;
  transform: scale(1.05) translateZ(5px);
  box-shadow:
    0 8px 24px rgba(239, 68, 68, 0.45),
    0 4px 12px rgba(239, 68, 68, 0.3) !important;
}

/* Kartvizit Butonu - Canl? Turuncu */
#btn-kartvizit {
  background: linear-gradient(
    135deg,
    rgba(245, 158, 11, 0.25),
    rgba(245, 158, 11, 0.15)
  ) !important;
  border-color: rgba(245, 158, 11, 0.5) !important;
}

#btn-kartvizit.active {
  background: linear-gradient(
    135deg,
    rgba(245, 158, 11, 0.35),
    rgba(245, 158, 11, 0.25)
  ) !important;
  border-color: rgba(245, 158, 11, 0.7) !important;
  box-shadow:
    0 6px 20px rgba(245, 158, 11, 0.5),
    0 2px 8px rgba(245, 158, 11, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.3) !important;
  transform: scale(1.02) !important;
}

#btn-kartvizit:hover {
  background: linear-gradient(
    135deg,
    rgba(245, 158, 11, 0.3),
    rgba(245, 158, 11, 0.2)
  ) !important;
  border-color: rgba(245, 158, 11, 0.6) !important;
  transform: scale(1.05) translateZ(5px);
  box-shadow:
    0 8px 24px rgba(245, 158, 11, 0.45),
    0 4px 12px rgba(245, 158, 11, 0.3) !important;
}

/* Bro??r Butonu - Canl? Mor */
#btn-brosur {
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.25),
    rgba(139, 92, 246, 0.15)
  ) !important;
  border-color: rgba(139, 92, 246, 0.5) !important;
}

#btn-brosur.active {
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.35),
    rgba(139, 92, 246, 0.25)
  ) !important;
  border-color: rgba(139, 92, 246, 0.7) !important;
  box-shadow:
    0 6px 20px rgba(139, 92, 246, 0.5),
    0 2px 8px rgba(139, 92, 246, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.3) !important;
  transform: scale(1.02) !important;
}

#btn-brosur:hover {
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.3),
    rgba(139, 92, 246, 0.2)
  ) !important;
  border-color: rgba(139, 92, 246, 0.6) !important;
  transform: scale(1.05) translateZ(5px);
  box-shadow:
    0 8px 24px rgba(139, 92, 246, 0.45),
    0 4px 12px rgba(139, 92, 246, 0.3) !important;
}

/* Alt tip butonlar? i?in genel aktif durum (fallback) */
.calculator-tabs-grid[data-subtype-grid="true"]
  .calculator-tab-btn-grid.active {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Alt tip butonlar? i?in genel hover efekti (fallback) */
.calculator-tabs-grid[data-subtype-grid="true"] .calculator-tab-btn-grid:hover {
  transform: scale(1.03) translateZ(5px);
}

/* Alt tip butonlar? i?in text g?r?n?rl??? */
.calculator-tabs-grid[data-subtype-grid="true"] .calculator-tab-text-wrapper {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.calculator-tabs-grid[data-subtype-grid="true"] .calculator-tab-text-line {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #1f2937 !important; /* Koyu gri - daha iyi g?r?n?rl?k */
  font-weight: 900;
  font-size: 0.7rem;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

/* Alt tip butonlar? i?in img tag'leri i?in stil */
.calculator-tabs-grid[data-subtype-grid="true"]
  .calculator-tab-icon-wrapper
  img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media (max-width: 640px) {
  .calculator-tabs-grid[data-subtype-grid="true"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.75rem;
    padding: 0.75rem;
    overflow: visible !important;
  }

  .calculator-tabs-grid[data-subtype-grid="true"] .calculator-tab-btn-grid {
    padding: 0.75rem 0.5rem !important;
    min-height: 90px !important;
    margin-bottom: 0.75rem !important;
    overflow: visible !important;
    border-width: 3px !important;
    border-style: solid !important;
    box-shadow:
      0 4px 12px rgba(0, 0, 0, 0.2),
      0 2px 6px rgba(0, 0, 0, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.25),
      rgba(255, 255, 255, 0.15)
    ) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
  }

  .calculator-tabs-grid[data-subtype-grid="true"]
    .calculator-tab-btn-grid:active {
    transform: scale(0.98) !important;
    box-shadow:
      0 2px 8px rgba(0, 0, 0, 0.25),
      inset 0 2px 4px rgba(0, 0, 0, 0.15) !important;
  }

  .calculator-tabs-grid[data-subtype-grid="true"] .calculator-tab-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)) !important;
    transition: transform 0.2s ease !important;
  }

  .calculator-tabs-grid[data-subtype-grid="true"]
    .calculator-tab-btn-grid:active
    .calculator-tab-icon {
    transform: scale(0.95) !important;
  }

  .calculator-tabs-grid[data-subtype-grid="true"] .calculator-tab-icon-wrapper {
    min-height: 48px !important;
    margin-bottom: 0.5rem !important;
  }

  .calculator-tabs-grid[data-subtype-grid="true"] .calculator-tab-text-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .calculator-tabs-grid[data-subtype-grid="true"] .calculator-tab-text-line {
    font-size: 0.7rem !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.05em !important;
    text-shadow:
      0 1px 2px rgba(0, 0, 0, 0.4),
      0 0 8px rgba(255, 255, 255, 0.3) !important;
    color: rgba(26, 36, 128, 0.95) !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  .calculator-tabs-grid[data-subtype-grid="true"] .calculator-tab-text-line {
    font-size: 0.6rem;
  }
}

/* =========================================================
   Dijital Bask? Alt Tip Butonlar? (Dijital / Kartvizit / Bro??r)
   Bankac?l?k Uygulamas? UI Stili - Ikon solda, metin sa?da
   ========================================================= */

/* Desktop & genel g?r?n?m ? Unified Premium Tabs (calculator.css) bask?n; burada sadece fallback */
.dijital-subtype-tabs[data-subtype-grid="true"] .calculator-tab-btn-grid {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  padding: 0.4rem 0.5rem !important;
  min-height: 48px !important;
  border-radius: 6px !important;
  border-width: 1px !important;
  box-shadow: 0 10px 24px rgba(2, 8, 23, 0.28) !important;
  transform: none !important;
}

.dijital-subtype-tabs[data-subtype-grid="true"] .calculator-tab-icon-wrapper {
  margin-bottom: 0 !important;
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.dijital-subtype-tabs[data-subtype-grid="true"] .calculator-tab-icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
}

.dijital-subtype-tabs[data-subtype-grid="true"] .calculator-tab-text-wrapper {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.dijital-subtype-tabs[data-subtype-grid="true"] .calculator-tab-text-line {
  font-size: 0.7rem !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.04em !important;
  text-align: left !important;
  white-space: nowrap !important;
}

/* Hover & aktif durum ? titre?im yok */
.dijital-subtype-tabs[data-subtype-grid="true"] .calculator-tab-btn-grid:hover {
  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.22),
    0 2px 6px rgba(15, 23, 42, 0.18) !important;
}

.dijital-subtype-tabs[data-subtype-grid="true"]
  .calculator-tab-btn-grid.active {
  transform: none !important;
}

/* Mobil & k???k ekranlar i?in uyarama ? Unified Premium Tabs bask?n */
@media (max-width: 640px) {
  .dijital-subtype-tabs[data-subtype-grid="true"] {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
  }

  .dijital-subtype-tabs[data-subtype-grid="true"] .calculator-tab-btn-grid {
    min-height: 48px !important;
    padding: 0.35rem 0.25rem !important;
    border-radius: 6px !important;
    box-shadow: 0 10px 24px rgba(2, 8, 23, 0.28) !important;
    justify-content: center !important;
    gap: 0 !important;
  }

  .dijital-subtype-tabs[data-subtype-grid="true"] .calculator-tab-icon-wrapper {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
  }

  .dijital-subtype-tabs[data-subtype-grid="true"] .calculator-tab-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
  }

  .dijital-subtype-tabs[data-subtype-grid="true"] .calculator-tab-text-wrapper {
    display: none !important;
  }
}

/* Modern Dropdown Styles - No Arrow - Apps Style */
.modern-select-wrapper {
  position: relative;
}

.modern-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none !important;
  transition: all 0.2s ease;
  cursor: pointer;
  font-size: var(--font-size-sm, 14px) !important;
  font-weight: 500 !important;
  font-family: var(--font-family-base, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
}

.modern-select:hover {
  border-color: #9ca3af !important;
}

.modern-select:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1) !important;
}

.modern-select::-ms-expand {
  display: none;
}

/* Language Buttons - Flag Only Styles (Override for modern design) */
.lang-buttons-container {
  display: flex !important;
  flex-direction: row !important;
  gap: 12px !important;
  align-items: center !important;
  justify-content: center !important;
}

.lang-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 64px !important;
  height: 48px !important;
  min-width: 64px !important;
  min-height: 48px !important;
  padding: 0 !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.lang-btn img[id^="flag-"] {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 6px !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}

/* Screen reader only - consolidated */
.lang-btn span[id^="lang-text-"],
.sr-only,
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border-width: 0 !important;
  pointer-events: none !important;
}

/* Header Pattern Background ? eski turuncu logo ?eridi; #awp-main-header hari? (promo kesilmesin) */
#awp-printwise-root header:not(#awp-main-header) {
  position: relative;
  background-blend-mode: normal !important;
  background-color: transparent !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  overflow: hidden !important;
}

/* Yatay ta?ma: clip + 100vw scrollbar bo?lu?u; ?st blokta overflow-x:hidden ile uyumlu */
#awp-printwise-root {
  overflow-x: hidden !important;
}

/* Logo Background - Full Width Orange */
#awp-printwise-root header .logo-background-orange {
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  padding: 1rem 1.5rem !important;
  background-color: #ff8300 !important;
  box-sizing: border-box;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: auto !important;
  left: 0 !important;
  right: 0 !important;
}

/* Logo image - Center vertically within orange background */
#awp-printwise-root header .logo-background-orange img {
  display: block;
  margin: 0 auto;
  object-fit: contain;
  max-width: 100%;
  height: auto;
  padding: 0 16px;
}

/* Mobile Logo Spacing - Responsive Padding */
@media (max-width: 768px) {
  #awp-printwise-root header .logo-background-orange {
    padding: 1rem 2rem !important;
  }

  #awp-printwise-root header .logo-background-orange img {
    padding: 0 20px;
  }
}

@media (max-width: 480px) {
  #awp-printwise-root header .logo-background-orange {
    padding: 0.875rem 1.5rem !important;
  }

  #awp-printwise-root header .logo-background-orange img {
    padding: 0 16px;
  }
}

@media (max-width: 375px) {
  #awp-printwise-root header .logo-background-orange {
    padding: 0.75rem 1.25rem !important;
  }

  #awp-printwise-root header .logo-background-orange img {
    padding: 0 12px;
  }
}

/* Header - Remove top padding to align logo to top */
#awp-printwise-root header {
  padding-top: 0 !important;
}

#awp-printwise-root header:not(#awp-main-header)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: inherit;
  background-repeat: inherit;
  background-position: inherit;
  background-size: inherit;
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}

#awp-printwise-root header:not(#awp-main-header) > * {
  position: relative;
  z-index: 1;
}

/* Footer Pattern Background (legacy + new) */
#awp-printwise-root footer.bg-slate-800,
#awp-printwise-root .awp-footer {
  position: relative;
  background-blend-mode: normal !important;
  background-color: transparent !important;
}

#awp-printwise-root footer.bg-slate-800::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: inherit;
  background-repeat: inherit;
  background-position: inherit;
  background-size: inherit;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}

#awp-printwise-root footer.bg-slate-800 > *,
#awp-printwise-root .awp-footer .awp-footer-inner {
  position: relative;
  z-index: 1;
}

/* Footer Text - White on Dark Background */
footer.bg-slate-800 *,
footer.bg-slate-800 p,
footer.bg-slate-800 span,
footer.bg-slate-800 h3,
footer.bg-slate-800 h4,
footer.bg-slate-800 a {
  color: #ffffff !important;
}

footer.bg-slate-800 #footer-closed {
  color: #ffffff !important;
}

/* Hide empty content after calculator wrapper */
#awp-printwise-root:after,
#awp-printwise-root + p:empty,
#awp-printwise-root + script[src*="chrome-extension"],
#awp-printwise-root ~ p:empty:not(.wp-block-paragraph),
#awp-printwise-root ~ script[src*="chrome-extension"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
}

/* Viewport 1500px ve alt?nda main tam geni?lik; ?st?nde main 1500px */
@media (max-width: 1500px) {
  #awp-printwise-root main {
    max-width: 100% !important;
  }
}

@media (max-width: 640px) {
  /* Duplicate styles removed - using the main responsive section above */

  /* Dijital Bask? Schema - Mobil Optimizasyonu */
  #dijital_schema {
    padding: 0.5rem !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    box-sizing: border-box !important;
  }

  #dijital_schema > div {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  #dijital_schema svg {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
    display: block !important;
  }

  /* Schema container'?n parent'? i?in de geni?lik kontrol? */
  #dijital_results .mb-4 {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .currency-toggle-wrapper {
    gap: 6px;
  }

  .currency-toggle-wrapper span {
    font-size: 10px;
  }

  .currency-toggle-switch {
    width: 52px;
    height: 24px;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .currency-toggle-slider {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .currency-toggle-slider:before {
    display: none !important;
    content: none !important;
  }

  .currency-toggle-switch input:checked + .currency-toggle-slider:before {
    display: none !important;
  }

  .lang-buttons-container {
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .lang-btn {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 6px !important;
  }

  .lang-btn img[id^="flag-"] {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
  }

  /* Rulo Bask? Schema - Yatay ve dikey ortalama (scroll ile) */
  #rulo_schema {
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
  }

  /* Main container - i?erik dar/k?sa oldu?unda margin ile ortalan?r */
  #rulo_schema > div {
    width: 100%;
    max-width: 100%;
    position: relative;
    margin: auto;
  }

  /* Ruler styles */
  #rulo_schema .ruler,
  #rulo_schema > div > div:first-child {
    user-select: none;
    -webkit-user-select: none;
  }

  /* Paper roll area */
  #rulo_schema > div > div:nth-child(2) {
    position: relative;
    overflow: visible;
  }

  /* Scrollbar styles for schema container */
  #rulo_schema::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  #rulo_schema::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 6px;
  }

  #rulo_schema::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 6px;
  }

  #rulo_schema::-webkit-scrollbar-thumb:hover {
    background: #555;
  }

  /* Crop marks animation on hover */
  #rulo_schema [style*="crop"] {
    transition: opacity 0.2s ease;
  }

  /* Print area frame */
  #rulo_schema [style*="border: 2px solid #0066cc"] {
    pointer-events: none;
  }

  /* Waste area hover effect */
  #rulo_schema [style*="repeating-linear-gradient"] {
    transition: opacity 0.3s ease;
  }

  #rulo_schema [style*="repeating-linear-gradient"]:hover {
    opacity: 0.8 !important;
  }
}

.input-shared {
  width: 100%;
  height: 48px;
  min-height: 48px;
  font-size: var(--font-size-sm, 14px) !important;
  font-weight: 500 !important;
  font-family: var(--font-family-base, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  padding: 0 1rem;
  outline: none;
  transition:
    border 0.2s,
    box-shadow 0.2s;
  background: #fff;
  color: #111;
  box-sizing: border-box;
}

/* Kartvizit Ta?ma Pay? input - ?stenen Adet ile ayn? y?kseklik ve font */
#kartvizit_margin.input-shared {
  height: 48px;
  min-height: 48px;
  font-size: var(--font-size-sm, 14px) !important;
  font-weight: 500 !important;
  font-family: var(--font-family-base, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  padding: 0 1rem;
  display: flex;
  align-items: center;
}

#brosur_margin.modern-select {
  height: 48px;
  min-height: 48px;
  font-size: var(--font-size-sm, 14px) !important;
  font-weight: 500 !important;
  font-family: var(--font-family-base, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  padding: 0 1rem;
  display: flex;
  align-items: center;
}
.input-shared:focus {
  border-color: #ff8300;
  box-shadow: 0 0 0 2px rgba(255, 131, 0, 0.12);
  /* Ensure spinner arrows are visible on focus */
  opacity: 1;
}

/* Number input spinner arrows - visible on focus, positioned right */
input[type="number"] {
  position: relative;
  padding-right: 2.5rem;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  opacity: 0;
  transition: opacity 0.2s ease;
  position: absolute;
  right: 2px !important; /* Align to the very right edge */
  width: 28px !important; /* Slightly larger for better touch targets */
  height: 50%;
  cursor: pointer;
  pointer-events: none;
  margin: 0;
}

/* Upper spinner (up arrow) */
input[type="number"]::-webkit-inner-spin-button {
  top: 0;
  bottom: auto;
}

/* Lower spinner (down arrow) */
input[type="number"]::-webkit-outer-spin-button {
  bottom: 0;
  top: auto;
}

input[type="number"]:focus::-webkit-inner-spin-button,
input[type="number"]:focus::-webkit-outer-spin-button {
  opacity: 1 !important;
  cursor: pointer;
  pointer-events: auto !important;
  -webkit-appearance: inner-spin-button;
  display: block;
}

/* Mobile: Ensure spinner arrows are on the right side */
@media (max-width: 768px) {
  input[type="number"] {
    padding-right: 3rem !important;
    text-align: left;
  }

  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    position: absolute;
    right: 4px !important;
    width: 24px !important;
    height: 1.2em;
    margin: 0;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  input[type="number"]:focus::-webkit-inner-spin-button,
  input[type="number"]:focus::-webkit-outer-spin-button {
    opacity: 1 !important;
    pointer-events: auto !important;
    -webkit-appearance: inner-spin-button !important;
    appearance: inner-spin-button !important;
  }
}
.modern-select,
.awp-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #fff;
  box-shadow: none;
  border: 2px solid #e5e7eb;
  padding: 0 2.25rem 0 1rem;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  font-family: var(--font-family-base, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: var(--font-size-sm, 14px);
  font-weight: 500;
  border-radius: 6px;
  color: #111;
  box-sizing: border-box;
  width: 100%;
}
.modern-select-wrapper select::-ms-expand {
  display: none;
}
.modern-select-wrapper select::-webkit-inner-spin-button,
.modern-select-wrapper select::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.modern-select-wrapper:after,
.modern-select-wrapper svg,
.modern-select-wrapper div[style*="pointer-events"] {
  display: none !important;
}
/* Module Headers - Dynamic colors based on active module */
.card-header-orange {
  background: #ff8300; /* Default/fallback */
}

/* Ders Notlar? Header */
/* Header background is set inline in template, but we can override here if needed */

/* Rulo Bask? Header */
/* Header background is set inline in template */

/* Dijital Bask? Header */
/* Header background is set inline in template */

/* Module-specific header backgrounds */
.rulo-module-header {
  background: #3b82f6 !important;
}

.dijital-module-header {
  background: #ef4444 !important;
}

.katalog-module-header {
  background: #ec4899 !important;
}

/* Print Type ? awp-color-btn ile birle?ik g?r?n?m (awp-form-states.css); g?lge/gradient kald?r?ld? */
#awp-printwise-root .awp-color-btn.awp-print-type-option {
  transition:
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.2s ease,
    background 0.2s ease;
  position: relative;
}

#awp-printwise-root .awp-color-btn.awp-print-type-option.selected {
  box-shadow: none !important;
}

#awp-printwise-root .awp-color-btn.awp-print-type-option.ring-blue-500,
#awp-printwise-root .awp-color-btn.awp-print-type-option.ring-gray-500 {
  border-width: 2px !important;
  border-color: #e2e8f0 !important;
  background: #f8fafc !important;
}

#awp-printwise-root .awp-color-btn.awp-print-type-option.ring-blue-500.selected,
#awp-printwise-root .awp-color-btn.awp-print-type-option.ring-gray-500.selected {
  box-shadow: none !important;
}

/* Dynamic font size for price displays based on number length */
span#coloredPrice,
span#bwPrice {
  font-size: 20pt;
  transition: font-size 0.2s ease;
}

/* Mobile responsive styles for print type buttons */
@media (max-width: 768px) {
  .awp-print-type-option {
    padding: 0.5rem !important;
  }

  .awp-print-type-option img {
    width: 72px !important;
    max-width: 72px !important;
    height: auto !important;
    margin-bottom: 0.35rem !important;
  }

  #label-colored-price,
  #label-bw-price {
    font-size: 0.75rem !important;
    font-weight: 900 !important;
  }
}

@media (max-width: 640px) {
  .input-shared,
  .modern-select,
  .awp-select {
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    font-size: 14px !important;
    font-weight: 500 !important;
    font-family:
      "Inter",
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      sans-serif !important;
  }
  .card-header-orange {
    padding: clamp(0.75rem, 2vw, 1.5rem) !important;
  }
  /* Kartvizit Ta?ma Pay? - mobilde de ?stenen Adet ile ayn? */
  #kartvizit_margin.input-shared {
    height: clamp(44px, 10vw, 52px);
    min-height: 44px;
    font-size: 14px !important;
    font-weight: 500 !important;
    font-family:
      "Inter",
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      sans-serif !important;
  }
}

/* Extra Bold Headings - Force font-weight: 900 for all languages */
/* T?m ba?l?klar i?in font-weight: 900 !important; */
/* Ba?l?klar - MOD?L ENTERPRISE ELEMENTLER? HAR?? (her mod?l kendi font/boyutunu kullan?r) */
#awp-printwise-root
  h1:not([class*="module-ders-notu-"]):not([class*="module-rulo-"]):not(
    [class*="module-dijital-"]
  ):not([class*="module-katalog-"]),
#awp-printwise-root
  h2:not([class*="module-ders-notu-"]):not([class*="module-rulo-"]):not(
    [class*="module-dijital-"]
  ):not([class*="module-katalog-"]),
#awp-printwise-root
  h3:not([class*="module-ders-notu-"]):not([class*="module-rulo-"]):not(
    [class*="module-dijital-"]
  ):not([class*="module-katalog-"]),
#awp-printwise-root
  h4:not([class*="module-ders-notu-"]):not([class*="module-rulo-"]):not(
    [class*="module-dijital-"]
  ):not([class*="module-katalog-"]),
#awp-printwise-root
  h5:not([class*="module-ders-notu-"]):not([class*="module-rulo-"]):not(
    [class*="module-dijital-"]
  ):not([class*="module-katalog-"]),
#awp-printwise-root
  h6:not([class*="module-ders-notu-"]):not([class*="module-rulo-"]):not(
    [class*="module-dijital-"]
  ):not([class*="module-katalog-"]),
#awp-printwise-root #main-title,
#awp-printwise-root #calc-title,
#awp-printwise-root #price-comparison {
  font-size: 0.875rem !important;
}
@media (min-width: 640px) {
  #awp-printwise-root #price-comparison {
    font-size: 1.125rem !important;
  }
}
/* Mod?l d??? ba?l?klar - font-weight (enterprise mod?l kendi stillerini kullan?r) */
#awp-printwise-root #price-comparison,
#awp-printwise-root #detailed-results,
#awp-printwise-root #rulo-calc-title,
#awp-printwise-root #rulo-schema-title,
#awp-printwise-root #dijital-calc-title,
#awp-printwise-root #dijital-schema-title,
#awp-printwise-root #katalog-calc-title,
#awp-printwise-root #katalog-results-title,
#awp-printwise-root #customer-info-title,
#awp-printwise-root #upload-title,
#awp-printwise-root #footer-contact-title,
#awp-printwise-root #footer-hours-title {
  font-weight: 900 !important;
  font-family: "Inter", sans-serif !important;
}

/* Mod?l ba?l?klar? i?in font boyutu art?r?ld? */
#awp-printwise-root #calc-title,
#awp-printwise-root #rulo-calc-title,
#awp-printwise-root #dijital-calc-title,
#awp-printwise-root #katalog-calc-title {
  font-size: 1.25rem !important; /* 20px - text-lg'dan (18px) biraz daha b?y?k */
  font-family: "Inter", sans-serif !important;
  font-weight: 900 !important; /* T?m mod?l ba?l?klar? i?in tutarl? kal?n font */
}

/* ============================================
   Rulo Bask? - Modern Metric Cards
   Sleek, app-style data cards with emphasis
   ============================================ */

/* Grid Container for Metric Cards */
#rulo_details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-top: 18px;
  margin-bottom: 14px;
}
div#dijital_details {
  margin-top: 18px;
  margin-bottom: 14px;
}
/* Base Metric Card Style */
.rulo-metric-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 6px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.rulo-metric-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #e2e8f0 0%, #cbd5e1 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.rulo-metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: rgba(148, 163, 184, 0.4);
}

.rulo-metric-card:hover::before {
  opacity: 1;
}

/* Featured Cards (Toplam Alan & Birim Fiyat) */
.rulo-metric-card-featured {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1.5px solid rgba(59, 130, 246, 0.3);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.rulo-metric-card-featured::before {
  background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
  opacity: 1;
}

.rulo-metric-card-featured:hover {
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.5);
}

/* Metric Icon */
/* ============================================
   PWA Splash Screen - Responsive for all screen sizes
   ============================================ */

#pwa-splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  /* Background color will be set dynamically from PWA settings */
  overflow: hidden;
  display: none;
}

#pwa-splash-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

#pwa-splash-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: auto;
}

/* Standard screens (up to 1920px width) */
@media (max-width: 1920px) {
  #pwa-splash-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
}

/* 2K screens (2560px - 3839px width) */
@media (min-width: 2560px) and (max-width: 3839px) {
  #pwa-splash-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* Maintain original aspect ratio, scale to fit */
  }
}

/* 4K screens (3840px and above) */
@media (min-width: 3840px) {
  #pwa-splash-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* Maintain original aspect ratio, scale to fit */
  }
}

/* Mobile screens (portrait) */
@media (max-width: 768px) and (orientation: portrait) {
  #pwa-splash-screen {
    width: 100vw;
    height: 100vh;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
  }

  #pwa-splash-container {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    overflow: hidden;
  }

  #pwa-splash-image {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    object-position: center center;
    display: block;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* On mobile portrait, use cover to fill screen completely */
  }
}

/* Mobile screens (landscape) */
@media (max-width: 1024px) and (orientation: landscape) {
  #pwa-splash-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
}

/* Tablet screens */
@media (min-width: 769px) and (max-width: 1024px) {
  #pwa-splash-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
}

.rulo-metric-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  border-radius: 6px;
  color: #64748b;
  flex-shrink: 0;
}

.rulo-metric-icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

.rulo-metric-icon-featured {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  color: #3b82f6;
}

/* Metric Content */
.rulo-metric-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.rulo-metric-label {
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  letter-spacing: 0.01em;
  text-transform: none;
  line-height: 1.4;
}

.rulo-metric-value {
  font-size: 18px;
  font-weight: 500;
  color: #1e293b;
  line-height: 1.3;
  word-break: break-word;
}

.rulo-metric-value-featured {
  font-size: 20px;
  font-weight: 900;
  color: #1e40af;
  letter-spacing: -0.01em;
}

.rulo-metric-unit {
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
  margin-left: 2px;
}

.rulo-metric-sublabel {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.4;
  margin-top: 2px;
}

/* Color variations for waste percentage */
.rulo-metric-value.text-green-600 {
  color: #059669;
}

.rulo-metric-value.text-yellow-600 {
  color: #d97706;
}

.rulo-metric-value.text-red-600 {
  color: #dc2626;
}

/* Responsive Design */
@media (max-width: 640px) {
  #rulo_details {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .rulo-metric-card {
    padding: 16px;
    gap: 10px;
  }

  .rulo-metric-icon {
    width: 36px;
    height: 36px;
  }

  .rulo-metric-icon svg {
    width: 18px;
    height: 18px;
  }

  .rulo-metric-value {
    font-size: 16px;
  }

  .rulo-metric-value-featured {
    font-size: 18px;
  }

  .rulo-metric-label {
    font-size: 11px;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  #rulo_details {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1025px) {
  #rulo_details {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Katalog Kapak Toggle Switch */
.katalog-cover-toggle-switch {
  /* switch */
  --switch-width: 46px;
  --switch-height: 24px;
  --switch-bg: rgb(131, 131, 131);
  --switch-checked-bg: #1676df;
  --switch-offset: calc((var(--switch-height) - var(--circle-diameter)) / 2);
  --switch-transition: all 0.2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
  /* circle */
  --circle-diameter: 18px;
  --circle-bg: #fff;
  --circle-shadow: 1px 1px 2px rgba(146, 146, 146, 0.45);
  --circle-checked-shadow: -1px 1px 2px rgba(163, 163, 163, 0.45);
  --circle-transition: var(--switch-transition);
  /* icon */
  --icon-transition: all 0.2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
  --icon-cross-color: var(--switch-bg);
  --icon-cross-size: 6px;
  --icon-checkmark-color: var(--switch-checked-bg);
  --icon-checkmark-size: 10px;
  /* effect line */
  --effect-width: calc(var(--circle-diameter) / 2);
  --effect-height: calc(var(--effect-width) / 2 - 1px);
  --effect-bg: var(--circle-bg);
  --effect-border-radius: 1px;
  --effect-transition: all 0.2s ease-in-out;
  position: relative;
  display: inline-block;
}

.katalog-cover-toggle-switch input {
  display: none;
}

.katalog-cover-toggle-circle svg {
  -webkit-transition: var(--icon-transition);
  -o-transition: var(--icon-transition);
  transition: var(--icon-transition);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.katalog-cover-toggle-circle .katalog-cover-toggle-checkmark {
  width: var(--icon-checkmark-size);
  color: var(--icon-checkmark-color);
  -webkit-transform: translate(-50%, -50%) scale(0);
  -ms-transform: translate(-50%, -50%) scale(0);
  transform: translate(-50%, -50%) scale(0);
}

.katalog-cover-toggle-circle .katalog-cover-toggle-cross {
  width: var(--icon-cross-size);
  color: var(--icon-cross-color);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.katalog-cover-toggle-slider {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: var(--switch-width);
  height: var(--switch-height);
  background: var(--switch-bg);
  border-radius: 999px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  -webkit-transition: var(--switch-transition);
  -o-transition: var(--switch-transition);
  transition: var(--switch-transition);
  cursor: pointer;
}

.katalog-cover-toggle-circle {
  width: var(--circle-diameter);
  height: var(--circle-diameter);
  background: var(--circle-bg);
  border-radius: 50%;
  -webkit-box-shadow: var(--circle-shadow);
  box-shadow: var(--circle-shadow);
  -webkit-transition: var(--circle-transition);
  -o-transition: var(--circle-transition);
  transition: var(--circle-transition);
  z-index: 1;
  position: absolute;
  left: var(--switch-offset);
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* actions */

.katalog-cover-toggle-switch input:checked + .katalog-cover-toggle-slider {
  background: var(--switch-checked-bg);
}

.katalog-cover-toggle-switch
  input:checked
  + .katalog-cover-toggle-slider
  .katalog-cover-toggle-circle
  .katalog-cover-toggle-checkmark {
  -webkit-transform: translate(-50%, -50%) scale(1);
  -ms-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
}

.katalog-cover-toggle-switch
  input:checked
  + .katalog-cover-toggle-slider
  .katalog-cover-toggle-circle
  .katalog-cover-toggle-cross {
  -webkit-transform: translate(-50%, -50%) scale(0);
  -ms-transform: translate(-50%, -50%) scale(0);
  transform: translate(-50%, -50%) scale(0);
}

.katalog-cover-toggle-switch
  input:checked
  + .katalog-cover-toggle-slider
  .katalog-cover-toggle-circle {
  left: calc(100% - var(--circle-diameter) - var(--switch-offset));
  -webkit-box-shadow: var(--circle-checked-shadow);
  box-shadow: var(--circle-checked-shadow);
}

/* Kapak Options Active/Disabled States */
#katalog_kapak_options {
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

#katalog_kapak_options.active {
  opacity: 1 !important;
  pointer-events: auto !important;
}

#katalog_kapak_options.active select {
  cursor: pointer;
  background-color: #ffffff;
  color: #1f2937;
}

#katalog_kapak_options:not(.active) {
  opacity: 0.5 !important;
  pointer-events: none !important;
}

#katalog_kapak_options:not(.active) select {
  cursor: not-allowed;
  background-color: #f3f4f6;
  color: #9ca3af;
}

/* Katalog Cover Description */
.katalog-cover-description {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.6;
  margin-top: 8px;
  margin-bottom: 16px;
  padding: 0 4px;
}

@media (max-width: 640px) {
  .katalog-cover-description {
    font-size: 11px;
    line-height: 1.5;
    margin-top: 6px;
    margin-bottom: 12px;
  }
}

#katalog_kapak_options:not(.active) label {
  color: #9ca3af;
}

/* Dijital Bask? Custom Toggle Switch */
.dijital-custom-toggle-switch {
  /* switch */
  --switch-width: 46px;
  --switch-height: 24px;
  --switch-bg: rgb(131, 131, 131);
  --switch-checked-bg: #1676df;
  --switch-offset: calc((var(--switch-height) - var(--circle-diameter)) / 2);
  --switch-transition: all 0.2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
  /* circle */
  --circle-diameter: 18px;
  --circle-bg: #fff;
  --circle-shadow: 1px 1px 2px rgba(146, 146, 146, 0.45);
  --circle-checked-shadow: -1px 1px 2px rgba(163, 163, 163, 0.45);
  --circle-transition: var(--switch-transition);
  /* icon */
  --icon-transition: all 0.2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
  --icon-cross-color: var(--switch-bg);
  --icon-cross-size: 6px;
  --icon-checkmark-color: var(--switch-checked-bg);
  --icon-checkmark-size: 10px;
  /* effect line */
  --effect-width: calc(var(--circle-diameter) / 2);
  --effect-height: calc(var(--effect-width) / 2 - 1px);
  --effect-bg: var(--circle-bg);
  --effect-border-radius: 1px;
  --effect-transition: all 0.2s ease-in-out;
  position: relative;
  display: inline-block;
}

.dijital-custom-toggle-switch input {
  display: none;
}

.dijital-custom-toggle-circle svg {
  -webkit-transition: var(--icon-transition);
  -o-transition: var(--icon-transition);
  transition: var(--icon-transition);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.dijital-custom-toggle-circle .dijital-custom-toggle-checkmark {
  width: var(--icon-checkmark-size);
  color: var(--icon-checkmark-color);
  -webkit-transform: translate(-50%, -50%) scale(0);
  -ms-transform: translate(-50%, -50%) scale(0);
  transform: translate(-50%, -50%) scale(0);
}

.dijital-custom-toggle-circle .dijital-custom-toggle-cross {
  width: var(--icon-cross-size);
  color: var(--icon-cross-color);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.dijital-custom-toggle-slider {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: var(--switch-width);
  height: var(--switch-height);
  background: var(--switch-bg);
  border-radius: 999px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  -webkit-transition: var(--switch-transition);
  -o-transition: var(--switch-transition);
  transition: var(--switch-transition);
  cursor: pointer;
}

.dijital-custom-toggle-circle {
  width: var(--circle-diameter);
  height: var(--circle-diameter);
  background: var(--circle-bg);
  border-radius: 50%;
  -webkit-box-shadow: var(--circle-shadow);
  box-shadow: var(--circle-shadow);
  -webkit-transition: var(--circle-transition);
  -o-transition: var(--circle-transition);
  transition: var(--circle-transition);
  z-index: 1;
  position: absolute;
  left: var(--switch-offset);
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* actions */

.dijital-custom-toggle-switch input:checked + .dijital-custom-toggle-slider {
  background: var(--switch-checked-bg);
}

.dijital-custom-toggle-switch
  input:checked
  + .dijital-custom-toggle-slider
  .dijital-custom-toggle-circle
  .dijital-custom-toggle-checkmark {
  -webkit-transform: translate(-50%, -50%) scale(1);
  -ms-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
}

.dijital-custom-toggle-switch
  input:checked
  + .dijital-custom-toggle-slider
  .dijital-custom-toggle-circle
  .dijital-custom-toggle-cross {
  -webkit-transform: translate(-50%, -50%) scale(0);
  -ms-transform: translate(-50%, -50%) scale(0);
  transform: translate(-50%, -50%) scale(0);
}

.dijital-custom-toggle-switch
  input:checked
  + .dijital-custom-toggle-slider
  .dijital-custom-toggle-circle {
  left: calc(100% - var(--circle-diameter) - var(--switch-offset));
  -webkit-box-shadow: var(--circle-checked-shadow);
  box-shadow: var(--circle-checked-shadow);
}

/* ?zel ?l?? Label - Extra Bold with Slow Pulse Animation - Daha k???k */
.dijital-custom-toggle-label {
  font-weight: 900 !important;
  font-size: 0.6875rem !important;
  color: #1e40af !important;
}

/* Rulo Bask? Custom Toggle Switch */
.rulo-custom-toggle-switch {
  /* switch */
  --switch-width: 46px;
  --switch-height: 24px;
  --switch-bg: rgb(131, 131, 131);
  --switch-checked-bg: #1676df;
  --switch-offset: calc((var(--switch-height) - var(--circle-diameter)) / 2);
  --switch-transition: all 0.2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
  /* circle */
  --circle-diameter: 18px;
  --circle-bg: #fff;
  --circle-shadow: 1px 1px 2px rgba(146, 146, 146, 0.45);
  --circle-checked-shadow: -1px 1px 2px rgba(163, 163, 163, 0.45);
  --circle-transition: var(--switch-transition);
  /* icon */
  --icon-transition: all 0.2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
  --icon-cross-color: var(--switch-bg);
  --icon-cross-size: 6px;
  --icon-checkmark-color: var(--switch-checked-bg);
  --icon-checkmark-size: 10px;
  /* effect line */
  --effect-width: calc(var(--circle-diameter) / 2);
  --effect-height: calc(var(--effect-width) / 2 - 1px);
  --effect-bg: var(--circle-bg);
  --effect-border-radius: 1px;
  --effect-transition: all 0.2s ease-in-out;
  position: relative;
  display: inline-block;
}

.rulo-custom-toggle-switch input {
  display: none;
}

.rulo-custom-toggle-circle svg {
  -webkit-transition: var(--icon-transition);
  -o-transition: var(--icon-transition);
  transition: var(--icon-transition);
  position: absolute;
  top: 50%;
  left: 50%;
  height: auto;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.rulo-custom-toggle-circle .rulo-custom-toggle-checkmark {
  width: var(--icon-checkmark-size);
  height: var(--icon-checkmark-size);
  color: var(--icon-checkmark-color);
  -webkit-transform: translate(-50%, -50%) scale(0);
  -ms-transform: translate(-50%, -50%) scale(0);
  transform: translate(-50%, -50%) scale(0);
}

.rulo-custom-toggle-circle .rulo-custom-toggle-cross {
  width: var(--icon-cross-size);
  height: var(--icon-cross-size);
  color: var(--icon-cross-color);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.rulo-custom-toggle-slider {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: var(--switch-width);
  height: var(--switch-height);
  background: var(--switch-bg);
  border-radius: 999px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  -webkit-transition: var(--switch-transition);
  -o-transition: var(--switch-transition);
  transition: var(--switch-transition);
  cursor: pointer;
}

.rulo-custom-toggle-circle {
  width: var(--circle-diameter);
  height: var(--circle-diameter);
  background: var(--circle-bg);
  border-radius: 50%;
  -webkit-box-shadow: var(--circle-shadow);
  box-shadow: var(--circle-shadow);
  -webkit-transition: var(--circle-transition);
  -o-transition: var(--circle-transition);
  transition: var(--circle-transition);
  z-index: 1;
  position: absolute;
  left: var(--switch-offset);
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.rulo-custom-toggle-slider::before {
  content: "";
  position: absolute;
  width: var(--effect-width);
  height: var(--effect-height);
  left: calc(var(--switch-offset) + (var(--effect-width) / 2));
  background: var(--effect-bg);
  border-radius: var(--effect-border-radius);
  -webkit-transition: var(--effect-transition);
  -o-transition: var(--effect-transition);
  transition: var(--effect-transition);
}

/* actions */

.rulo-custom-toggle-switch input:checked + .rulo-custom-toggle-slider {
  background: var(--switch-checked-bg);
}

.rulo-custom-toggle-switch
  input:checked
  + .rulo-custom-toggle-slider
  .rulo-custom-toggle-circle
  .rulo-custom-toggle-checkmark {
  -webkit-transform: translate(-50%, -50%) scale(1);
  -ms-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
}

.rulo-custom-toggle-switch
  input:checked
  + .rulo-custom-toggle-slider
  .rulo-custom-toggle-circle
  .rulo-custom-toggle-cross {
  -webkit-transform: translate(-50%, -50%) scale(0);
  -ms-transform: translate(-50%, -50%) scale(0);
  transform: translate(-50%, -50%) scale(0);
}

.rulo-custom-toggle-switch input:checked + .rulo-custom-toggle-slider::before {
  left: calc(
    100% - var(--effect-width) - (var(--effect-width) / 2) -
      var(--switch-offset)
  );
}

.rulo-custom-toggle-switch
  input:checked
  + .rulo-custom-toggle-slider
  .rulo-custom-toggle-circle {
  left: calc(100% - var(--circle-diameter) - var(--switch-offset));
  -webkit-box-shadow: var(--circle-checked-shadow);
  box-shadow: var(--circle-checked-shadow);
}

/* Rulo ?zel ?l?? Label - Extra Bold with Slow Pulse Animation */
.rulo-custom-toggle-label {
  font-weight: 900 !important;
  font-size: 0.6875rem !important;
  color: #1e40af !important;
  animation: pulse-slow 2s ease-in-out infinite;
}

/* Rulo Bask? Extra Options - Switch Toggle (UI8 Style)
   Pasif se?enekler JS ile display:none; burada her zaman aktif kart stili */
.rulo-extra-option-card {
  position: relative;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
  pointer-events: auto;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.rulo-extra-option-card:hover {
  border-color: #3b82f6;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
  transform: translateY(-1px);
}

.rulo-toggle-switch {
  /* switch */
  --switch-width: 46px;
  --switch-height: 24px;
  --switch-bg: rgb(131, 131, 131);
  --switch-checked-bg: #1676df;
  --switch-offset: calc((var(--switch-height) - var(--circle-diameter)) / 2);
  --switch-transition: all 0.2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
  /* circle */
  --circle-diameter: 18px;
  --circle-bg: #fff;
  --circle-shadow: 1px 1px 2px rgba(146, 146, 146, 0.45);
  --circle-checked-shadow: -1px 1px 2px rgba(163, 163, 163, 0.45);
  --circle-transition: var(--switch-transition);
  /* icon */
  --icon-transition: all 0.2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
  --icon-cross-color: var(--switch-bg);
  --icon-cross-size: 6px;
  --icon-checkmark-color: var(--switch-checked-bg);
  --icon-checkmark-size: 10px;
  /* effect line */
  --effect-width: calc(var(--circle-diameter) / 2);
  --effect-height: calc(var(--effect-width) / 2 - 1px);
  --effect-bg: var(--circle-bg);
  --effect-border-radius: 1px;
  --effect-transition: all 0.2s ease-in-out;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}

.rulo-toggle-switch input[type="checkbox"],
.rulo-toggle-switch input {
  display: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
  visibility: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
}

.rulo-toggle-circle svg {
  -webkit-transition: var(--icon-transition);
  -o-transition: var(--icon-transition);
  transition: var(--icon-transition);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.rulo-toggle-circle .rulo-toggle-checkmark {
  width: var(--icon-checkmark-size);
  height: var(--icon-checkmark-size);
  color: var(--icon-checkmark-color);
  -webkit-transform: translate(-50%, -50%) scale(0);
  -ms-transform: translate(-50%, -50%) scale(0);
  transform: translate(-50%, -50%) scale(0);
}

.rulo-toggle-circle .rulo-toggle-cross {
  width: var(--icon-cross-size);
  height: var(--icon-cross-size);
  color: var(--icon-cross-color);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.rulo-toggle-slider {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: var(--switch-width);
  height: var(--switch-height);
  background: var(--switch-bg);
  border-radius: 999px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  -webkit-transition: var(--switch-transition);
  -o-transition: var(--switch-transition);
  transition: var(--switch-transition);
  cursor: pointer;
}

.rulo-toggle-circle {
  width: var(--circle-diameter);
  height: var(--circle-diameter);
  background: var(--circle-bg);
  border-radius: 50%;
  -webkit-box-shadow: var(--circle-shadow);
  box-shadow: var(--circle-shadow);
  -webkit-transition: var(--circle-transition);
  -o-transition: var(--circle-transition);
  transition: var(--circle-transition);
  z-index: 1;
  position: absolute;
  left: var(--switch-offset);
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.rulo-toggle-slider::before {
  content: "";
  position: absolute;
  width: var(--effect-width);
  height: var(--effect-height);
  left: calc(var(--switch-offset) + (var(--effect-width) / 2));
  background: var(--effect-bg);
  border-radius: var(--effect-border-radius);
  -webkit-transition: var(--effect-transition);
  -o-transition: var(--effect-transition);
  transition: var(--effect-transition);
}

/* actions */

.rulo-toggle-switch input:checked + .rulo-toggle-slider {
  background: var(--switch-checked-bg);
}

.rulo-toggle-switch
  input:checked
  + .rulo-toggle-slider
  .rulo-toggle-circle
  .rulo-toggle-checkmark {
  -webkit-transform: translate(-50%, -50%) scale(1);
  -ms-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
}

.rulo-toggle-switch
  input:checked
  + .rulo-toggle-slider
  .rulo-toggle-circle
  .rulo-toggle-cross {
  -webkit-transform: translate(-50%, -50%) scale(0);
  -ms-transform: translate(-50%, -50%) scale(0);
  transform: translate(-50%, -50%) scale(0);
}

.rulo-toggle-switch input:checked + .rulo-toggle-slider::before {
  left: calc(
    100% - var(--effect-width) - (var(--effect-width) / 2) -
      var(--switch-offset)
  );
}

.rulo-toggle-switch input:checked + .rulo-toggle-slider .rulo-toggle-circle {
  left: calc(100% - var(--circle-diameter) - var(--switch-offset));
  -webkit-box-shadow: var(--circle-checked-shadow);
  box-shadow: var(--circle-checked-shadow);
}

.rulo-toggle-switch input:disabled + .rulo-toggle-slider {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Rulo Info Title - Extra Bold with Slow Pulse Animation */
.rulo-info-title-pulse {
  font-weight: 900 !important;
  animation: pulse-slow-title 3s ease-in-out infinite;
}

/* Rulo Bask? Hakk?nda Bilgi A??l?r Pencere Ba?l??? - border-radius 6px */
#rulo-info-toggle {
  border-top-left-radius: 6px !important;
  border-top-right-radius: 6px !important;
}

@keyframes pulse-slow {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* Reset Button Special Hover Effects */
#dijital_reset_btn {
  position: relative;
  overflow: hidden;
}

#dijital_reset_btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition:
    width 0.6s,
    height 0.6s;
}

#dijital_reset_btn:hover::before {
  width: 300px;
  height: 300px;
}

#dijital_reset_btn svg {
  transition: transform 0.3s ease-in-out;
}

#dijital_reset_btn:hover svg {
  transform: rotate(-180deg);
}

#dijital_reset_btn:active {
  transform: scale(0.95);
}

@keyframes pulse-slow-title {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.dijital-custom-toggle-label {
  animation: pulse-slow 2s ease-in-out infinite;
}

/* Dijital Bask? ?ndirim Rozeti - Premium Luxury Design */
.dijital-discount-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 8px 16px;
  background: linear-gradient(
    135deg,
    rgb(85 23 225 / 95%) 0%,
    rgb(99 226 241 / 95%) 50%,
    rgb(246 108 59 / 95%) 100%
  );
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 8px 32px rgba(139, 92, 246, 0.4),
    0 4px 16px rgba(99, 102, 241, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  font-weight: 900;
  font-size: 13px;
  line-height: 1.2;
  color: #0a1e73;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  animation: dijitalDiscountPulse 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: visible;
  flex-wrap: nowrap; /* Desktop'ta tek sat?r */
  word-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
  text-align: center;
  justify-content: center;
  width: 100%;
}

/* Hover efektleri kald?r?ld? - ::after ve ::before pseudo-elementleri kald?r?ld? */

/* Sparkle icon container */
.dijital-discount-sparkle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  position: relative;
  z-index: 2;
}

.dijital-sparkle-icon {
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, 0.95);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
  animation: dijitalSparkleRotate 3s linear infinite;
}

/* Discount text */
.dijital-discount-text {
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -0.5px;
  white-space: nowrap;
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, #5751cd 0%, #cb0808 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* Discount label */
.dijital-discount-label {
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0.9;
  position: relative;
  z-index: 2;
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}

.dijital-discount-text {
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}

/* Animasyonlar */
@keyframes dijitalDiscountPulse {
  0% {
    opacity: 0;
    transform: scale(0.6) translateY(-15px) rotate(-5deg);
  }
  50% {
    transform: scale(1.15) translateY(0) rotate(2deg);
  }
  70% {
    transform: scale(0.95) translateY(0) rotate(-1deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0) rotate(0deg);
  }
}

@keyframes dijitalSparkleRotate {
  0% {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
  25% {
    transform: rotate(90deg) scale(1.1);
    opacity: 0.8;
  }
  50% {
    transform: rotate(180deg) scale(1);
    opacity: 1;
  }
  75% {
    transform: rotate(270deg) scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: rotate(360deg) scale(1);
    opacity: 1;
  }
}

/* Continuous subtle pulse */
@keyframes dijitalDiscountGlow {
  0%,
  100% {
    box-shadow:
      0 8px 32px rgba(139, 92, 246, 0.4),
      0 4px 16px rgba(99, 102, 241, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }
  50% {
    box-shadow:
      0 8px 32px rgba(139, 92, 246, 0.6),
      0 4px 16px rgba(99, 102, 241, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.5);
  }
}

.dijital-discount-badge {
  animation:
    dijitalDiscountPulse 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
    dijitalDiscountGlow 3s ease-in-out infinite;
}

/* Mobile responsive ? Fiyat panelindeki indirim rozeti (t?m formlar: Ders Notu, Dijital, Katalog) */
@media (max-width: 640px) {
  /* ?ndirim rozeti sat?r?: panel padding i?inde kal?r */
  .module-ders-notu-summary .module-ders-notu-discount-badge-row,
  .module-dijital-baski-summary .module-ders-notu-discount-badge-row,
  .module-katalog-summary .module-ders-notu-discount-badge-row {
    display: flex;
    justify-content: center;
  }

  /* ?ndirim Rozeti - Panel padding i?inde, y?ld?z + % + indirim yan yana */
  .module-ders-notu-summary .dijital-discount-badge,
  .module-dijital-baski-summary .dijital-discount-badge,
  .module-katalog-summary .dijital-discount-badge {
    padding: 10px 16px !important;
    gap: 10px !important;
    border-radius: 20px;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .module-ders-notu-summary .dijital-discount-sparkle,
  .module-dijital-baski-summary .dijital-discount-sparkle,
  .module-katalog-summary .dijital-discount-sparkle {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    order: 1;
  }

  .module-ders-notu-summary .dijital-discount-text,
  .module-dijital-baski-summary .dijital-discount-text,
  .module-katalog-summary .dijital-discount-text {
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    padding: 0 !important;
    order: 2;
    white-space: nowrap !important;
    text-align: center !important;
  }

  .module-ders-notu-summary .dijital-discount-label,
  .module-dijital-baski-summary .dijital-discount-label,
  .module-katalog-summary .dijital-discount-label {
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    opacity: 0.95 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    order: 3;
    text-align: center !important;
    white-space: nowrap !important;
  }

  #dijital-calc-title {
    flex-wrap: nowrap !important; /* ?kon ve ba?l?k ayn? sat?rda kalmal? */
    gap: 8px;
    align-items: flex-start !important; /* ?kon ?stte hizalans?n, ba?l?k iki sat?ra b?l?nebilir */
  }

  /* ?kon ve ba?l?k ayn? sat?rda, sadece ba?l?k metni iki sat?ra b?l?nebilir */
  #dijital-calc-title svg {
    flex-shrink: 0 !important;
    align-self: flex-start !important;
    margin-top: 2px !important; /* ?konu biraz a?a?? kayd?r, ba?l?kla hizala */
  }

  /* Ba?l?k metni i?in iki sat?r deste?i */
  #dijital-title-text {
    display: inline-block !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
  }

  .dijital-discount-badge {
    margin-left: 0;
    margin-top: 6px;
  }
}

/* Tablet responsive */
@media (min-width: 641px) and (max-width: 1024px) {
  .dijital-discount-badge {
    padding: 7px 14px;
    gap: 7px;
  }
}

/* Format Dropdown - Smaller font for dimensions */
#dijital_format {
  font-size: 14px;
}

#dijital_format option {
  font-size: 13px;
  padding: 8px;
}

/* Document Printing Calculation Message Animation */
@keyframes documentPrintingPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

.document-printing-pulse {
  animation: documentPrintingPulse 2s ease-in-out infinite;
}

/* Calculator Icon Animation - More Visible */
@keyframes calculatorBounce {
  0%,
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateY(-8px) scale(1.1);
    opacity: 0.9;
  }
}

.calculator-icon-animate {
  animation: calculatorBounce 1.5s ease-in-out infinite;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* ============================================
   Dijital Bask? - Extra Options Checkboxes
   Mobile Friendly
   ============================================ */

/* Extra option checkbox styling */
.dijital-extra-option {
  cursor: pointer;
  transition: all 0.2s ease;
}

.dijital-extra-option:checked {
  background-color: #2563eb;
  border-color: #2563eb;
}

.dijital-extra-option:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.5);
}

/* Extra option price highlights */
.dijital-extra-price {
  font-weight: 500;
  color: #059669;
}

/* Responsive checkbox size for mobile */
@media (max-width: 640px) {
  .dijital-extra-option {
    width: 18px;
    height: 18px;
  }
}

/* Price breakdown styling enhancements */
#dijital_results .space-y-2 > div {
  transition: background-color 0.2s ease;
}

#dijital_results .space-y-2 > div:hover {
  background-color: rgba(59, 130, 246, 0.05);
  border-radius: 6px;
}

/* Discount highlight animations */
@keyframes discountPulse {
  0%,
  100% {
    background-color: rgb(254, 243, 199);
  }
  50% {
    background-color: rgb(253, 230, 138);
  }
}

.bg-amber-50 {
  animation: discountPulse 2s ease-in-out infinite;
}

@keyframes discountPulseGreen {
  0%,
  100% {
    background-color: rgb(236, 253, 245);
  }
  50% {
    background-color: rgb(209, 250, 229);
  }
}

.bg-emerald-50 {
  animation: discountPulseGreen 2s ease-in-out infinite;
}

/* ============================================
   T?M MOD?LLER - MODERN FINAL TOTAL CARD
   ============================================ */

/* Base Final Total Card - All Modules */
.final-total-card {
  padding: 24px 28px;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 24px;
  margin-bottom: 24px;
}

.final-total-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.final-total-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.final-total-label {
  font-size: 16px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: -0.01em;
}

.final-total-value {
  font-size: 32px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.02em;
}

.final-total-value .currency-unit {
  font-size: 18px;
  font-weight: 500;
  margin-left: 8px;
  opacity: 0.9;
}

/* Color Variants */

/* Emerald - Ders Notu */
.final-total-emerald {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.final-total-emerald:hover {
  box-shadow: 0 12px 32px rgba(16, 185, 129, 0.4);
}

/* Blue - Rulo Bask? */
.final-total-blue {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.final-total-blue:hover {
  box-shadow: 0 12px 32px rgba(59, 130, 246, 0.4);
}

/* Red - Dijital Bask? */
.final-total-indigo {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.final-total-indigo:hover {
  box-shadow: 0 12px 32px rgba(239, 68, 68, 0.4);
}

/* Red - T?m Mod?ller ??in Ortak (Yeni Tasar?m) */
.final-total-red {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.final-total-red:hover {
  box-shadow: 0 12px 32px rgba(239, 68, 68, 0.4);
}

/* Final Total Price Container - Eski ve Yeni Fiyat Yan Yana */
.final-total-price-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.final-total-price-old {
  text-decoration: line-through;
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  font-weight: 500;
  bottom: 0px;
}

/* Ye?il Kazanc?n?z Konu?ma Balonu */
/* Discount Bubble Wrapper - Contains character and bubble */
.discount-bubble-wrapper {
  position: absolute;
  top: -50px;
  right: 20px;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  z-index: 10;
  animation: discountBubbleAppear 0.5s ease-out;
}

.discount-bubble {
  position: relative;
  background: #10b981;
  border-radius: 6px;
  padding: 12px 16px;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  top: -25px;
  z-index: 2;
}

.discount-bubble::before {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #10b981;
}

.discount-bubble-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.discount-bubble-label {
  font-size: 11px;
  font-weight: 900;
  color: #000000;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.discount-bubble-value {
  font-size: 16px;
  font-weight: 900;
  color: #000000;
}

.discount-bubble-value .currency-unit {
  font-size: 12px;
  font-weight: 900;
}

/* Premium E-commerce Character - Professional SaaS Style */
.discount-character {
  position: relative;
  width: 90px;
  height: 90px;
  z-index: 1; /* Behind the bubble */
  animation: characterAppear 0.6s ease-out 0.2s both;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.discount-character-head {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.discount-character-face {
  width: 62px;
  height: 62px;
  background: linear-gradient(223deg, #fdc3e4 0%, #ffa5d8 100%);
  border-radius: 50%;
  position: relative;
  box-shadow:
    0 4px 16px rgb(47 8 27 / 15%),
    0 2px 8px rgb(47 5 26 / 10%),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(236, 72, 153, 0.08);
  top: -25px;
}

/* Eyes - Professional and minimal */
.discount-character-eye {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #1f2937;
  border-radius: 50%;
  top: 24px;
  transition: height 0.15s ease;
  overflow: hidden;
}

.discount-character-eye-left {
  left: 20px;
}

.discount-character-eye-right {
  right: 20px;
}

/* Eyelid for blinking animation */
.discount-character-eyelid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
  border-radius: 50% 50% 0 0;
  transition: height 0.15s ease;
  animation: characterBlink 3.5s infinite;
}

/* Smile - Subtle and professional */
.discount-character-smile {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 10px;
  border: 2px solid #6b7280;
  border-top: none;
  border-radius: 0 0 20px 20px;
  opacity: 0.4;
}

/* Blink Animation - Natural and subtle */
@keyframes characterBlink {
  0%,
  92%,
  100% {
    height: 0;
  }
  94%,
  96% {
    height: 100%;
  }
}

/* Character Appear Animation */
@keyframes characterAppear {
  from {
    opacity: 0;
    transform: translateX(-15px) scale(0.85);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes discountBubbleAppear {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Responsive Design for Discount Bubble */
@media (max-width: 768px) {
  .discount-bubble-wrapper {
    top: -15px;
    right: 10px;
    gap: 8px;
  }

  .discount-bubble {
    padding: 10px 14px;
  }

  .discount-character {
    width: 70px;
    height: 70px;
  }

  .discount-character-face {
    width: 56px;
    height: 56px;
  }

  .discount-character-eye {
    width: 6px;
    height: 6px;
    top: 18px;
  }

  .discount-character-eye-left {
    left: 16px;
  }

  .discount-character-eye-right {
    right: 16px;
  }

  .discount-character-smile {
    bottom: 14px;
    width: 16px;
    height: 8px;
    border-width: 1.5px;
  }

  .discount-bubble-label {
    font-size: 10px;
  }

  .discount-bubble-value {
    font-size: 14px;
  }

  .discount-bubble-value .currency-unit {
    font-size: 11px;
  }

  .final-total-price-old {
    font-size: 16px;
  }
}

/* Medium breakpoint padding */
@media (min-width: 768px) {
  .md\:p-6 {
    padding: 2.5rem 1rem 1rem 1rem;
  }
}

/* Pink - Katalog */
.final-total-purple {
  background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
}

.final-total-purple:hover {
  box-shadow: 0 12px 32px rgba(236, 72, 153, 0.4);
}

/* Responsive Design for Final Total Cards */
@media (max-width: 768px) {
  .final-total-card {
    padding: 20px 24px;
  }

  .final-total-label {
    font-size: 15px;
  }

  .final-total-value {
    font-size: 28px;
  }

  .final-total-value .currency-unit {
    font-size: 16px;
  }
}

/* Payment Instructions Modal - content slide-up */
#payment-instructions-modal > div {
  animation: slideUpModal 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

#payment-instructions-modal > div.closing {
  animation: slideDownModal 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Payment Instructions Modal - Desktop IBAN Size */
#payment-instructions-modal
  [style*="font-size: 16px"][style*="font-weight: 700"][style*="color: #059669"][style*="font-family: monospace"]
  > span {
  font-size: 32px !important;
  font-weight: 900 !important;
}

/* Payment Instructions Modal - Mobile Optimization (Samsung S24) */
@media (max-width: 480px) {
  #payment-instructions-modal {
    padding: 10px !important;
    padding-top: 20px !important;
    align-items: flex-start !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #payment-instructions-modal > div {
    margin-top: 0 !important;
  }

  #payment-instructions-modal > div {
    padding: 16px !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: calc(100% - 20px) !important;
    box-sizing: border-box !important;
  }

  /* IBAN container - make it responsive */
  #payment-instructions-modal
    [style*="font-size: 16px"][style*="font-weight: 700"][style*="color: #059669"][style*="font-family: monospace"] {
    font-size: 14px !important;
    letter-spacing: 0.3px !important;
    word-break: break-all !important;
    overflow-wrap: break-word !important;
    line-height: 1.4 !important;
    padding: 10px !important;
  }

  /* IBAN text - make it more prominent */
  #payment-instructions-modal
    [style*="font-size: 16px"][style*="font-weight: 700"][style*="color: #059669"][style*="font-family: monospace"]
    > span {
    font-size: 18.5px !important;
    font-weight: 900 !important;
  }

  /* Copy button - same size as IBAN text */
  #copy-iban-btn {
    font-size: 14px !important;
    height: 32px !important;
    padding: 6px 10px !important;
  }

  /* Order reference - make it responsive */
  #payment-instructions-modal
    [style*="font-family: monospace"][style*="word-break: break-all"] {
    font-size: 12px !important;
    word-break: break-all !important;
    overflow-wrap: break-word !important;
    line-height: 1.5 !important;
  }

  /* Bank name and account name - make them responsive */
  #payment-instructions-modal
    [style*="font-size: 16px"][style*="font-weight: 600"][style*="color: #111827"] {
    font-size: 14px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.5 !important;
  }

  /* Copy IBAN button - smaller on mobile */
  #copy-iban-btn {
    width: 100% !important;
    margin-top: 8px !important;
    margin-left: 0 !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
    height: 26px !important;
    line-height: 1 !important;
  }

  /* Close button - smaller on mobile */
  #payment-modal-close {
    width: 32px !important;
    height: 32px !important;
  }

  #payment-modal-close svg {
    width: 14px !important;
    height: 14px !important;
  }

  /* Modal content padding */
  #payment-instructions-modal [style*="background: #f9fafb"] {
    padding: 12px !important;
  }

  /* Modal title and content spacing */
  #payment-instructions-modal h2 {
    font-size: 20px !important;
    margin-bottom: 16px !important;
  }

  #payment-instructions-modal h3 {
    font-size: 16px !important;
    margin-bottom: 12px !important;
  }

  /* Reduce spacing between elements */
  #payment-instructions-modal [style*="margin-bottom: 16px"] {
    margin-bottom: 12px !important;
  }

  #payment-instructions-modal [style*="margin-bottom: 24px"] {
    margin-bottom: 16px !important;
  }

  /* Close button positioning */
  #payment-modal-close {
    top: -8px !important;
    right: -8px !important;
  }
}

@media (max-width: 480px) {
  .final-total-card {
    padding: 18px 20px;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .final-total-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .final-total-label {
    font-size: 14px;
  }

  .final-total-value {
    font-size: 26px;
  }

  .final-total-value .currency-unit {
    font-size: 15px;
    margin-left: 6px;
  }
}

/* ============================================
   KATALOG MOD?L? - MODERN UI8 STYLE
   ============================================ */

/* Katalog Calculator Card - Main Container */
.katalog-calculator-card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.06);
  overflow: hidden;
  margin-bottom: 32px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.katalog-calculator-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* Katalog Header */
.katalog-header {
  background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
  padding: 24px 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.katalog-title {
  font-size: 1.25rem !important; /* 20px - di?er mod?llerle ayn? */
  font-weight: 900 !important; /* Di?er mod?llerle ayn? */
  font-family: "Inter", sans-serif !important;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 12px;
  letter-spacing: -0.02em;
  flex-wrap: wrap;
}

/* Katalog Body */
.katalog-body {
  padding: 32px;
}

/* Section Containers */
.katalog-section {
  background: #f8fafc;
  border-radius: 6px;
  padding: 28px;
  margin-bottom: 24px;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.katalog-section:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.katalog-section-inner {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-color: #bae6fd;
}

.katalog-section-cover {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border-color: #fed7aa;
}

/* Section Title */
.katalog-section-title {
  font-size: 16px;
  font-weight: 900;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
}

.katalog-section-title svg {
  color: #667eea;
}

.katalog-section-cover .katalog-section-title svg {
  color: #f97316;
}

/* Field Containers */
.katalog-fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.katalog-field-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.katalog-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.katalog-field-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  opacity: 0.5;
  pointer-events: none;
  transition: all 0.3s ease;
}

.katalog-field-grid-3.active {
  opacity: 1;
  pointer-events: auto;
}

/* Labels - T?m Mod?ller ??in Ortak Stil */
.katalog-label,
label.block.text-sm.font-semibold,
label[class*="block"][class*="text-sm"][class*="font-semibold"],
label[for*="rulo"],
label[for*="dijital"],
label[for*="kartvizit"],
label[for*="brosur"],
label[for*="katalog"],
label[for*="paperSize"],
label[for*="pageCount"],
label[for*="quantity"],
label[for*="copyQuantity"],
label[for*="bindingType"] {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #334155;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}

.katalog-field-wrapper:focus-within .katalog-label {
  color: #667eea;
}

/* Inputs */
.katalog-input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1e293b;
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 6px;
  outline: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif !important;
}

.katalog-input:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.katalog-input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.12);
  background: #ffffff;
}

/* Number input spinner buttons - show on all devices including mobile */
#awp-printwise-root input[type="number"] {
  position: relative !important;
  padding-right: 2.5rem !important;
}

#awp-printwise-root input[type="number"]::-webkit-inner-spin-button,
#awp-printwise-root input[type="number"]::-webkit-outer-spin-button {
  opacity: 0 !important;
  height: 50% !important;
  width: 24px !important;
  cursor: pointer !important;
  -webkit-appearance: inner-spin-button !important;
  appearance: inner-spin-button !important;
  position: absolute !important;
  right: 4px !important;
  margin: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease !important;
}

/* Upper spinner (up arrow) */
#awp-printwise-root input[type="number"]::-webkit-inner-spin-button {
  top: 0 !important;
  bottom: auto !important;
}

/* Lower spinner (down arrow) */
#awp-printwise-root input[type="number"]::-webkit-outer-spin-button {
  bottom: 0 !important;
  top: auto !important;
}

#awp-printwise-root
  input[type="number"]:focus::-webkit-inner-spin-button,
#awp-printwise-root
  input[type="number"]:focus::-webkit-outer-spin-button {
  opacity: 1 !important;
  pointer-events: auto !important;
  display: block !important;
}

/* Mobile: Larger spinner buttons with more spacing */
@media (max-width: 768px) {
  /* Add more padding on the right for spinner buttons on mobile */
  #awp-printwise-root input[type="number"] {
    position: relative !important;
    padding-right: 50px !important;
  }

  .katalog-input[type="number"] {
    position: relative !important;
    padding-right: 50px !important;
  }

  .input-shared[type="number"] {
    position: relative !important;
    padding-right: 50px !important;
  }

  #awp-printwise-root input[type="number"]::-webkit-inner-spin-button,
  #awp-printwise-root
    input[type="number"]::-webkit-outer-spin-button {
    height: 50% !important;
    width: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    right: 6px !important;
    opacity: 0 !important;
    cursor: pointer !important;
    -webkit-appearance: inner-spin-button !important;
    appearance: inner-spin-button !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease !important;
  }

  /* Upper spinner (up arrow) on mobile */
  #awp-printwise-root
    input[type="number"]::-webkit-inner-spin-button {
    top: 0 !important;
    bottom: auto !important;
  }

  /* Lower spinner (down arrow) on mobile */
  #awp-printwise-root
    input[type="number"]::-webkit-outer-spin-button {
    bottom: 0 !important;
    top: auto !important;
  }

  #awp-printwise-root
    input[type="number"]:focus::-webkit-inner-spin-button,
  #awp-printwise-root
    input[type="number"]:focus::-webkit-outer-spin-button {
    opacity: 1 !important;
    pointer-events: auto !important;
    display: block !important;
  }

  /* Make number inputs show focus state clearly on mobile */
  #awp-printwise-root input[type="number"]:focus,
  .katalog-input[type="number"]:focus,
  .input-shared[type="number"]:focus {
    border-color: #ff8300 !important;
    box-shadow: 0 0 0 3px rgba(255, 131, 0, 0.2) !important;
    outline: none !important;
  }
}

/* Ensure number inputs are editable and not readonly */
#awp-printwise-root
  input[type="number"]:not([readonly]):not([disabled]) {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  user-select: text !important;
  pointer-events: auto !important;
  height: 48px;
  font-size: 16px;
}

.katalog-input::placeholder {
  color: #94a3b8;
}

/* Katalog Sayfa Say?s? Spinner Wrapper - WordPress Style */
.katalog-spinner-wrapper {
  position: relative;
  width: 100%;
}

.katalog-input-with-spinner {
  padding-right: 50px !important;
}

.katalog-spinner-controls {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  height: calc(100% - 4px);
  width: 24px;
  border-left: 1px solid #ddd;
  background: #f7f7f7;
  border-radius: 0 12px 12px 0;
}

.katalog-spinner-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  color: #555;
  transition: all 0.15s ease;
  border-bottom: 1px solid #ddd;
  min-height: 0;
}

.katalog-spinner-btn:last-child {
  border-bottom: none;
  border-radius: 0 0 12px 0;
}

.katalog-spinner-btn:first-child {
  border-radius: 0 12px 0 0;
}

.katalog-spinner-btn:hover {
  background: #f0f0f1;
  color: #2271b1;
}

.katalog-spinner-btn:active {
  background: #dcdcde;
  color: #135e96;
}

.katalog-spinner-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  color: #a7aaad;
}

.katalog-spinner-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* Focus state for input with spinner */
.katalog-input-with-spinner:focus {
  padding-right: 50px !important;
}

.katalog-input-with-spinner:focus + .katalog-spinner-controls {
  border-left-color: #667eea;
  background: #fafafa;
}

/* Hide default spinner for katalog input */
.katalog-input-with-spinner::-webkit-inner-spin-button,
.katalog-input-with-spinner::-webkit-outer-spin-button {
  display: none !important;
  -webkit-appearance: none !important;
  margin: 0 !important;
}

.katalog-input-with-spinner {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .katalog-spinner-controls {
    width: 28px;
  }

  .katalog-input-with-spinner {
    padding-right: 54px !important;
  }

  .katalog-spinner-btn svg {
    width: 18px;
    height: 18px;
  }
}

/* Select Styling */
.katalog-select {
  width: 100%;
  height: 52px;
  padding: 0 40px 0 16px;
  font-size: 15px;
  font-weight: 500;
  color: #1e293b;
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 6px;
  outline: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  appearance: none;
  font-family: "Inter", sans-serif;
}

.katalog-select:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.katalog-select:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.12);
  background: #ffffff;
}

.katalog-select:disabled {
  background: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
  border-color: #e2e8f0;
}

/* Toggle Wrapper */
.katalog-toggle-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: #ffffff;
  border-radius: 6px;
  border: 2px solid #e2e8f0;
  transition: all 0.3s ease;
}

.katalog-toggle-wrapper:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Toggle Switch - Enhanced - REMOVED: Duplicate styles, using Uiverse.io style above */

/* Results Card */
.katalog-results-card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.06);
  overflow: hidden;
  margin-bottom: 32px;
  padding: 32px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.katalog-results-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* Results Header */
.katalog-results-header {
  margin-bottom: 28px;
}

.katalog-results-title {
  font-size: 22px;
  font-weight: 900;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 12px;
  letter-spacing: -0.02em;
}

.katalog-results-title svg {
  color: #667eea;
}

/* Metrics Grid */
.katalog-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

/* Metric Cards */
.katalog-metric-card {
  padding: 14px;
  border-radius: 6px;
  text-align: center;
  border: 2px solid;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.katalog-metric-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.katalog-metric-blue {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-color: #93c5fd;
}

.katalog-metric-emerald {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border-color: #6ee7b7;
}

.katalog-metric-purple {
  background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
  border-color: #d8b4fe;
}

.katalog-metric-orange {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border-color: #fdba74;
}

.katalog-metric-label {
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  margin-bottom: 12px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.katalog-metric-value {
  font-size: 28px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.katalog-metric-blue .katalog-metric-value {
  color: #2563eb;
}

.katalog-metric-emerald .katalog-metric-value {
  color: #059669;
}

.katalog-metric-purple .katalog-metric-value {
  color: #9333ea;
}

.katalog-metric-orange .katalog-metric-value {
  color: #ea580c;
}

/* Price Breakdown - UI8 Style */
.katalog-price-breakdown {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
  padding: 20px 0;
  border-top: 2px solid rgba(241, 245, 249, 0.8);
  border-bottom: 2px solid rgba(241, 245, 249, 0.8);
}

.katalog-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  border: 1px solid rgba(226, 232, 240, 0.6);
  border-radius: 6px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.katalog-price-row:hover {
  background: linear-gradient(135deg, #f1f5f9 0%, #f8fafc 100%);
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-color: rgba(203, 213, 225, 0.8);
}

.katalog-price-label {
  font-size: 15px;
  font-weight: 500;
  color: #64748b;
}

.katalog-price-value {
  font-size: 16px;
  font-weight: 900;
  color: #1e293b;
}

.katalog-price-strikethrough {
  color: #6b7280 !important;
  text-decoration: line-through;
  text-decoration-color: #000000;
  text-decoration-thickness: 2px;
}

/* ============================================
   AWP Details Accordion - T?m Mod?ller (Dijital, Rulo, Fiyat Detaylar?)
   Tutarl? hizalama, font, arka plan
   ============================================ */
.awp-details-accordion {
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  transition: all 0.25s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.awp-details-accordion:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.awp-details-accordion--price {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.awp-details-accordion-toggle {
  width: 100%;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: none;
  cursor: pointer;
  background: transparent;
  text-align: left;
  transition: background 0.2s ease;
}

.awp-details-accordion-toggle:hover {
  background: rgba(255, 255, 255, 0.6);
}

.awp-details-accordion-toggle[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid #e2e8f0;
}

.awp-details-accordion-label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.awp-details-accordion-icon-left {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #6366f1;
}

.awp-details-accordion-title-text {
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
  letter-spacing: -0.01em;
}

.awp-details-accordion-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #64748b;
  transition: transform 0.25s ease;
}

.awp-details-accordion-toggle[aria-expanded="true"] .awp-details-accordion-chevron {
  transform: rotate(180deg);
}

.awp-details-accordion-content {
  padding: 16px 20px;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  font-size: 13px;
}

/* Ek Hizmetler / Ek Uygulamalar accordion ? form alanlar? */
.awp-extra-services-accordion {
  margin-top: 0;
}

.awp-extra-services-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px 0 16px;
  min-height: 48px;
}

/* Tooltip + ba�l?k ayn? dikey merkezde (sar? �izgi hizas?) */
.awp-extra-services-header .awp-extra-services-tooltip {
  position: static;
  transform: none;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  line-height: 0;
  margin: 0;
  flex-shrink: 0;
}

.awp-extra-services-header .awp-extra-services-tooltip .rulo-tooltip-btn {
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.awp-extra-services-header .awp-extra-services-toggle {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 4px !important;
  align-items: center;
}

.awp-extra-services-header .awp-details-accordion-label {
  align-items: center;
}

.awp-extra-services-header .awp-details-accordion-title-text {
  line-height: 1.25;
  display: inline-flex;
  align-items: center;
}

/* button { font-weight: 600 !important } kural?n? ge? */
#awp-printwise-root .awp-extra-services-accordion .awp-extra-services-toggle,
#awp-printwise-root .awp-extra-services-accordion .awp-details-accordion-title-text {
  font-weight: 900 !important;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif !important;
}

.awp-extra-services-desc {
  color: #6b7280;
  font-size: 11px;
  line-height: 1.35;
}

/* Form alt? mikro metinler ? tek sat?r, | ile ayr?lm?? */
.awp-form-footer-hints {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 8px 0 0;
  padding: 0;
  font-size: 10px;
  line-height: 1.4;
}

.awp-form-footer-hint {
  margin: 0;
}

.awp-form-footer-hint--primary {
  color: #6b7280;
  font-weight: 500;
}

.awp-form-footer-hint--secondary {
  color: #9ca3af;
  font-style: italic;
}

.awp-form-footer-hint-sep {
  color: #d1d5db;
  font-style: normal;
  font-weight: 400;
  user-select: none;
}

.awp-price-breakdown-content {
  padding: 12px 20px 16px;
  font-size: 13px;
}

/* ============================================
   AWP Schema Section - Yerle?im Plan?
   Ba?l?k, ?zet, butonlar, ?izim alan? hizalamas?
   ============================================ */
.awp-schema-section {
  width: 100%;
}

.awp-schema-title {
  font-size: 14px;
  font-weight: 500;
  color: #334155;
  text-align: center;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

.awp-schema-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 12px;
}

.awp-schema-summary-row .awp-schema-summary {
  margin-bottom: 0;
  flex: 1 1 160px;
  max-width: 100%;
}

.awp-schema-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid #bfdbfe;
  border-radius: 6px;
}

.awp-schema-summary-label {
  font-size: 13px;
  font-weight: 500;
  color: #475569;
}

.awp-schema-summary-value {
  font-size: 15px;
  font-weight: 500;
  color: #2563eb;
}

.awp-schema-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.awp-schema-sheet-size,
.awp-schema-reset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  min-height: 40px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  color: #ffffff;
  background: #2563eb;
  border-radius: 6px;
  box-sizing: border-box;
}

.awp-schema-sheet-size {
  gap: 0;
}

.awp-schema-reset-btn {
  gap: 8px;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
}

.awp-schema-reset-btn:hover {
  background: #1d4ed8;
}

.awp-schema-reset-btn:active {
  transform: scale(0.98);
}

.awp-schema-reset-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.awp-schema-canvas {
  min-height: 100px;
  padding: 12px;
  border: 1px dashed #93c5fd;
  border-radius: 6px;
  background: rgba(239, 246, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: hidden;
}

.awp-schema-canvas--rulo {
  overflow-x: auto;
  overflow-y: auto;
}

/* Center and preserve aspect for rulo canvas contents.
   Prevent left-alignment when content is wider than container
   and avoid distortion by forcing natural aspect ratio. */
.awp-schema-canvas--rulo {
  display: flex;
  justify-content: center;
  align-items: center;
  /* allow horizontal scroll but keep inner content centered when possible */
  -webkit-overflow-scrolling: touch;
}

.awp-schema-canvas--rulo > * {
  /* Prefer intrinsic sizing and prevent stretching */
  max-width: 100%;
  width: auto !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
  object-fit: contain;
  transform-origin: center;
}

/* Specific fixes for SVG/canvas elements used as paper drawing */
.awp-schema-canvas--rulo svg,
.awp-schema-canvas--rulo canvas,
.awp-schema-canvas--rulo img {
  max-width: 100%;
  width: auto !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
}

/* Detayl? Bilgiler Accordion - UI8 Style */
.katalog-details-accordion {
  margin-top: 24px;
  margin-bottom: 24px;
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.katalog-details-accordion:hover {
  border-color: #cbd5e1;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.04);
  transform: translateY(-2px);
}

.katalog-details-accordion-toggle {
  width: 100%;
  padding: 10px 24px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: left;
}

.katalog-details-accordion-toggle:hover {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.katalog-details-accordion-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.katalog-details-accordion-toggle[aria-expanded="true"] {
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
}

/* Detayl? Bilgiler Ba?l??? - T?m Mod?ller ??in Ortak Stil (Hesaplama Sonu?lar? ile Ayn?) */
.katalog-details-accordion-title,
.rulo-details-label,
.dijital-details-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 900;
  color: #1e293b;
  letter-spacing: normal;
}

.katalog-details-accordion-title svg,
.rulo-details-label svg,
.dijital-details-label svg {
  width: 20px;
  height: 20px;
  color: #667eea;
  flex-shrink: 0;
}

.katalog-details-accordion-icon {
  width: 20px;
  height: 20px;
  color: #64748b;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.katalog-details-accordion-toggle[aria-expanded="true"]
  .katalog-details-accordion-icon {
  transform: rotate(180deg);
}

.katalog-details-accordion-content {
  padding: 10px;
  background: #ffffff;
  animation: katalogAccordionSlideDown 0.3s ease-out;
  border-top: 1px solid rgba(226, 232, 240, 0.5);
}

.katalog-details-accordion-content[style*="display: none"] {
  animation: katalogAccordionSlideUp 0.3s ease-out;
}

@keyframes katalogAccordionSlideDown {
  from {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  to {
    opacity: 1;
    max-height: 1000px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

@keyframes katalogAccordionSlideUp {
  from {
    opacity: 1;
    max-height: 1000px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  to {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* Katalog Total Card - Now uses global final-total-card classes */
/* Kept for backward compatibility if needed */

/* Responsive Design */
@media (max-width: 768px) {
  .katalog-body {
    padding: 24px;
  }

  .katalog-section {
    padding: 20px;
  }

  .katalog-header {
    padding: 20px 24px;
  }

  .katalog-title {
    font-size: 18px;
  }

  .katalog-results-card {
    padding: 24px;
  }

  .katalog-metrics-grid {
    grid-template-columns: 1fr;
  }

  .katalog-metric-card {
    padding: 20px;
  }

  .katalog-metric-value {
    font-size: 24px;
  }

  .katalog-details-accordion {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .katalog-details-accordion-toggle {
    padding: 14px 16px;
  }

  .katalog-details-accordion-title,
  .rulo-details-label,
  .dijital-details-label {
    font-size: 18px;
  }

  .katalog-details-accordion-content {
    padding: 16px;
  }

  .katalog-total-value {
    font-size: 28px;
  }

  .katalog-field-grid,
  .katalog-field-grid-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .katalog-body {
    padding: 16px;
  }

  .katalog-section {
    padding: 16px;
  }

  .katalog-header {
    padding: 16px 20px;
  }

  .katalog-title {
    font-size: 1.1rem !important;
  }

  .katalog-total-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ============================================
   Module Video Modal Styles
   ============================================ */

/* Video Button in Module Header */
.module-video-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: white;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
}

.module-video-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.1);
}

.module-video-btn:active {
  transform: scale(0.95);
}

/* PRODUCT OVERVIEW Section - Above PRODUCT INFORMATION */
.module-product-overview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0;
  margin-top: 16px;
  padding: 14px;
  background: var(--awp-summary-panel-advice-bg, #1f1b38);
  border-radius: 6px;
  border: 1px solid rgba(167, 158, 243, 0.15);
}

.module-product-overview-label {
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  color: var(--awp-summary-panel-product-overview-color, #059669);
}

/* Premium Video Button - PRODUCT OVERVIEW section (light bg context) */
.module-video-btn-premium {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border: 2px solid rgba(5, 150, 105, 0.4) !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
}

.module-video-btn-premium:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  border-color: #059669 !important;
  transform: scale(1.12);
  box-shadow:
    0 4px 16px rgba(16, 185, 129, 0.5),
    0 0 0 3px rgba(16, 185, 129, 0.2);
}

.module-video-btn-premium:active {
  transform: scale(0.98);
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

@media (max-width: 640px) {
  .module-video-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
  }
}

/* Video Modal ? telefon ?er?evesi (viewport-safe) */
.module-video-modal {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  z-index: 9999999 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    max(16px, env(safe-area-inset-top, 0px))
    max(16px, env(safe-area-inset-right, 0px))
    max(16px, env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  overflow: hidden;
  animation: fadeIn 0.3s ease;
}

.module-video-modal-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(99, 102, 241, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 80%, rgba(16, 185, 129, 0.12) 0%, transparent 50%),
    rgba(8, 10, 20, 0.78);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  z-index: 9999998 !important;
}

.module-video-modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-sizing: border-box;
  box-shadow: none;
  z-index: 9999999 !important;
  animation: slideUpModal 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: visible;
}

@keyframes slideUpModal {
  from {
    transform: translateY(28px) scale(0.96);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes slideDownModal {
  from {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  to {
    transform: translateY(24px) scale(0.97);
    opacity: 0;
  }
}

/* Neon kapat ? telefon g?vdesinin sa? ?st ?status LED? butonu */
.module-video-modal-close {
  position: absolute;
  top: 28px;
  right: 28px;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  z-index: 6 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin: 0 !important;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #ecfeff;
  background:
    radial-gradient(circle at 35% 30%, rgba(165, 243, 252, 0.35) 0%, transparent 55%),
    linear-gradient(160deg, #1e293b 0%, #0f172a 55%, #020617 100%);
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.45),
    0 0 10px rgba(34, 211, 238, 0.55),
    0 0 22px rgba(16, 185, 129, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 4px rgba(0, 0, 0, 0.45);
  transition:
    transform 0.2s ease,
    box-shadow 0.25s ease,
    color 0.2s ease,
    filter 0.2s ease;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  overflow: visible;
}

.module-video-modal-close-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  pointer-events: none;
  border: 1px solid rgba(34, 211, 238, 0.35);
  box-shadow:
    0 0 8px rgba(34, 211, 238, 0.4),
    inset 0 0 6px rgba(16, 185, 129, 0.25);
  animation: moduleVideoNeonPulse 2.4s ease-in-out infinite;
}

.module-video-modal-close svg {
  width: 12px;
  height: 12px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.9));
}

.module-video-modal-close:hover {
  color: #fff;
  transform: scale(1.08);
  box-shadow:
    0 0 0 1px rgba(45, 212, 191, 0.75),
    0 0 14px rgba(34, 211, 238, 0.85),
    0 0 28px rgba(16, 185, 129, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4);
  filter: brightness(1.12);
}

.module-video-modal-close:hover .module-video-modal-close-ring {
  animation-duration: 1.1s;
  border-color: rgba(45, 212, 191, 0.7);
}

.module-video-modal-close:active {
  transform: scale(0.92);
  filter: brightness(0.95);
}

.module-video-modal-close:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.85),
    0 0 0 4px rgba(34, 211, 238, 0.7),
    0 0 18px rgba(34, 211, 238, 0.7);
}

@keyframes moduleVideoNeonPulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}

/* Telefon g?vdesi */
.module-video-phone {
  --phone-bezel: 10px;
  --phone-radius: 36px;
  --phone-screen-radius: 28px;
  position: relative;
  width: min(
    320px,
    88vw,
    calc(
      (
        100dvh
        - 48px
        - env(safe-area-inset-top, 0px)
        - env(safe-area-inset-bottom, 0px)
      ) * 9 / 16
    )
  );
  max-height: calc(
    100dvh
    - 48px
    - env(safe-area-inset-top, 0px)
    - env(safe-area-inset-bottom, 0px)
  );
  aspect-ratio: 9 / 19.5;
  padding: var(--phone-bezel);
  box-sizing: border-box;
  background: linear-gradient(160deg, #3a3d48 0%, #1a1c22 42%, #0c0d11 100%);
  border-radius: var(--phone-radius);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 0 3px #0a0b0f,
    0 28px 60px rgba(0, 0, 0, 0.55),
    0 8px 24px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}

.module-video-phone::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: calc(var(--phone-radius) - 4px);
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  z-index: 2;
}

/* Yan tu?lar */
.module-video-phone-btn {
  position: absolute;
  background: linear-gradient(180deg, #4a4d58 0%, #2a2c34 100%);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
  z-index: 0;
}

.module-video-phone-btn--silent {
  left: -3px;
  top: 18%;
  width: 3px;
  height: 22px;
  border-radius: 2px 0 0 2px;
}

.module-video-phone-btn--vol-up {
  left: -3px;
  top: 28%;
  width: 3px;
  height: 36px;
  border-radius: 2px 0 0 2px;
}

.module-video-phone-btn--vol-down {
  left: -3px;
  top: 38%;
  width: 3px;
  height: 36px;
  border-radius: 2px 0 0 2px;
}

.module-video-phone-btn--power {
  right: -3px;
  top: 30%;
  width: 3px;
  height: 52px;
  border-radius: 0 2px 2px 0;
}

.module-video-phone-bezel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #000;
  border-radius: var(--phone-screen-radius);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.module-video-phone-notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 28%;
  min-width: 72px;
  max-width: 110px;
  height: 22px;
  background: #0a0a0c;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.module-video-phone-speaker {
  display: block;
  width: 36%;
  height: 4px;
  border-radius: 2px;
  background: #2a2b32;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6);
}

.module-video-phone-camera {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #3b82f6 0%, #1e3a5f 45%, #0f172a 100%);
  box-shadow: 0 0 0 1.5px #1a1b20;
}

.module-video-wrapper {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  background: #000;
  border-radius: 0;
  overflow: hidden;
}

.module-video-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: none;
  outline: none;
  background: #000;
}

.module-video-phone-home {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  width: 34%;
  max-width: 120px;
  height: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

@media (max-width: 768px) {
  .module-video-modal {
    padding:
      max(12px, env(safe-area-inset-top, 0px))
      max(12px, env(safe-area-inset-right, 0px))
      max(12px, env(safe-area-inset-bottom, 0px))
      max(12px, env(safe-area-inset-left, 0px));
  }

  .module-video-modal-content {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 100%;
  }

  .module-video-modal-close {
    top: 28px !important;
    right: 28px !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
  }

  .module-video-modal-close svg {
    width: 11px;
    height: 11px;
  }

  .module-video-phone {
    --phone-bezel: 8px;
    --phone-radius: 28px;
    --phone-screen-radius: 22px;
    width: min(
      340px,
      92vw,
      calc(
        (
          100dvh
          - 40px
          - env(safe-area-inset-top, 0px)
          - env(safe-area-inset-bottom, 0px)
        ) * 9 / 16
      )
    );
    max-height: calc(
      100dvh
      - 40px
      - env(safe-area-inset-top, 0px)
      - env(safe-area-inset-bottom, 0px)
    );
  }

  .module-video-phone-btn {
    display: none;
  }
}

/* Tablet / k???k laptop */
@media (min-width: 769px) and (max-width: 1366px) {
  .module-video-phone {
    --phone-radius: 32px;
    --phone-screen-radius: 26px;
    width: min(
      280px,
      78vw,
      calc(
        (
          100dvh
          - 56px
          - env(safe-area-inset-top, 0px)
          - env(safe-area-inset-bottom, 0px)
        ) * 9 / 16
      )
    );
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ============================================
   Google Maps Modal Styles
   ============================================ */

/* Google Maps Modal - Modern Glass Design */
.google-maps-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999999 !important; /* Highest z-index - above all buttons */
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

.google-maps-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  z-index: 9999998 !important; /* Just below modal content */
}

.google-maps-modal-content {
  position: relative;
  width: 90%;
  max-width: 900px; /* Harita i?in daha geni? */
  height: 80vh;
  animation: slideUpModal 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  max-height: 700px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  padding: 20px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.3),
    0 8px 32px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  z-index: 9999999 !important; /* Highest z-index - above all buttons */
  animation: slideUp 0.3s ease;
}

.google-maps-modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  background: rgba(239, 68, 68, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 10000000 !important; /* Highest - above everything */
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  transition: all 0.3s ease;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  box-shadow:
    0 4px 12px rgba(239, 68, 68, 0.4),
    0 2px 6px rgba(0, 0, 0, 0.2);
}

.google-maps-modal-close:hover {
  background: #dc2626;
  transform: scale(1.1);
}

.google-maps-modal-close:active {
  transform: scale(0.95);
}

.google-maps-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
}

.google-maps-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Mobile responsive - Dikey video gibi tam ekran */
@media (max-width: 768px) {
  .google-maps-modal-content {
    width: 100% !important;
    height: 100vh !important;
    max-width: 100% !important;
    max-height: 100vh !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  .google-maps-modal-close {
    top: 10px !important;
    right: 10px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    background: rgba(239, 68, 68, 0.9) !important;
    backdrop-filter: blur(10px);
  }

  .google-maps-wrapper {
    border-radius: 0 !important;
    height: 100% !important;
  }
}

/* Tablet responsive */
@media (min-width: 769px) and (max-width: 1024px) {
  .google-maps-modal-content {
    width: 95%;
    height: 85vh;
    max-height: 800px;
  }
}

/* ============================================
   Proforma Fatura ?nizleme Modal
   ============================================ */
.awp-proforma-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999999 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

.awp-proforma-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1;
  animation: fadeIn 0.25s ease;
}

.awp-proforma-modal-content {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 92vh;
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.2);
  z-index: 2;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  animation: slideUpModal 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.awp-proforma-modal-content.closing {
  animation: slideDownModal 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@media (min-width: 641px) {
  .awp-proforma-modal-content {
    min-height: 850px;
    max-height: 850px;
  }
}

/* Header: ba?l?k + kapat butonu ayn? sat?rda */
.awp-proforma-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 20px 12px;
  flex-shrink: 0;
  min-height: 52px;
  box-sizing: border-box;
}

.awp-proforma-modal-title {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.125rem;
  font-weight: 900;
  color: #0f172a;
  margin: 0;
  flex: 1;
  min-width: 0;
}

/* Kapat butonu: ba?l?k y?ksekli?inde, Flatsome ?ak??mas?n? ?nlemek i?in all: unset + ?zel stiller */
.awp-proforma-modal-close {
  flex-shrink: 0;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: #f1f5f9 !important;
  border-radius: 6px !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  box-shadow: none !important;
  font: inherit !important;
  line-height: 1 !important;
}

.awp-proforma-modal-close:hover {
  background: #e2e8f0 !important;
}

.awp-proforma-modal-close svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.awp-proforma-modal-preview-wrap {
  position: relative;
  flex: 1;
  min-height: 300px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  margin: 0 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}

.awp-proforma-pdf-preview {
  width: 100%;
  flex: 1;
  min-height: 300px;
  border: none;
  display: block;
}

.awp-proforma-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  color: #64748b;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.awp-proforma-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #e2e8f0;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: awp-proforma-spin 0.8s linear infinite;
}

@keyframes awp-proforma-spin {
  to { transform: rotate(360deg); }
}

.awp-proforma-actions {
  display: flex;
  gap: 12px;
  padding: 20px;
  flex-shrink: 0;
}

.awp-proforma-btn {
  flex: 1;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px !important;
  margin: 0 !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
  box-shadow: none !important;
  min-height: 44px;
}

.awp-proforma-btn-download {
  background: #3b82f6 !important;
  color: #fff !important;
}

.awp-proforma-btn-download:hover {
  background: #2563eb !important;
}

.awp-proforma-btn-email {
  background: #10b981 !important;
  color: #fff !important;
}

.awp-proforma-btn-email:hover {
  background: #059669 !important;
}

.awp-proforma-btn-share {
  background: #25d366 !important;
  color: #fff !important;
}

.awp-proforma-btn-share:hover {
  background: #20bd5a !important;
}

.awp-proforma-sent-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  color: #059669;
}

.awp-proforma-sent-message svg {
  stroke-width: 2;
}

/* Proforma Email Sub-Modal */
.awp-proforma-email-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000000 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* Buzlu cam: arka plan bulan?kl??? (Chrome, Firefox, Safari, Edge) */
.awp-proforma-email-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  z-index: 1;
  animation: fadeIn 0.25s ease;
}

.awp-proforma-email-modal-content {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: #ffffff;
  border-radius: 6px;
  padding: 24px;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.2);
  z-index: 2;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  animation: slideUpModal 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.awp-proforma-email-modal-content.closing {
  animation: slideDownModal 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Header: ba?l?k + kapat butonu (PDF modal ile ayn? d?zen, Flatsome ?ak??mas?n? ?nlemek i?in !important) */
.awp-proforma-email-modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  min-height: 40px !important;
  box-sizing: border-box !important;
}

.awp-proforma-email-modal-close {
  flex-shrink: 0 !important;
  position: static !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: #f1f5f9 !important;
  border-radius: 6px !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.2s;
  box-shadow: none !important;
  font: inherit !important;
  line-height: 1 !important;
  color: #0f172a !important;
}
.awp-proforma-email-modal-close:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}
.awp-proforma-email-modal-close:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3) !important;
}
.awp-proforma-email-modal-close svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

.awp-proforma-email-modal-title {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.9375rem;
  font-weight: 900;
  margin: 0;
  color: #0f172a;
  flex: 1;
  min-width: 0;
}

.awp-proforma-email-modal-desc {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.75rem;
  color: #64748b;
  margin: 0 0 14px;
}

.awp-proforma-email-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.awp-proforma-form-input,
.awp-proforma-email-input {
  width: 100% !important;
  min-width: 0 !important;
  padding: 9px 12px !important;
  margin: 0 !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
  background: #fff !important;
  color: #0f172a !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.awp-proforma-form-input:hover,
.awp-proforma-email-input:hover {
  border-color: #cbd5e1 !important;
}

.awp-proforma-form-input:focus,
.awp-proforma-email-input:focus {
  outline: none !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
}

.awp-proforma-form-input:active,
.awp-proforma-email-input:active {
  border-color: #2563eb !important;
}

.awp-proforma-form-input::placeholder,
.awp-proforma-email-input::placeholder {
  color: #94a3b8 !important;
}

/* Telefon: ?lke kodu dropdown + numara */
.awp-proforma-phone-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}
.awp-proforma-phone-select {
  position: relative;
  flex-shrink: 0;
  min-width: 90px;
  width: 90px;
}
.awp-proforma-phone-selected {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 10px;
  font-size: 0.8125rem;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  height: 100%;
  min-height: 38px;
  box-sizing: border-box;
}
.awp-proforma-phone-selected:hover {
  border-color: #cbd5e1;
}
.awp-proforma-phone-selected:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
.awp-proforma-phone-arrow {
  margin-left: auto;
  font-size: 0.65rem;
  color: #64748b;
}
.awp-proforma-phone-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  max-height: 220px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15);
  z-index: 100;
  display: none;
}
.awp-proforma-phone-select.awp-proforma-phone-open .awp-proforma-phone-options {
  display: block;
}
.awp-proforma-phone-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  font-size: 0.8125rem;
  text-align: left;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #0f172a;
}
.awp-proforma-phone-option:hover {
  background: #f1f5f9;
}
.awp-proforma-phone-option-code {
  font-variant-numeric: tabular-nums;
}
.awp-flag {
  width: 20px;
  height: 14px;
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.awp-flag-mk { background-image: url("../logo/mk.svg"); }
.awp-flag-tr { background-image: url("../logo/tr.svg"); }
.awp-flag-de { background-image: url("../logo/de.svg"); }
.awp-flag-at { background-image: url("../logo/at.svg"); }
.awp-flag-ch { background-image: url("../logo/ch.svg"); }
.awp-flag-nl { background-image: url("../logo/nl.svg"); }
.awp-flag-be { background-image: url("../logo/be.svg"); }
.awp-flag-fr { background-image: url("../logo/fr.svg"); }
.awp-flag-it { background-image: url("../logo/it.svg"); }
.awp-flag-es { background-image: url("../logo/es.svg"); }
.awp-flag-gb { background-image: url("../logo/gb.svg"); }
.awp-proforma-phone-input {
  flex: 1;
  min-width: 0;
}

.awp-proforma-email-modal-actions {
  display: flex;
  justify-content: flex-end;
}

.awp-proforma-email-btn-ok {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif !important;
  background: #3b82f6 !important;
  color: #fff !important;
  padding: 9px 20px !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer;
  transition: background 0.2s !important;
}

.awp-proforma-email-btn-ok:hover {
  background: #2563eb !important;
}

.awp-proforma-email-btn-ok:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3) !important;
}

.awp-proforma-btn-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  animation: awp-proforma-spin 0.8s linear infinite;
}

@media (max-width: 768px) {
  .awp-proforma-modal-content {
    max-width: 96%;
    max-height: 95vh;
    height: 650px;
  }
  .awp-proforma-modal-preview-wrap {
    max-height: 55vh;
  }
}

@media (max-width: 480px) {
  .awp-proforma-modal-content {
    max-height: 98vh;    
  }
  .awp-proforma-modal-preview-wrap {
    min-height: 300px;
    max-height: 45vh;
  }
  .awp-proforma-pdf-preview {
    min-height: 300px;
  }
  .awp-proforma-actions {
    flex-direction: column;
  }
}

/* ============================================
   Privacy Policy Modal - Banking App Style
   ============================================ */
.awp-privacy-policy-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999999 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.awp-privacy-policy-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999998 !important;
}

.awp-privacy-policy-modal-content {
  position: relative;
  width: 90%;
  max-width: 640px;
  max-height: 85vh;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.15);
  z-index: 9999999 !important;
  animation: slideUpModal 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.awp-privacy-policy-modal-inner {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.awp-privacy-policy-title {
  font-size: 1rem;
  font-weight: 900;
  color: #0f172a;
  margin: 0 0 4px;
  padding: 20px 24px 12px 24px;
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
}

.awp-privacy-policy-date {
  font-size: 0.75rem;
  color: #64748b;
  margin: 0 0 16px;
  padding: 0 24px;
  flex-shrink: 0;
}

.awp-privacy-policy-body {
  padding: 0 24px 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.awp-privacy-policy-body section {
  margin-bottom: 16px;
}

.awp-privacy-policy-body h3 {
  font-size: 1.4125rem;
  font-weight: 900;
  color: #1e293b;
  margin: 0 0 6px;
  font-family: "Inter", sans-serif;
}

.awp-privacy-policy-body h4 {
  font-size: 0.75rem;
  font-weight: 500;
  color: #334155;
  margin: 0 0 4px;
}

/* Flatsome h1, h2 override - modal i?inde normal boyut */
.awp-privacy-policy-modal .h1,
.awp-privacy-policy-modal h1,
.awp-privacy-policy-modal .h2,
.awp-privacy-policy-modal h2 {
  font-size: 1em !important;
}

.awp-privacy-policy-body p {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #475569;
  margin: 0 0 8px;
}

.awp-privacy-policy-body ul {
  margin: 0 0 8px;
  padding-left: 20px;
}

.awp-privacy-policy-body li {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #475569;
  margin: 0 0 4px;
}

.awp-privacy-policy-modal-close {
  position: absolute;
  top: 16px;
  right: -10px;
  width: 16px;
  height: 16px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  transition: all 0.2s;
  z-index: 10;
}

.awp-privacy-policy-modal-close:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.awp-privacy-policy-modal-close:active {
  transform: scale(0.96);
}

@media (max-width: 768px) {
  .awp-privacy-policy-modal-content {
    width: 100%;
    max-height: 92vh;
    border-radius: 6px;
  }

  .awp-privacy-policy-title {
    font-size: 0.9375rem;
    padding: 16px 16px 8px 16px;
  }

  .awp-privacy-policy-date {
    padding: 0 16px;
  }

  .awp-privacy-policy-body {
    padding: 0 16px 20px;
  }

  .awp-privacy-policy-modal-close {
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
  }
}

/* General Checkbox Checkmark Style */
input[type="checkbox"]:checked::before {
  content: url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%233582c4%27%2F%3E%3C%2Fsvg%3E) /
    "";
}

/* WordPress Login Modal Typography */
.wp-login-modal #wp-login-remember:checked::before {
  content: none !important;
}

.wp-login-modal,
.wp-login-modal * {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: 0 !important;
}

.wp-login-modal #wp-login-username-label,
.wp-login-modal #wp-login-password-label,
.wp-login-modal #wp-login-forgot-view label,
.wp-login-modal #wp-login-reset-view label,
.wp-login-modal #wp-login-remember-text,
.wp-login-modal #wp-login-forgot-link,
.wp-login-modal #wp-login-home-link,
.wp-login-modal #wp-login-forgot-back {
  font-weight: 500 !important;
}

.wp-login-modal #wp-login-forgot-view h3,
.wp-login-modal #wp-login-reset-view h3 {
  font-weight: 900 !important;
}

.wp-login-modal #wp-login-forgot-view p,
.wp-login-modal #wp-login-reset-view p,
.wp-login-modal .wp-login-input,
.wp-login-modal #wp-login-forgot-email,
.wp-login-modal #wp-login-reset-pass1,
.wp-login-modal #wp-login-reset-pass2 {
  font-weight: 400 !important;
}

.wp-login-modal #wp-login-submit,
.wp-login-modal #wp-login-forgot-submit,
.wp-login-modal #wp-login-reset-submit {
  font-weight: 900 !important;
}

.wp-login-modal #wp-login-error,
.wp-login-modal #wp-login-forgot-error,
.wp-login-modal #wp-login-reset-error,
.wp-login-modal #wp-login-forgot-success {
  font-weight: 500 !important;
}

/* WordPress Login Modal Styles - Modern Glass Design */
.wp-login-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  z-index: 9999999 !important; /* Highest z-index - above all buttons */
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  overflow-y: auto;
}

.wp-login-modal-content {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  padding: 24px;
  max-width: 420px;
  width: 100%;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.3),
    0 8px 32px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  position: relative;
  margin: auto;
  animation: slideUpModal 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ?? Auth sheet (bankac?l?k app tarz?) ?? */
.wp-login-modal--v2.awp-auth-sheet,
.awp-auth-sheet.wp-login-modal--v2 {
  --awp-auth-navy: #0a1f33;
  --awp-auth-navy-soft: #132f4a;
  --awp-auth-teal: #0f766e;
  --awp-auth-teal-soft: #ccfbf1;
  --awp-auth-ink: #0f172a;
  --awp-auth-muted: #64748b;
  --awp-auth-line: #e2e8f0;
  --awp-auth-surface: #f8fafc;
  background: rgba(10, 31, 51, 0.55);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  align-items: center;
  padding: 16px;
}

.wp-login-modal--v2 .wp-login-modal-content.awp-auth-sheet__panel,
.awp-auth-sheet .awp-auth-sheet__panel {
  position: relative;
  padding: 0;
  max-width: 420px;
  width: 100%;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #ffffff;
  box-shadow:
    0 24px 48px rgba(10, 31, 51, 0.28),
    0 0 0 1px rgba(10, 31, 51, 0.04);
  overflow: hidden;
}

.awp-auth-sheet__accent {
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, var(--awp-auth-navy) 0%, var(--awp-auth-teal) 100%);
}

.awp-auth-sheet__close.wp-login-modal-close,
.awp-auth-sheet .awp-auth-sheet__close {
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: var(--awp-auth-surface);
  border: 1px solid var(--awp-auth-line);
  color: var(--awp-auth-muted);
}

.awp-auth-sheet__close:hover {
  color: var(--awp-auth-ink);
  background: #f1f5f9;
}

.wp-login-modal--v2 .wp-login-modal__body.awp-auth-sheet__body,
.awp-auth-sheet__body {
  padding: 20px 24px 24px;
  box-sizing: border-box;
}

.awp-auth-sheet__header {
  text-align: left;
  margin-bottom: 20px;
  padding-top: 4px;
  padding-right: 36px;
}

.awp-auth-sheet__brand {
  margin-bottom: 16px;
}

.wp-login-modal--v2 .wp-login-modal__logo {
  max-width: 132px;
  width: auto;
  height: auto;
  display: block;
  margin: 0;
}

.awp-auth-sheet__title,
.wp-login-modal--v2 .awp-auth-sheet__title {
  margin: 0 0 6px;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--awp-auth-navy);
  line-height: 1.25;
}

.awp-auth-sheet__title::after {
  content: "";
  display: block;
  width: 36px;
  height: 3px;
  margin-top: 10px;
  border-radius: 2px;
  background: var(--awp-auth-teal);
}

.awp-auth-sheet__subtitle,
.wp-login-modal--v2 .awp-auth-sheet__subtitle {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--awp-auth-muted);
  line-height: 1.45;
}

.wp-login-modal--v2 .wp-login-modal__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--awp-auth-navy-soft);
  margin-bottom: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wp-login-modal--v2 .wp-login-modal__field,
.awp-auth-field {
  margin-bottom: 14px;
}

.wp-login-modal--v2 .wp-login-input {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 14px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--awp-auth-ink);
  background: var(--awp-auth-surface);
  border: 1px solid var(--awp-auth-line);
  border-radius: 6px;
  outline: none;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.wp-login-modal--v2 .wp-login-input:hover {
  border-color: #cbd5e1;
}

.wp-login-modal--v2 .wp-login-input:focus {
  background: #fff;
  border-color: var(--awp-auth-teal);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.18);
}

.wp-login-modal--v2 .wp-login-modal__input-wrap {
  position: relative;
}

.wp-login-modal--v2 .wp-login-modal__input--padded {
  padding-right: 48px;
}

.wp-login-modal--v2 .wp-login-modal__icon-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--awp-auth-muted);
  cursor: pointer;
}

.wp-login-modal--v2 .wp-login-modal__icon-btn:hover {
  background: #e2e8f0;
  color: var(--awp-auth-ink);
}

.wp-login-modal--v2 .wp-login-modal__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.wp-login-modal--v2 .wp-login-modal__remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--awp-auth-muted);
  user-select: none;
}

.wp-login-modal--v2 .wp-login-modal__remember input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--awp-auth-teal);
  cursor: pointer;
}

.wp-login-modal--v2 .wp-login-modal__link-btn {
  margin: 0;
  padding: 4px 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--awp-auth-teal);
  cursor: pointer;
  text-decoration: none;
}

.wp-login-modal--v2 .wp-login-modal__link-btn:hover {
  color: #0d9488;
  text-decoration: underline;
}

.wp-login-modal--v2 .wp-login-modal__alert {
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 0.875rem;
  line-height: 1.45;
  margin-bottom: 14px;
}

.wp-login-modal--v2 .wp-login-modal__alert--error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.wp-login-modal--v2 .wp-login-modal__alert--ok {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
}

.wp-login-modal--v2 .wp-login-modal__submit,
.awp-auth-sheet__cta {
  width: 100%;
  min-height: 52px;
  margin-top: 4px;
  border: none;
  border-radius: 6px;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff !important;
  background: var(--awp-auth-navy) !important;
  box-shadow: 0 8px 20px rgba(10, 31, 51, 0.28);
  cursor: pointer;
  transition:
    background 0.18s ease,
    transform 0.15s ease,
    box-shadow 0.18s ease;
}

.wp-login-modal--v2 .wp-login-modal__submit:hover,
.awp-auth-sheet__cta:hover {
  background: var(--awp-auth-navy-soft) !important;
  box-shadow: 0 10px 24px rgba(10, 31, 51, 0.34);
}

.wp-login-modal--v2 .wp-login-modal__submit:active,
.awp-auth-sheet__cta:active {
  transform: translateY(1px);
}

.awp-auth-sheet__footer {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.awp-auth-sheet__secondary-link {
  border: none;
  background: transparent;
  color: var(--awp-auth-teal);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 8px;
}

.awp-auth-sheet__secondary-link:hover {
  text-decoration: underline;
}

.awp-auth-sheet__secure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--awp-auth-muted);
}

.awp-auth-sheet__secure svg {
  flex-shrink: 0;
  color: var(--awp-auth-teal);
}

.wp-login-modal--v2 .wp-login-modal__home {
  font-size: 0.75rem;
  color: #94a3b8;
  text-decoration: none;
}

.wp-login-modal--v2 .wp-login-modal__home:hover {
  color: var(--awp-auth-muted);
  text-decoration: underline;
}

.wp-login-modal--v2 .wp-login-modal__back {
  display: block;
  width: 100%;
  margin-top: 14px;
  border: none;
  background: transparent;
  color: var(--awp-auth-muted);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  padding: 8px;
}

@media (max-width: 640px) {
  .wp-login-modal--v2.awp-auth-sheet {
    align-items: flex-end;
    padding: 0;
  }

  .wp-login-modal--v2 .wp-login-modal-content.awp-auth-sheet__panel,
  .awp-auth-sheet .awp-auth-sheet__panel {
    max-width: 100%;
    border-radius: 6px 6px 0 0;
    max-height: min(92vh, 900px);
    overflow-y: auto;
  }

  .wp-login-modal--v2 .wp-login-modal__body.awp-auth-sheet__body {
    padding: 18px 18px calc(20px + env(safe-area-inset-bottom));
  }
}

.wp-login-modal--v2 .wp-login-modal__submit:disabled {
  opacity: 0.72;
  cursor: not-allowed;
}

.wp-login-modal--v2 .wp-login-modal__subview {
  padding-top: 8px;
}

.wp-login-modal--v2 .wp-login-modal__subtitle {
  margin: 0 0 8px;
  font-size: 1.125rem;
  font-weight: 700;
  color: #0a1f33;
  letter-spacing: -0.02em;
}

.wp-login-modal--v2 .wp-login-modal__lead {
  margin: 0 0 16px;
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.5;
}

.wp-login-modal--v2 .wp-login-modal__back {
  margin-top: 12px;
  width: 100%;
  padding: 8px;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: #0f766e;
  cursor: pointer;
}

.wp-login-modal--v2 .wp-login-modal__back:hover {
  text-decoration: underline;
}

.wp-login-modal--v2 .wp-login-modal-close {
  top: 14px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

@media (max-width: 768px) {
  .wp-login-modal--v2 .wp-login-modal-content {
    border-radius: 6px;
  }

  .wp-login-modal--v2 .wp-login-modal__body {
    padding-left: 18px;
    padding-right: 18px;
  }
}

.wp-login-modal-close {
  position: absolute;
  top: -12px;
  right: -12px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(229, 231, 235, 0.8);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.15),
    0 2px 6px rgba(0, 0, 0, 0.1);
  z-index: 10000000 !important; /* Highest - above everything */
}

.wp-login-modal-close:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  transform: scale(1.05);
}

.wp-login-modal-close:active {
  transform: scale(0.95);
}

.wp-login-modal-close svg {
  width: 20px;
  height: 20px;
  color: #374151;
}

/* v2 ?yelik kart?: t?m k??eler 6px (base .wp-login-modal-close 50% sonras?) */
.wp-login-modal--v2 .wp-login-modal-close {
  border-radius: 6px;
}

/* Mobile optimizations for Samsung S24 */
@media (max-width: 768px) {
  .wp-login-modal {
    padding: 12px;
    align-items: flex-start;
    padding-top: 20px;
  }

  .wp-login-modal-content {
    padding: 20px;
    max-width: 100%;
    margin-top: 0;
    border-radius: 6px;
  }

  .wp-login-modal--v2 .wp-login-modal-content {
    border-radius: 6px;
    padding: 0;
  }

  .wp-login-modal-close {
    top: -10px;
    right: -10px;
    width: 40px;
    height: 40px;
  }

  .wp-login-modal-close svg {
    width: 18px;
    height: 18px;
  }

  .wp-login-modal-header img {
    max-width: 150px !important;
  }

  .wp-login-input {
    font-size: 16px !important; /* Prevents zoom on iOS */
    padding: 12px 14px !important;
  }

  #wp-login-submit {
    min-height: 48px !important;
    font-size: 16px !important;
  }

  /* Login modal remember/forgot alignment */
  #wp-login-remember {
    width: 18px !important;
    height: 18px !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
  }

  #wp-login-remember-text,
  #wp-login-forgot-link {
    line-height: 1.5 !important;
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
  }

  label[for="wp-login-remember"] {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Flatsome/theme margin override: modal i?inde button, input, select, textarea margin-left/margin-bottom 1em olmas?n */
#design-support-modal .button,
#design-support-modal .btn,
#design-support-modal button,
#design-support-modal fieldset,
#design-support-modal input,
#design-support-modal select,
#design-support-modal textarea {
  margin-left: 0 !important;
  margin-bottom: 0 !important;
}
#design-support-modal .design-support-rev-btn {
  margin: 0 !important;
}

/* =========================================================
   Yasal / S?zle?me Modallar? (?yelik/auth stili, ba?l?k 900)
   ========================================================= */
.awp-legal-modal {
  display: none;
  /*
   * Base .wp-login-modal overflow-y:auto kullan?yor. Panelin slideUp
   * animasyonu s?ras?nda panel k?sa s?re viewport d???na ta?t??? i?in
   * sa?da bir scrollbar yan?p s?n?yordu. Yasal modalda kayd?rmay? d??
   * katmana de?il a?a??daki __content alan?na b?rak?yoruz.
   */
  overflow: hidden;
  overscroll-behavior: contain;
}

.awp-legal-modal.is-open {
  display: flex;
}

.awp-legal-modal .wp-login-modal-content.awp-legal-modal__panel {
  max-width: 560px;
  max-height: min(88vh, 860px);
  display: flex;
  flex-direction: column;
}

.awp-legal-modal .awp-legal-modal__body-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 22px 26px 24px;
}

.awp-legal-modal__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-right: 40px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}

.awp-legal-modal__logo {
  max-width: 120px;
  width: auto;
  height: auto;
  display: block;
}

.awp-legal-modal__title {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--awp-auth-navy, #0a1f33);
}

/* Kayd?r?labilir i?erik */
.awp-legal-modal__content {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 6px;
  min-height: 0;
}

.awp-legal-modal__content::-webkit-scrollbar {
  width: 8px;
}

.awp-legal-modal__content::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.22);
  border-radius: 6px;
}

/* ??erik tipografisi ? okunakl?, disiplinli */
.awp-legal-modal__body {
  color: #334155;
  font-size: 0.9rem;
  line-height: 1.5;
  letter-spacing: normal;
}

.awp-legal-modal__body h3 {
  margin: 0 0 10px;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--awp-auth-navy, #0a1f33);
  letter-spacing: normal;
  line-height: 1.3;
}

.awp-legal-modal__body h4 {
  margin: 18px 0 8px;
  font-size: 0.92rem;
  font-weight: 700;
  color: #0f172a;
}

.awp-legal-modal__body p {
  margin: 0 0 10px;
}

.awp-legal-modal__body ul {
  margin: 0 0 10px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.awp-legal-modal__body li {
  margin: 0;
  line-height: 1.5;
}

.awp-legal-modal__body strong {
  color: #0f172a;
  font-weight: 700;
}

.awp-legal-modal__body a {
  color: var(--awp-auth-teal, #0f766e);
  text-decoration: none;
  font-weight: 600;
}

.awp-legal-modal__body a:hover {
  text-decoration: underline;
}

/* Mobil: alttan tam geni?lik sheet */
@media (max-width: 640px) {
  .awp-legal-modal.wp-login-modal--v2.awp-auth-sheet {
    align-items: flex-end;
    padding: 0;
  }

  .awp-legal-modal .wp-login-modal-content.awp-legal-modal__panel {
    max-width: 100%;
    max-height: 92vh;
    border-radius: 6px 6px 0 0;
  }

  .awp-legal-modal .awp-legal-modal__body-wrap {
    padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  }

  .awp-legal-modal__title {
    font-size: 1.15rem;
  }
}

/* Tasar?m Deste?i Modal - Modern, temiz, bankac?l?k hissi (border-radius max 8px) */
.design-support-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999999 !important;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  animation: fadeIn 0.3s ease;
}

.design-support-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

.design-support-modal.closing {
  display: flex;
  pointer-events: none;
}

.design-support-modal.closing .design-support-modal-content {
  animation: slideDownModal 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
}

.design-support-modal-content {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  max-width: 520px;
  width: 100%;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 9999999 !important;
  animation: slideUpModal 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.design-support-modal-content--wide {
  max-width: 72rem;
  border-radius: 6px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.design-support-modal-content--wide .design-support-modal-header {
  border-radius: 6px 6px 0 0;
}

.design-support-modal-content--wide .design-support-modal-footer {
  border-radius: 0 0 6px 6px;
}

.design-support-body-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .design-support-body-grid {
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
  }
}

.design-support-main-col {
  min-width: 0;
}

.design-support-summary-col {
  min-width: 0;
}

.design-support-input-hidden {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0);
}

.design-support-package-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .design-support-package-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tasar?m paketi kart renkleri - D1 Sar?, D2 Turuncu, D3 Pembe, D4 Mor (gradyan) */
.design-support-card {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 0;
  background: #fff;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background-color 0.2s,
    transform 0.2s;
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
}

.design-support-card:hover {
  border-color: #d1d5db;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Se?ili kart - paket rengine g?re belirgin ?er?eve, g?lge, arka plan vurgusu */
.design-support-card--active {
  box-shadow:
    0 0 0 2px currentColor,
    0 8px 20px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.design-support-card[data-level-code="D1"].design-support-card--active {
  border-color: #f59e0b;
  color: #b45309;
  background: linear-gradient(180deg, #fffbeb 0%, #ffffff 30%);
}

.design-support-card[data-level-code="D2"].design-support-card--active {
  border-color: #ea580c;
  color: #c2410c;
  background: linear-gradient(180deg, #fff7ed 0%, #ffffff 30%);
}

.design-support-card[data-level-code="D3"].design-support-card--active {
  border-color: #be185d;
  color: #9d174d;
  background: linear-gradient(180deg, #fdf2f8 0%, #ffffff 30%);
}

.design-support-card[data-level-code="D4"].design-support-card--active {
  border-color: #6d28d9;
  color: #5b21b6;
  background: linear-gradient(180deg, #f5f3ff 0%, #ffffff 30%);
}

.design-support-card-top {
  padding: 1rem 1rem 0;
  flex-shrink: 0;
}

.design-support-card-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.design-support-card-title-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
}

.design-support-card[data-level-code="D1"] .design-support-card-title-icon {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}

.design-support-card[data-level-code="D2"] .design-support-card-title-icon {
  background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
}

.design-support-card[data-level-code="D3"] .design-support-card-title-icon {
  background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
}

.design-support-card[data-level-code="D4"] .design-support-card-title-icon {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
}

.design-support-card-title-icon svg {
  width: 22px;
  height: 22px;
}

.design-support-card-title {
  font-size: 1.0625rem;
  font-weight: 900;
  color: #1e293b;
  margin: 0;
  line-height: 1.3;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
}

.design-support-card-desc {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #94a3b8;
  line-height: 1.4;
  margin: 0;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
}

.design-support-card-middle {
  padding: 0.75rem 1rem 0.5rem;
  flex: 1;
  min-height: 0;
}

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

.design-support-card-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #1e293b;
  line-height: 1.4;
  margin-bottom: 0.375rem;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
}

.design-support-card-item:last-child {
  margin-bottom: 0;
}

.design-support-card-tick-wrap {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.design-support-card[data-level-code="D1"] .design-support-card-tick-wrap {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}

.design-support-card[data-level-code="D2"] .design-support-card-tick-wrap {
  background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
}

.design-support-card[data-level-code="D3"] .design-support-card-tick-wrap {
  background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
}

.design-support-card[data-level-code="D4"] .design-support-card-tick-wrap {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
}

.design-support-card-tick {
  width: 12px;
  height: 12px;
  color: #ffffff;
}

.design-support-card-bottom {
  padding: 0.75rem 1rem 1rem;
  border-top: 1px solid #e5e7eb;
  background: #fafafa;
  border-radius: 0 0 6px 6px;
  flex-shrink: 0;
}

.design-support-card-price-line {
  margin-bottom: 0.5rem;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
}

/* Fiyat rakam? belirgin; detaylar (Ba?lang??, MKD) gri */
.design-support-card-price-line .design-support-price-number {
  font-size: 1.5rem;
  font-weight: 900;
  color: #1e293b;
}

.design-support-card-price-line .design-support-price-detail,
.design-support-card-price-line .currency-unit {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #94a3b8;
}

.design-support-card-price-line .currency-unit {
  margin-left: 0.25rem;
}

.design-support-card-extra-revisions {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
}

.design-support-extra-revisions-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #94a3b8;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
}

.design-support-extra-revisions-controls {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
  padding: 0;
  min-width: 100px;
}

.design-support-rev-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: #475569;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 0;
  transition:
    background 0.2s,
    color 0.2s;
  font-family: inherit;
  flex-shrink: 0;
}

.design-support-rev-btn:first-child {
  border-radius: 6px 0 0 6px;
}

.design-support-rev-btn:last-child {
  border-radius: 0 6px 6px 0;
}

.design-support-rev-btn:hover {
  background: #f1f5f9;
  color: #1e293b;
}

.design-support-rev-count {
  min-width: 2rem;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: #1e293b;
  padding: 0 0.25rem;
}

.design-support-card-btn {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    filter 0.2s;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
}

.design-support-card[data-level-code="D1"] .design-support-card-btn {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}

.design-support-card[data-level-code="D2"] .design-support-card-btn {
  background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
}

.design-support-card[data-level-code="D3"] .design-support-card-btn {
  background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
}

.design-support-card[data-level-code="D4"] .design-support-card-btn {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
}

.design-support-card-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.design-support-card-info {
  font-size: 0.625rem;
  color: #94a3b8;
  line-height: 1.35;
  margin: 0.5rem 0 0 0;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
}

.design-support-detail-section {
  margin-top: 0.5rem;
}

.design-support-summary-panel {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 1.25rem;
  position: sticky;
  top: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

@media (max-width: 1023px) {
  .design-support-summary-panel {
    position: static;
  }
}

.design-support-summary-heading {
  font-size: 1rem;
  font-weight: 900;
  color: #1e293b;
  margin: 0 0 0.75rem 0;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
}

.design-support-summary-divider {
  height: 1px;
  background: #e2e8f0;
  margin-bottom: 0.75rem;
}

.design-support-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.design-support-summary-label {
  color: #64748b;
  flex-shrink: 0;
}

.design-support-summary-panel .design-support-package-name,
.design-support-summary-panel .design-support-scope-name,
.design-support-summary-panel .design-support-extra-rev-summary {
  color: #1e293b;
  text-align: right;
}

.design-support-extra-rev-summary .design-support-extra-rev-currency {
  font-size: 0.5em;
  vertical-align: middle;
}

.design-support-summary-price-wrap {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid #e2e8f0;
  background: linear-gradient(135deg, #eff6ff 0%, #e0e7ff 100%);
  border-radius: 6px;
  border: 1px solid rgba(99, 102, 241, 0.2);
}

.design-support-summary-panel .design-support-price-value {
  font-size: 1.25rem;
  font-weight: 900;
  color: #1e293b;
  margin-bottom: 0.25rem;
}

.design-support-summary-price-note {
  font-size: 0.6875rem;
  color: #64748b;
  margin: 0;
  font-weight: 500;
}

.design-support-applied-multipliers {
  font-size: 0.75rem;
  color: #64748b;
  margin-bottom: 0.75rem;
}

.design-support-multipliers-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
}

.design-support-multiplier-item {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  background: #e2e8f0;
  border-radius: 0.25rem;
  color: #475569;
}

.design-support-summary-panel .design-support-price-hint {
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.design-support-btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.design-support-btn-primary:disabled:hover {
  transform: none;
}

.design-support-modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  background: linear-gradient(90deg, #f97316, #fb923c);
  border-radius: 6px 6px 0 0;
}

.design-support-modal-title {
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  margin: 0;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
}

.design-support-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #fff;
  border: 2px solid rgba(0, 0, 0, 0.06);
  font-size: 20px;
  color: #6b7280;
  cursor: pointer;
  padding: 0 !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.2s;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.design-support-modal-close:hover {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fecaca;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  border-radius: 9999px !important;
}

.design-support-modal-close svg {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  flex-shrink: 0 !important;
}

.design-support-modal-body {
  padding: 24px;
  flex: 1;
  overflow-y: auto;
  max-height: 80vh;
  background: #fff;
}

.design-support-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.design-support-form-group {
  margin-bottom: 0;
}

.design-support-form-group-full {
  grid-column: 1 / -1;
}

.design-support-form-label {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
}

.design-support-form-input,
.design-support-form-textarea {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  color: #111827;
  background: #fff;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  box-sizing: border-box;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.design-support-form-input::placeholder,
.design-support-form-textarea::placeholder {
  color: #9ca3af;
}

.design-support-form-input:hover,
.design-support-form-textarea:hover {
  border-color: #9ca3af;
}

.design-support-form-input:focus,
.design-support-form-textarea:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

/* Kaydet ?ncesi validasyon - eksik alan hatas? */
.design-support-form-input.design-support-input-error,
.design-support-form-textarea.design-support-input-error {
  border-color: #dc2626;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2);
}

.design-support-form-group--error .design-support-form-label {
  color: #dc2626;
}

.design-support-form-textarea {
  height: auto;
  min-height: 120px;
  resize: none;
  padding: 12px;
}

.design-support-file-upload {
  border: 2px dashed #d1d5db;
  border-radius: 6px;
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: #fafafa;
}

.design-support-file-upload:hover {
  border-color: #9ca3af;
  background: #f9fafb;
}

.design-support-file-upload input[type="file"] {
  display: none;
}

.design-support-upload-icon {
  width: 24px;
  height: 24px;
  margin: 0 auto 8px;
  display: block;
  color: #9ca3af;
}

.design-support-upload-text {
  margin: 0 0 4px;
  font-size: 13px;
  color: #6b7280;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
}

.design-support-upload-hint {
  margin: 0;
  font-size: 12px;
  color: #9ca3af;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
}

.design-support-file-list {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 10px;
  align-content: start;
  align-items: start;
}

.design-support-file-item {
  width: 72px;
  height: 72px;
  min-width: 72px;
  min-height: 72px;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: #fff;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
}

.design-support-file-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
  transition: background 0.2s, transform 0.2s;
}

.design-support-file-remove:hover {
  background: #dc2626;
  transform: scale(1.08);
}

.design-support-file-remove svg {
  width: 12px;
  height: 12px;
}

.design-support-price-section {
  margin-top: 16px;
  padding: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.design-support-price-label {
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
}

.design-support-package-name {
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
  margin-bottom: 0;
}
.design-support-package-desc {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 0;
}
.design-support-price-value {
  font-size: 14px;
  font-weight: 900;
  color: #1e293b;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
}

.design-support-price-value .currency-unit {
  font-size: 11px;
  font-weight: 500;
  margin-left: 4px;
}

.design-support-price-hint {
  font-size: 11px;
  color: #64748b;
  margin: 8px 0 0 0;
  line-height: 1.4;
}

.design-support-modal-footer {
  padding: 20px 24px;
  border-top: 1px solid rgba(248, 250, 252, 0.8);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
  background: linear-gradient(90deg, #f97316, #fb923c);
  border-radius: 0 0 6px 6px;
}

.design-support-btn {
  height: 44px;
  padding: 0 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.design-support-btn-primary {
  background: #111827;
  color: #f9fafb;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.35);
}

.design-support-btn-primary:hover {
  background: #020617;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.45);
}

.design-support-btn-secondary {
  background: rgba(255, 255, 255, 0.18);
  color: #111827;
  border: 1px solid rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(4px);
}

.design-support-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.32);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.25);
}

/* Tasar?m Deste?i Modal - Mobil (border-radius max 8px, input yar?m g?r?nme d?zeltmesi) */
@media (max-width: 768px) {
  .design-support-modal.active {
    padding: 8px;
    align-items: flex-start;
    padding-top: max(8px, env(safe-area-inset-top));
    box-sizing: border-box;
  }

  .design-support-modal-content {
    max-width: 100%;
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 6px;
    margin-top: max(8px, env(safe-area-inset-top));
    margin-bottom: max(8px, env(safe-area-inset-bottom));
  }

  .design-support-modal-header {
    padding: 16px;
  }

  .design-support-modal-close {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    border-radius: 9999px !important;
  }

  .design-support-modal-title {
    font-size: 16px;
  }

  .design-support-modal-body {
    padding: 16px;
    max-height: none;
  }

  .design-support-modal-footer {
    padding: 16px;
  }

  .design-support-form-grid {
    gap: 16px;
  }

  .design-support-form-input,
  .design-support-form-textarea {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    font-size: 16px; /* iOS zoom ?nleme i?in min 16px */
    padding: 0 12px;
    box-sizing: border-box;
  }

  .design-support-form-textarea {
    min-height: 120px;
    padding: 12px;
  }

  .design-support-file-upload {
    padding: 16px;
  }

  .design-support-btn {
    min-height: 44px;
  }
}

/* ?ok k???k ekranlar - Tasar?m Deste?i Modal */
@media (max-width: 480px) {
  .design-support-modal.active {
    padding: 6px;
    padding-top: max(6px, env(safe-area-inset-top));
  }

  .design-support-modal-content {
    max-height: calc(100vh - 12px);
    max-height: calc(100dvh - 12px);
    border-radius: 6px;
  }

  .design-support-modal-header {
    padding: 12px 14px;
  }

  .design-support-modal-title {
    font-size: 15px;
  }

  .design-support-modal-body {
    padding: 14px;
  }

  .design-support-modal-footer {
    padding: 12px 14px;
    gap: 10px;
  }

  .design-support-form-grid {
    gap: 14px;
  }

  .design-support-form-label {
    font-size: 13px;
    margin-bottom: 4px;
  }

  .design-support-form-input,
  .design-support-form-textarea {
    font-size: 16px;
    padding: 0 10px;
    height: 44px;
    box-sizing: border-box;
  }

  .design-support-form-textarea {
    min-height: 120px;
    padding: 10px;
  }

  .design-support-file-upload {
    padding: 14px;
  }

  .design-support-upload-text {
    font-size: 12px;
  }

  .design-support-upload-hint {
    font-size: 11px;
  }

  .design-support-btn {
    height: 44px;
    padding: 0 16px;
    font-size: 13px;
  }

  .design-support-price-section {
    padding: 12px;
    margin-top: 14px;
  }

  .design-support-price-value {
    font-size: 13px;
  }
}

/* PWA Install Modal Styles */
.awp-pwa-install-banner {
  position: fixed !important;
  inset: 0;
  z-index: 999998 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease-out;
}

.awp-pwa-install-banner-show {
  opacity: 1;
  pointer-events: auto;
}

.awp-pwa-install-modal {
  width: 100%;
  max-width: 420px;
  background: #020617;
  border-radius: 6px;
  box-shadow:
    0 22px 60px rgba(15, 23, 42, 0.85),
    0 0 0 1px rgba(148, 163, 184, 0.35);
  padding: 20px 20px 16px;
  position: relative;
  transform: translateY(32px);
  transition:
    transform 0.3s cubic-bezier(0.21, 0.8, 0.25, 1),
    box-shadow 0.3s ease;
}

.awp-pwa-install-banner-show .awp-pwa-install-modal {
  transform: translateY(0);
}

.awp-pwa-install-content {
  display: flex;
  align-items: center;
  gap: 14px;
}

.awp-pwa-install-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 6px;
  background: radial-gradient(circle at top, #22c55e 0%, #16a34a 45%, #15803d 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px rgba(21, 128, 61, 0.7);
}

.awp-pwa-install-icon svg {
  width: 32px;
  height: 32px;
  stroke-width: 2.5;
}

.awp-pwa-install-text {
  flex: 1;
  font-size: 14px;
  line-height: 1.5;
  color: #e5e7eb;
  max-width: 260px;
}

.awp-pwa-install-text p {
  margin: 0;
  font-weight: 900;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    system-ui,
    sans-serif;
  letter-spacing: 0.03em;
}

.awp-pwa-install-footer {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.awp-pwa-install-dont-show {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  font-size: 12px;
  color: rgba(226, 232, 240, 0.95);
  cursor: pointer;
  user-select: none;
  text-align: left;
}

.awp-pwa-install-dont-show input[type="checkbox"] {
  width: 16px;
  height: 16px;
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.9);
  background: rgba(15, 23, 42, 0.9);
  accent-color: #22c55e;
  margin: 0;
}

.awp-pwa-install-dont-show span {
  font-weight: 400;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    system-ui,
    sans-serif;
  display: inline-block;
  max-width: 140px;
  line-height: 1.3;
}

.awp-pwa-install-btn {
  background: linear-gradient(135deg, #f4f4ff 0%, #ffffff 40%, #dbeafe 100%);
  color: #0f172a;
  border: none;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow:
    0 14px 32px rgba(59, 130, 246, 0.6),
    0 0 0 1px rgba(148, 163, 184, 0.45);
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
}

.awp-pwa-install-btn::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.35);
}

.awp-pwa-install-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 18px 40px rgba(59, 130, 246, 0.7),
    0 0 0 1px rgba(191, 219, 254, 0.75);
}

.awp-pwa-install-btn:active {
  transform: translateY(0);
  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.8),
    0 0 0 1px rgba(148, 163, 184, 0.9);
}

.awp-pwa-install-close {
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.5);
  color: rgba(248, 250, 252, 0.85);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 999px;
  position: absolute;
  top: 10px;
  right: 10px;
  transition:
    background 0.18s ease,
    transform 0.12s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.awp-pwa-install-close:hover {
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(226, 232, 240, 0.8);
  transform: translateY(-1px);
}

.awp-pwa-install-close:active {
  transform: translateY(0);
}

/* Mobile styles for install modal */
@media (max-width: 768px) {
  .awp-pwa-install-banner {
    align-items: center;
    padding: 20px 12px;
  }

  .awp-pwa-install-modal {
    max-width: 480px;
    border-radius: 6px;
    padding: 18px 18px 14px;
  }

  .awp-pwa-install-content {
    gap: 12px;
  }

  .awp-pwa-install-icon {
    width: 42px;
    height: 42px;
  }

  .awp-pwa-install-text {
    font-size: 13px;
  }

  .awp-pwa-install-footer {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .awp-pwa-install-dont-show {
    order: 1;
  }

  .awp-pwa-install-btn {
    order: 2;
  }
}

/* Small mobile screens */
@media (max-width: 480px) {
  .awp-pwa-install-modal {
    padding: 16px 14px 12px;
  }

  .awp-pwa-install-content {
    gap: 10px;
  }

  .awp-pwa-install-text {
    font-size: 12px;
  }

  .awp-pwa-install-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .awp-pwa-install-dont-show {
    justify-content: flex-start;
  }

  .awp-pwa-install-btn {
    width: 100%;
    justify-content: center;
  }
}

/* PWA Floating Install Button Styles */
.awp-pwa-install-btn-floating {
  position: fixed !important;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
  border: none;
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 99999 !important;
  transition: all 0.3s ease;
  padding: 0;
  visibility: visible !important;
  opacity: 1 !important;
}

.awp-pwa-install-btn-floating:hover {
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

.awp-pwa-install-btn-floating:not(.awp-pwa-install-btn-floating-center-left):not(.awp-pwa-install-btn-floating-center-right):not(.awp-pwa-install-btn-floating-custom):hover {
  transform: translateY(-2px) scale(1.05);
}

.awp-pwa-install-btn-floating-center-left:hover,
.awp-pwa-install-btn-floating-center-right:hover {
  transform: translateY(-50%) scale(1.05);
}

.awp-pwa-install-btn-floating:active {
  transform: translateY(0) scale(0.98);
}

.awp-pwa-install-btn-floating-center-left:active,
.awp-pwa-install-btn-floating-center-right:active {
  transform: translateY(-50%) scale(0.98);
}

.awp-pwa-install-btn-floating svg {
  width: 24px;
  height: 24px;
  stroke-width: 2.5;
}

/* Position variants for Install Button */
.awp-pwa-install-btn-floating-bottom-left {
  bottom: 24px;
  left: 24px;
}

.awp-pwa-install-btn-floating-bottom-right {
  bottom: 24px;
  right: 24px;
}

.awp-pwa-install-btn-floating-top-left {
  top: 100px;
  left: 24px;
}

.awp-pwa-install-btn-floating-top-right {
  top: 100px;
  right: 24px;
}

/* Center position variants */
.awp-pwa-install-btn-floating-center-left {
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
}

.awp-pwa-install-btn-floating-center-right {
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
}

/* Legacy position classes (backward compatibility) */
.awp-pwa-install-btn-floating-left {
  bottom: 24px;
  left: 24px;
}

.awp-pwa-install-btn-floating-right {
  bottom: 24px;
  right: 24px;
}

/* Mobile adjustments for floating install button */
@media (max-width: 768px) {
  .awp-pwa-install-btn-floating {
    width: 48px;
    height: 48px;
    box-shadow: 0 3px 12px rgba(102, 126, 234, 0.35);
  }

  .awp-pwa-install-btn-floating svg {
    width: 20px;
    height: 20px;
  }

  .awp-pwa-install-btn-floating-bottom-left,
  .awp-pwa-install-btn-floating-left {
    bottom: 20px;
    left: 16px;
  }

  .awp-pwa-install-btn-floating-bottom-right,
  .awp-pwa-install-btn-floating-right {
    bottom: 20px;
    right: 16px;
  }

  .awp-pwa-install-btn-floating-top-left {
    top: 80px;
    left: 16px;
  }

  .awp-pwa-install-btn-floating-top-right {
    top: 80px;
    right: 16px;
  }
}

/* PWA Share Button Styles */
.awp-pwa-share-btn {
  position: fixed !important;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: white !important;
  border: none;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 999998 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
  visibility: visible !important;
  opacity: 1 !important;
}

.awp-pwa-share-btn:hover {
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.5);
}

.awp-pwa-share-btn:active {
  transform: translateY(0) scale(0.95);
}

.awp-pwa-share-btn svg {
  width: 24px;
  height: 24px;
  stroke-width: 2.5;
}

/* Position variants for Share Button */
.awp-pwa-share-btn-bottom-right {
  bottom: 24px;
  right: 14px;
}

.awp-pwa-share-btn-bottom-left {
  bottom: 24px;
  left: 24px;
}

.awp-pwa-share-btn-top-right {
  top: 100px;
  right: 5px;
}

.awp-pwa-share-btn-top-left {
  top: 100px;
  left: 24px;
}

.awp-pwa-share-btn-center-left {
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
}

.awp-pwa-share-btn-center-right {
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
}

/* Mobile adjustments for Share Button */
@media (max-width: 768px) {
  .awp-pwa-share-btn {
    width: 48px;
    height: 48px;
    box-shadow: 0 3px 12px rgba(16, 185, 129, 0.35);
  }

  .awp-pwa-share-btn svg {
    width: 20px;
    height: 20px;
  }

  .awp-pwa-share-btn-bottom-right {
    bottom: 20px;
    right: 16px;
  }

  .awp-pwa-share-btn-bottom-left {
    bottom: 20px;
    left: 16px;
  }

  .awp-pwa-share-btn-top-right {
    top: 80px;
    right: 0px;
  }

  .awp-pwa-share-btn-top-left {
    top: 80px;
    left: 16px;
  }
}

/* Stacking adjustments when both buttons are on the same side */
/* Bottom-left: Share button above install button */
.awp-pwa-share-btn-bottom-left ~ .awp-pwa-install-btn-floating-bottom-left,
.awp-pwa-share-btn-bottom-left ~ .awp-pwa-install-btn-floating-left {
  bottom: 90px;
}

/* Bottom-right: Share button above install button */
.awp-pwa-share-btn-bottom-right ~ .awp-pwa-install-btn-floating-bottom-right,
.awp-pwa-share-btn-bottom-right ~ .awp-pwa-install-btn-floating-right {
  bottom: 90px;
}

/* Top-left stacking */
.awp-pwa-share-btn-top-left ~ .awp-pwa-install-btn-floating-top-left {
  top: 166px;
}

/* Top-right stacking */
.awp-pwa-share-btn-top-right ~ .awp-pwa-install-btn-floating-top-right {
  top: 166px;
}

@media (max-width: 768px) {
  .awp-pwa-share-btn-bottom-left ~ .awp-pwa-install-btn-floating-bottom-left,
  .awp-pwa-share-btn-bottom-left ~ .awp-pwa-install-btn-floating-left {
    bottom: 80px;
  }

  .awp-pwa-share-btn-bottom-right ~ .awp-pwa-install-btn-floating-bottom-right,
  .awp-pwa-share-btn-bottom-right ~ .awp-pwa-install-btn-floating-right {
    bottom: 80px;
  }

  .awp-pwa-share-btn-top-left ~ .awp-pwa-install-btn-floating-top-left {
    top: 140px;
  }

  .awp-pwa-share-btn-top-right ~ .awp-pwa-install-btn-floating-top-right {
    top: 140px;
  }
}

/* =========================================================
   Unified Premium Tabs (Dijital Alt Tip Butonlar?)
   Rulo ile ayn? mercan stil; 6 buton tek sat?r (daralt?lm??)
   ========================================================= */
#tab-content-dijital-baski .dijital-subtype-tabs[data-subtype-grid="true"] {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 6px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

/* Yatay: ikon sol, etiket yan?nda. border-radius 6px, d?z renkler */
#tab-content-dijital-baski
  .dijital-subtype-tabs[data-subtype-grid="true"]
  .calculator-tab-btn-grid {
  min-width: 0;
  min-height: 48px !important;
  padding: 6px 8px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(148, 163, 184, 0) !important;
  background: #ff8267 !important;
  color: #f8fafc !important;
  text-align: left !important;
  box-shadow: 0 10px 24px rgba(2, 8, 23, 0.28) !important;
  transform: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

/* ?kon kutusu ? dar sat?r i?in kompakt */
#tab-content-dijital-baski
  .dijital-subtype-tabs[data-subtype-grid="true"]
  .calculator-tab-btn-grid
  .calculator-tab-icon-wrapper {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  margin: 0 !important;
  flex-shrink: 0;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

#tab-content-dijital-baski
  .dijital-subtype-tabs[data-subtype-grid="true"]
  .calculator-tab-btn-grid
  .calculator-tab-icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  object-fit: contain !important;
  position: static !important;
  right: auto !important;
}

#tab-content-dijital-baski
  .dijital-subtype-tabs[data-subtype-grid="true"]
  .calculator-tab-btn-grid
  .calculator-tab-text-wrapper {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
}

#tab-content-dijital-baski
  .dijital-subtype-tabs[data-subtype-grid="true"]
  .calculator-tab-btn-grid
  .calculator-tab-text-line {
  width: 100%;
  display: block !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.02em !important;
  text-align: left !important;
  text-transform: uppercase !important;
  color: #f8fafc !important;
  white-space: normal !important;
  text-shadow: none !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hover / active: d?z renkler (radyal/gradient yok) */
#tab-content-dijital-baski
  .dijital-subtype-tabs[data-subtype-grid="true"]
  .calculator-tab-btn-grid:hover {
  background: #f57117!important;
  box-shadow: 0 12px 28px rgba(2, 8, 23, 0.32) !important;
}

#tab-content-dijital-baski
  .dijital-subtype-tabs[data-subtype-grid="true"]
  .calculator-tab-btn-grid.active {
  background: #d82626 !important;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.25) !important;
}

#tab-content-dijital-baski
  .dijital-subtype-tabs[data-subtype-grid="true"]
  .calculator-tab-btn-grid.active
  .calculator-tab-icon-wrapper {
  background: none !important;
  border: none !important;
}

/* Focus ? klavye eri?imi */
#tab-content-dijital-baski
  .dijital-subtype-tabs[data-subtype-grid="true"]
  .calculator-tab-btn-grid:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 2px rgba(249, 115, 22, 0.5),
    0 12px 28px rgba(2, 8, 23, 0.32) !important;
}

#tab-content-dijital-baski
  .dijital-subtype-tabs[data-subtype-grid="true"]
  .calculator-tab-btn-grid.active:focus-visible {
  box-shadow:
    0 0 0 2px rgba(249, 115, 22, 0.5),
    0 0 0 4px rgba(216, 38, 38, 0.2) !important;
}

/* Active (t?klama) ? bas?lma efekti */
#tab-content-dijital-baski
  .dijital-subtype-tabs[data-subtype-grid="true"]
  .calculator-tab-btn-grid:active {
  transform: scale(0.98) !important;
  box-shadow: 0 4px 12px rgba(2, 8, 23, 0.2) !important;
}

@media (max-width: 900px) {
  #tab-content-dijital-baski .dijital-subtype-tabs[data-subtype-grid="true"] {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  #tab-content-dijital-baski
    .dijital-subtype-tabs[data-subtype-grid="true"]
    .calculator-tab-btn-grid {
    min-height: 44px !important;
    padding: 4px 5px !important;
    gap: 0 !important;
    justify-content: center !important;
  }

  #tab-content-dijital-baski
    .dijital-subtype-tabs[data-subtype-grid="true"]
    .calculator-tab-btn-grid
    .calculator-tab-icon-wrapper {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
  }

  #tab-content-dijital-baski
    .dijital-subtype-tabs[data-subtype-grid="true"]
    .calculator-tab-btn-grid
    .calculator-tab-icon {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
  }

  /* Dar ekranda k?smi etiketleri gizle ? sadece ikon */
  #tab-content-dijital-baski
    .dijital-subtype-tabs[data-subtype-grid="true"]
    .calculator-tab-btn-grid
    .calculator-tab-text-wrapper {
    display: none !important;
  }
}

@media (max-width: 640px) {
  #tab-content-dijital-baski .dijital-subtype-tabs[data-subtype-grid="true"] {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  #tab-content-dijital-baski
    .dijital-subtype-tabs[data-subtype-grid="true"]
    .calculator-tab-btn-grid {
    min-height: 48px !important;
    padding: 8px 4px !important;
    border-radius: 6px !important;
    gap: 0 !important;
    justify-content: center !important;
  }

  #tab-content-dijital-baski
    .dijital-subtype-tabs[data-subtype-grid="true"]
    .calculator-tab-btn-grid
    .calculator-tab-icon-wrapper {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
  }

  #tab-content-dijital-baski
    .dijital-subtype-tabs[data-subtype-grid="true"]
    .calculator-tab-btn-grid
    .calculator-tab-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
  }

  #tab-content-dijital-baski
    .dijital-subtype-tabs[data-subtype-grid="true"]
    .calculator-tab-btn-grid
    .calculator-tab-text-wrapper {
    display: none !important;
  }
}

/* =========================================================
   Dijital alt tip ? mobil hamburger men? (butonlar?n bulundu?u yer)
   ========================================================= */
.dijital-subtype-nav,
.dn-copy-type-nav,
.rulo-subtype-nav,
.awp-subtype-nav {
  position: relative;
  margin: 0 0 12px 0;
}

.dijital-subtype-mobile-bar,
.dn-copy-type-mobile-bar,
.rulo-subtype-mobile-bar,
.awp-subtype-mobile-bar {
  display: none;
}

.dijital-subtype-mobile-menu,
.dn-copy-type-mobile-menu,
.rulo-subtype-mobile-menu,
.awp-subtype-mobile-menu {
  display: none;
}

@media (max-width: 900px) {
  /* Hamburger men? varken alttaki ikon buton sat?r?n? gizle */
  #tab-content-dijital-baski .dijital-subtype-nav .dijital-subtype-tabs,
  #tab-content-dijital-baski .dijital-subtype-nav .dijital-subtype-tabs[data-subtype-grid="true"],
  #tab-content-ders-notu .dn-copy-type-nav .dn-copy-type-tabs,
  #tab-content-rulo-baski .rulo-subtype-nav .rulo-subtype-tabs,
  #tab-content-rulo-baski .rulo-subtype-nav .rulo-subtype-tabs[data-subtype-grid="true"],
  #awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"]
    #tab-content-dijital-baski
    .dijital-subtype-nav
    .dijital-subtype-tabs,
  #awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"]
    #tab-content-dijital-baski
    .dijital-subtype-nav
    .dijital-subtype-tabs[data-subtype-grid="true"],
  #awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"]
    #tab-content-ders-notu
    .dn-copy-type-nav
    .dn-copy-type-tabs,
  #awp-printwise-root[data-layout-preset="commerce"][data-commerce-pill="1"]
    #tab-content-rulo-baski
    .rulo-subtype-nav
    .rulo-subtype-tabs {
    display: none !important;
  }

  .dijital-subtype-mobile-bar,
  .dn-copy-type-mobile-bar,
  .rulo-subtype-mobile-bar,
  .awp-subtype-mobile-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    margin: 0 0 8px 0;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: #ff8267;
    color: #f8fafc;
    box-shadow: 0 8px 20px rgba(2, 8, 23, 0.22);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .dijital-subtype-nav.is-open .dijital-subtype-mobile-bar,
  .dn-copy-type-nav.is-open .dn-copy-type-mobile-bar,
  .rulo-subtype-nav.is-open .rulo-subtype-mobile-bar,
  .awp-subtype-nav.is-open .awp-subtype-mobile-bar {
    background: #d82626;
    border-color: rgba(249, 115, 22, 0.35);
  }

  .dijital-subtype-hamburger,
  .dn-copy-type-hamburger,
  .rulo-subtype-hamburger,
  .awp-subtype-hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
  }

  .dijital-subtype-hamburger svg,
  .dn-copy-type-hamburger svg,
  .rulo-subtype-hamburger svg,
  .awp-subtype-hamburger svg {
    width: 20px;
    height: 20px;
  }

  .dijital-subtype-mobile-current,
  .dn-copy-type-mobile-current,
  .rulo-subtype-mobile-current,
  .awp-subtype-mobile-current {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
  }

  .dijital-subtype-mobile-current-icon,
  .dn-copy-type-mobile-current-icon,
  .rulo-subtype-mobile-current-icon,
  .awp-subtype-mobile-current-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .dijital-subtype-mobile-current-label,
  .dn-copy-type-mobile-current-label,
  .rulo-subtype-mobile-current-label,
  .awp-subtype-mobile-current-label {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #f8fafc;
  }

  .dijital-subtype-mobile-chevron,
  .dn-copy-type-mobile-chevron,
  .rulo-subtype-mobile-chevron,
  .awp-subtype-mobile-chevron {
    display: inline-flex;
    flex-shrink: 0;
    transition: transform 0.2s ease;
  }

  .dijital-subtype-mobile-chevron svg,
  .dn-copy-type-mobile-chevron svg,
  .rulo-subtype-mobile-chevron svg,
  .awp-subtype-mobile-chevron svg {
    width: 18px;
    height: 18px;
    color: #fff;
  }

  .dijital-subtype-nav.is-open .dijital-subtype-mobile-chevron,
  .dn-copy-type-nav.is-open .dn-copy-type-mobile-chevron,
  .rulo-subtype-nav.is-open .rulo-subtype-mobile-chevron,
  .awp-subtype-nav.is-open .awp-subtype-mobile-chevron {
    transform: rotate(180deg);
  }

  .dijital-subtype-mobile-menu,
  .dn-copy-type-mobile-menu,
  .rulo-subtype-mobile-menu,
  .awp-subtype-mobile-menu {
    display: none;
    position: relative;
    z-index: 40;
    margin: 0 0 8px 0;
    padding: 6px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 16px 32px rgba(2, 8, 23, 0.22);
  }

  .dijital-subtype-nav.is-open .dijital-subtype-mobile-menu,
  .dn-copy-type-nav.is-open .dn-copy-type-mobile-menu,
  .rulo-subtype-nav.is-open .rulo-subtype-mobile-menu,
  .awp-subtype-nav.is-open .awp-subtype-mobile-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .dijital-subtype-mobile-menu[hidden],
  .dn-copy-type-mobile-menu[hidden],
  .rulo-subtype-mobile-menu[hidden],
  .awp-subtype-mobile-menu[hidden] {
    display: none !important;
  }

  .dijital-subtype-mobile-item,
  .dn-copy-type-mobile-item,
  .rulo-subtype-mobile-item,
  .awp-subtype-mobile-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #0f172a;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
  }

  .dijital-subtype-mobile-item img,
  .dn-copy-type-mobile-item img,
  .rulo-subtype-mobile-item img,
  .awp-subtype-mobile-item img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .dijital-subtype-mobile-item:hover,
  .dijital-subtype-mobile-item:focus-visible,
  .dn-copy-type-mobile-item:hover,
  .dn-copy-type-mobile-item:focus-visible,
  .rulo-subtype-mobile-item:hover,
  .rulo-subtype-mobile-item:focus-visible,
  .awp-subtype-mobile-item:hover,
  .awp-subtype-mobile-item:focus-visible {
    background: #fff1eb;
    outline: none;
  }

  .dijital-subtype-mobile-item.active,
  .dn-copy-type-mobile-item.active,
  .rulo-subtype-mobile-item.active,
  .awp-subtype-mobile-item.active {
    background: #d82626;
    color: #fff;
  }
}

/* =========================================================
   Unified Premium Tabs (Rulo Bask? Alt Tip Butonlar?)
   Dijital Bask? ile ayn?: hover, active, focus davran??lar?
   ========================================================= */
#tab-content-rulo-baski .rulo-subtype-tabs[data-subtype-grid="true"] {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  padding: 0 !important;
  margin: 0 0 12px 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

#tab-content-rulo-baski
  .rulo-subtype-tabs[data-subtype-grid="true"]
  .calculator-tab-btn-grid {
  min-width: 0;
  min-height: 48px !important;
  padding: 6px 8px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(148, 163, 184, 0) !important;
  background: #ff8267 !important;
  color: #f8fafc !important;
  text-align: left !important;
  box-shadow: 0 10px 24px rgba(2, 8, 23, 0.28) !important;
  transform: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

#tab-content-rulo-baski
  .rulo-subtype-tabs[data-subtype-grid="true"]
  .calculator-tab-btn-grid
  .calculator-tab-icon-wrapper {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  margin: 0 !important;
  flex-shrink: 0;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

#tab-content-rulo-baski
  .rulo-subtype-tabs[data-subtype-grid="true"]
  .calculator-tab-btn-grid
  .calculator-tab-icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  object-fit: contain !important;
  position: static !important;
}

#tab-content-rulo-baski
  .rulo-subtype-tabs[data-subtype-grid="true"]
  .calculator-tab-btn-grid
  .calculator-tab-text-wrapper {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
}

#tab-content-rulo-baski
  .rulo-subtype-tabs[data-subtype-grid="true"]
  .calculator-tab-btn-grid
  .calculator-tab-text-line {
  width: 100%;
  display: block !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.02em !important;
  text-align: left !important;
  text-transform: uppercase !important;
  color: #f8fafc !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: none !important;
}

/* Hover ? Dijital ile ayn? */
#tab-content-rulo-baski
  .rulo-subtype-tabs[data-subtype-grid="true"]
  .calculator-tab-btn-grid:hover {
  background: #f57117 !important;
  box-shadow: 0 12px 28px rgba(2, 8, 23, 0.32) !important;
}

/* Active ? Dijital ile ayn? */
#tab-content-rulo-baski
  .rulo-subtype-tabs[data-subtype-grid="true"]
  .calculator-tab-btn-grid.active {
  background: #d82626 !important;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.25) !important;
}

/* Focus ? klavye eri?imi */
#tab-content-rulo-baski
  .rulo-subtype-tabs[data-subtype-grid="true"]
  .calculator-tab-btn-grid:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 2px rgba(249, 115, 22, 0.5),
    0 12px 28px rgba(2, 8, 23, 0.32) !important;
}

#tab-content-rulo-baski
  .rulo-subtype-tabs[data-subtype-grid="true"]
  .calculator-tab-btn-grid.active:focus-visible {
  box-shadow:
    0 0 0 2px rgba(249, 115, 22, 0.5),
    0 0 0 4px rgba(216, 38, 38, 0.2) !important;
}

/* Active (t?klama) ? bas?lma efekti */
#tab-content-rulo-baski
  .rulo-subtype-tabs[data-subtype-grid="true"]
  .calculator-tab-btn-grid:active {
  transform: scale(0.98) !important;
  box-shadow: 0 4px 12px rgba(2, 8, 23, 0.2) !important;
}

/* Rulo mobil: hamburger men? (?stte @media max-width 900px) */

/* Kademe modal ? Inter Black / Inter Light + Roboto Condensed (g?rsel referans) */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;900&family=Roboto+Condensed:wght@400;700&display=swap");

/* Gizli kademe indirimi: rozet yerine bilgi butonu + modal */
.awp-tier-mute-slot {
  display: none;
  margin: 0;
  width: 100%;
}

/* Fiyat panelindeki di?er aksiyonlarla ayn? g?r?n?m (module-ders-notu-btn-secondary uyumu) */
#awp-printwise-root .awp-tier-mute-slot .awp-tier-info-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  margin: 0.5rem 0 0.25rem;
  padding: 10px 16px;
  gap: 0.35rem;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--awp-summary-panel-btn-secondary-color, #f1f5f9);
  background: var(--awp-summary-panel-btn-secondary-bg, #1e293b);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.1s ease;
}

#awp-printwise-root .awp-tier-mute-slot .awp-tier-info-btn:hover {
  background: #334155;
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
}

#awp-printwise-root .awp-tier-mute-slot .awp-tier-info-btn:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}

#awp-printwise-root .awp-tier-mute-slot .awp-tier-info-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.awp-tier-steps-modal {
  position: fixed;
  inset: 0;
  z-index: 100050;
}

.awp-tier-steps-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.awp-tier-steps-modal__panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(94vw, 500px);
  max-height: min(90vh, 780px);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  box-sizing: border-box;
  background: #fff;
  border-radius: 6px;
  padding: 1.25rem 1.35rem 1.35rem;
  border: 1px solid rgba(15, 23, 42, 0.07);
  box-shadow:
    0 4px 6px -1px rgba(15, 23, 42, 0.06),
    0 24px 48px -12px rgba(15, 23, 42, 0.18);
}

.awp-tier-steps-modal__panel::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.awp-tier-steps-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0;
  padding-bottom: 0.85rem;
  margin-block-end: 1rem;
  border-bottom: 1px solid #e2e8f0;
}

.awp-tier-steps-modal__title {
  margin: 0;
  padding-right: 0.25rem;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.3;
}

.awp-tier-steps-modal__close {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  margin: -0.2rem -0.15rem 0 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: #f1f5f9;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  color: #475569;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.awp-tier-steps-modal__close:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.awp-tier-steps-modal__subtitle {
  margin: 0 0 0.5rem;
  font-size: 0;
  height: 0;
  overflow: hidden;
  line-height: 0;
}

.awp-tier-steps-modal__section {
  margin-bottom: 1rem;
}

.awp-tier-steps-modal__section:last-child {
  margin-bottom: 0;
}

.awp-tier-steps-modal__section-title {
  margin: 0 0 0.65rem;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
  line-height: 1.35;
}

.awp-tier-steps-modal__section-sub {
  margin: 0;
  height: 0;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}

.awp-tier-steps-modal__table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #cbd5e1;
  font-size: 0.875rem;
  background: #fff;
}

.awp-tier-steps-modal__table--ledger .awp-tier-steps-modal__cell--qty {
  font-family: "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  color: #0f172a;
}

.awp-tier-steps-modal__table th,
.awp-tier-steps-modal__table td {
  padding: 0.5rem 0.6rem;
  vertical-align: middle;
  border: 1px solid #e2e8f0;
}

.awp-tier-steps-modal__table th {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 900;
  font-size: 0.75rem;
  color: #0f172a;
  text-transform: none;
  letter-spacing: 0;
  background: #f8fafc;
}

.awp-tier-steps-modal__table thead th:first-child {
  text-align: left;
}

.awp-tier-steps-modal__table thead th:nth-child(2),
.awp-tier-steps-modal__table thead th:nth-child(3) {
  text-align: right;
}

.awp-tier-steps-modal__table tbody td.awp-tier-steps-modal__cell--qty {
  text-align: left;
}

.awp-tier-steps-modal__table tbody tr:nth-child(odd) td {
  background: #f8fafc;
}

.awp-tier-steps-modal__table tbody tr:nth-child(even) td {
  background: #fff;
}

.awp-tier-steps-modal__table tbody tr.awp-tier-steps-modal__row--pickable {
  cursor: pointer;
}

.awp-tier-steps-modal__table
  tbody
  tr.awp-tier-steps-modal__row--pickable:hover
  td {
  background: #e0f2fe !important;
  box-shadow: inset 0 0 0 1px #38bdf8;
}

.awp-tier-steps-modal__cell--num {
  font-family: "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  color: #0f172a;
}

.awp-tier-money__num {
  color: #0f172a;
}

.awp-tier-money__unit {
  margin-left: 0.07em;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.65em;
  letter-spacing: 0.02em;
  color: #334155;
  vertical-align: baseline;
}

.awp-tier-steps-modal__cell--pct {
  text-align: center;
  font-family: "Roboto Condensed", sans-serif;
}

@media (max-width: 640px) {
  .awp-tier-steps-modal__panel {
    width: min(94vw, 440px);
    max-height: min(88vh, 720px);
    padding: 1.05rem 1.1rem 1.15rem;
    border-radius: 6px;
  }

  .awp-tier-steps-modal__title {
    font-size: 0.98rem;
  }
}

/* ============================================
   WooCommerce Kay?t/Giri? Form D?zeltmeleri
   ============================================ */

/* Zorunlu alan i?aret?isi g?r?n?r hale getir */
.woocommerce-form-register .required,
.woocommerce-form-login .required,
.woocommerce form .form-row .required {
  color: #dc2626 !important;
  font-weight: 700 !important;
  margin-left: 2px !important;
}

/* ?lke se?imi (Select2) - Dark Mode Deste?i */
body.dark-mode .select2-container--default .select2-selection--single,
body.dark-mode .select2-dropdown,
body.dark-mode .select2-container--default .select2-results__option {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
  border-color: #334155 !important;
}

body.dark-mode .select2-container--default .select2-results__option--highlighted {
  background-color: #0ea5e9 !important;
  color: #ffffff !important;
}

body.dark-mode .select2-container--default .select2-results__option[aria-selected=true] {
  background-color: #0284c7 !important;
  color: #ffffff !important;
}

body.dark-mode .select2-search--dropdown .select2-search__field {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
  border-color: #334155 !important;
}

/* WooCommerce form alanlar? - Dark Mode */
body.dark-mode .woocommerce-form-register input[type="text"],
body.dark-mode .woocommerce-form-register input[type="email"],
body.dark-mode .woocommerce-form-register input[type="password"],
body.dark-mode .woocommerce-form-register input[type="tel"],
body.dark-mode .woocommerce-form-register select,
body.dark-mode .woocommerce-form-login input[type="text"],
body.dark-mode .woocommerce-form-login input[type="password"] {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
  border-color: #334155 !important;
}

body.dark-mode .woocommerce-form-register input::placeholder,
body.dark-mode .woocommerce-form-login input::placeholder {
  color: #94a3b8 !important;
}

/* WooCommerce form label - Dark Mode */
body.dark-mode .woocommerce-form-register label,
body.dark-mode .woocommerce-form-login label {
  color: #f1f5f9 !important;
}

/* ?ifre g?r?n?rl?k toggle butonu - WooCommerce formlar? i?in */
.woocommerce-form-register .password-input-wrapper,
.woocommerce-form-login .password-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.woocommerce-form-register .password-toggle-btn,
.woocommerce-form-login .password-toggle-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  transition: color 0.2s ease;
}

.woocommerce-form-register .password-toggle-btn:hover,
.woocommerce-form-login .password-toggle-btn:hover {
  color: #0ea5e9;
}

body.dark-mode .woocommerce-form-register .password-toggle-btn,
body.dark-mode .woocommerce-form-login .password-toggle-btn {
  color: #94a3b8;
}

body.dark-mode .woocommerce-form-register .password-toggle-btn:hover,
body.dark-mode .woocommerce-form-login .password-toggle-btn:hover {
  color: #38bdf8;
}

.password-toggle-btn svg {
  width: 20px;
  height: 20px;
}

/* WooCommerce kay?t formu input padding (sa?da toggle butonu i?in yer a?) */
.woocommerce-form-register .password-input-wrapper input[type="password"],
.woocommerce-form-login .password-input-wrapper input[type="password"] {
  padding-right: 40px !important;
}

/* ============================================
   Paket Sat?n Alma Hat?rlat?c? Modal
   ============================================ */

.awp-package-reminder-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 999999;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  animation: fadeIn 0.3s ease;
}

.awp-package-reminder-modal[style*="display: flex"] {
  display: flex !important;
}

.awp-package-reminder-modal-content {
  position: relative;
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.3);
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUpModal 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

body.dark-mode .awp-package-reminder-modal-content {
  background: #1e293b;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.awp-package-reminder-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: #64748b;
  transition: all 0.2s ease;
  z-index: 10;
}

.awp-package-reminder-modal-close:hover {
  background: #f1f5f9;
  color: #0f172a;
}

body.dark-mode .awp-package-reminder-modal-close:hover {
  background: #334155;
  color: #f1f5f9;
}

.awp-package-reminder-modal-close svg {
  width: 20px;
  height: 20px;
}

.awp-package-reminder-modal-body {
  padding: 48px 32px 32px;
  text-align: center;
}

.awp-package-reminder-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  border-radius: 50%;
  animation: pulseScale 2s ease-in-out infinite;
}

.awp-package-reminder-icon svg {
  width: 40px;
  height: 40px;
  color: #ffffff;
  stroke-width: 2.5;
}

@keyframes pulseScale {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 12px rgba(14, 165, 233, 0);
  }
}

.awp-package-reminder-title {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1.75rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 16px;
  line-height: 1.2;
}

body.dark-mode .awp-package-reminder-title {
  color: #f1f5f9;
}

.awp-package-reminder-message {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #475569;
  line-height: 1.6;
  margin: 0 0 32px;
}

body.dark-mode .awp-package-reminder-message {
  color: #cbd5e1;
}

.awp-package-reminder-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.awp-package-reminder-btn {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.awp-package-reminder-btn-primary {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.awp-package-reminder-btn-primary:hover {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  box-shadow: 0 6px 16px rgba(14, 165, 233, 0.4);
  transform: translateY(-2px);
}

.awp-package-reminder-btn-secondary {
  background: #f1f5f9;
  color: #475569;
}

.awp-package-reminder-btn-secondary:hover {
  background: #e2e8f0;
  color: #0f172a;
}

body.dark-mode .awp-package-reminder-btn-secondary {
  background: #334155;
  color: #cbd5e1;
}

body.dark-mode .awp-package-reminder-btn-secondary:hover {
  background: #475569;
  color: #f1f5f9;
}

.awp-package-reminder-note {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  color: #94a3b8;
  line-height: 1.5;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
}

body.dark-mode .awp-package-reminder-note {
  color: #64748b;
  border-top-color: #334155;
}

@media (max-width: 640px) {
  .awp-package-reminder-modal {
    padding: 16px;
  }

  .awp-package-reminder-modal-content {
    border-radius: 6px;
  }

  .awp-package-reminder-modal-body {
    padding: 40px 24px 24px;
  }

  .awp-package-reminder-icon {
    width: 64px;
    height: 64px;
  }

  .awp-package-reminder-icon svg {
    width: 36px;
    height: 36px;
  }

  .awp-package-reminder-title {
    font-size: 1.5rem;
  }

  .awp-package-reminder-message {
    font-size: 0.9375rem;
  }

  .awp-package-reminder-btn {
    font-size: 0.9375rem;
    padding: 12px 20px;
  }
}

/* M??teri kay?t / hesap modal */
.awp-register-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 480px) {
  .awp-register-grid {
    grid-template-columns: 1fr;
  }
}

.awp-account-modal .awp-account-modal-content {
  max-width: 480px;
}

.awp-account-profile {
  margin-bottom: 18px;
}

.awp-account-profile__card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, #0a1f33 0%, #132f4a 100%);
  border-radius: 6px;
  padding: 16px;
  color: #fff;
}

.awp-account-profile__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(15, 118, 110, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.awp-account-profile__text {
  min-width: 0;
}

.awp-account-profile__name {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 4px;
  color: #fff;
}

.awp-account-profile__meta {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.75);
  word-break: break-word;
}

.awp-account-profile__sep {
  margin: 0 6px;
  opacity: 0.6;
}

.awp-account-profile__card--action {
  width: 100%;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.awp-account-profile__card--action:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(10, 31, 51, 0.22);
}

.awp-account-profile__card--action:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}

.awp-account-profile__address {
  margin-top: 6px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.65);
}

.awp-account-profile__edit-hint {
  margin-top: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #99f6e4;
}

.awp-account-edit-modal .awp-account-edit-modal-content {
  max-width: 520px;
}

.awp-account-edit-modal__body {
  max-height: min(82vh, 720px);
  overflow-y: auto;
  padding-right: 4px;
}

.awp-account-edit-section {
  border: none;
  margin: 0 0 16px;
  padding: 0;
}

.awp-account-edit-section legend {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 10px;
  padding: 0;
}

.awp-account-edit-section--shipping[hidden] {
  display: none !important;
}

.awp-account-edit-select {
  appearance: auto;
}

.awp-account-edit-ship-toggle {
  margin: 4px 0 14px;
}

.awp-account-edit-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: #334155;
  cursor: pointer;
}

.awp-account-edit-checkbox input {
  width: 16px;
  height: 16px;
  accent-color: #0f766e;
}

.awp-auth-phone-row {
  width: 100%;
}

.awp-auth-phone-row .awp-auth-phone-input,
.awp-auth-phone-row .wp-login-input {
  flex: 1;
  min-width: 0;
}

.awp-auth-phone-row .awp-proforma-phone-selected {
  min-height: 42px;
}

.awp-account-orders-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 4px 0 12px;
  color: #64748b;
}

.awp-account-orders {
  max-height: min(48vh, 340px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 2px;
}

.awp-account-orders__empty,
.awp-account-orders__loading,
.awp-account-profile__loading {
  font-size: 0.875rem;
  color: #64748b;
  padding: 16px 4px;
  text-align: center;
}

.awp-account-order {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 12px 14px;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.awp-account-order:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

body.dark-mode .awp-account-order {
  border-color: #334155;
  background: #0f172a;
}

.awp-account-order__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.awp-account-order__num {
  font-weight: 700;
  font-size: 0.9rem;
  color: #0a1f33;
}

body.dark-mode .awp-account-order__num {
  color: #f1f5f9;
}

.awp-account-order__status {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 6px;
  background: #e2e8f0;
  color: #334155;
  white-space: nowrap;
}

.awp-account-order__status--completed,
.awp-account-order__status--processing {
  background: #ccfbf1;
  color: #0f766e;
}

.awp-account-order__status--pending,
.awp-account-order__status--on-hold {
  background: #fef3c7;
  color: #92400e;
}

.awp-account-order__status--cancelled,
.awp-account-order__status--failed {
  background: #fee2e2;
  color: #991b1b;
}

.awp-account-order__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 0.8rem;
  color: #64748b;
  margin-bottom: 6px;
}

.awp-account-order__calc {
  background: #f0fdfa;
  color: #0f766e;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
}

.awp-account-order__total {
  font-weight: 700;
  font-size: 0.95rem;
  color: #0a1f33;
}

body.dark-mode .awp-account-order__total {
  color: #f8fafc;
}

/* ============================================
   Summary panel: label/sublabel wrap before price
   (metin fiyat s?tununa ta?mas?n ? t?m formlar)
   ============================================ */
.module-ders-notu-cost-row,
.module-dijital-baski-cost-row,
.module-rulo-baski-cost-row,
.module-katalog-cost-row {
  align-items: flex-start !important;
  gap: 12px !important;
  min-width: 0;
}

.module-ders-notu-cost-label-wrap,
.module-dijital-baski-cost-label-wrap,
.module-rulo-baski-cost-label-wrap {
  flex: 1 1 auto;
  min-width: 0;
  max-width: calc(100% - 6.75rem);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.module-ders-notu-cost-label,
.module-dijital-baski-cost-label,
.module-rulo-baski-cost-label,
.module-katalog-cost-label,
.module-ders-notu-cost-sublabel,
.module-dijital-baski-cost-sublabel,
.module-rulo-baski-cost-sublabel {
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

.module-ders-notu-cost-value,
.module-dijital-baski-cost-value,
.module-rulo-baski-cost-value,
.module-katalog-cost-value {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  text-align: right;
  max-width: 42%;
}

.module-katalog-cost-label {
  flex: 1 1 auto;
  max-width: calc(100% - 6.75rem);
}