/*
 * E-Ticaret Araçları — Premium Design System v2
 * ================================================
 * Light-first, agency-grade aesthetic.
 * DM Sans (UI) + DM Mono (numbers/code)
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */

:root {
  --eta-blue:        #2563EB;
  --eta-blue-dark:   #1D4ED8;
  --eta-blue-light:  #EFF6FF;
  --eta-navy:        #1E293B;
  --eta-accent:      #38BDF8;
  --eta-accent-dark: #0284C7;

  --eta-bg:          #F8FAFC;
  --eta-surface:     #FFFFFF;
  --eta-surface-2:   #F1F5F9;
  --eta-border:      #E2E8F0;
  --eta-border-focus:#93C5FD;

  --eta-text:        #0F172A;
  --eta-text-2:      #475569;
  --eta-text-3:      #94A3B8;
  --eta-text-inv:    #FFFFFF;

  --eta-green:       #059669;
  --eta-green-bg:    #ECFDF5;
  --eta-green-border:#6EE7B7;
  --eta-red:         #DC2626;
  --eta-red-bg:      #FEF2F2;
  --eta-amber:       #D97706;
  --eta-amber-bg:    #FFFBEB;

  --eta-trendyol:    #F76103;
  --eta-amazon:      #FF9900;
  --eta-hepsi:       #0063C0;
  --eta-cicek:       #F13661;
  --eta-etsy:        #EB5D28;
  --eta-n11:         #7800C8;

  --eta-s1:  4px;  --eta-s2:  8px;  --eta-s3:  12px; --eta-s4:  16px;
  --eta-s5:  20px; --eta-s6:  24px; --eta-s7:  32px; --eta-s8:  40px;

  --eta-r-sm: 6px; --eta-r-md: 10px; --eta-r-lg: 16px; --eta-r-xl: 20px;

  --eta-shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --eta-shadow-md:  0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --eta-shadow-lg:  0 12px 32px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.05);
  --eta-shadow-inp: 0 0 0 3px rgba(37,99,235,.15);

  --eta-font:   'DM Sans', system-ui, -apple-system, sans-serif;
  --eta-mono:   'DM Mono', 'Fira Code', monospace;

  --eta-ease:     cubic-bezier(.4,0,.2,1);
  --eta-ease-out: cubic-bezier(0,0,.2,1);
  --eta-dur-fast: 150ms;
  --eta-dur-base: 200ms;
  --eta-dur-slow: 300ms;
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */

.eta-wrapper *, .eta-wrapper *::before, .eta-wrapper *::after { box-sizing: border-box; }

.eta-wrapper {
  font-family:   var(--eta-font);
  font-size:     15px;
  line-height:   1.5;
  color:         var(--eta-text);
  background:    var(--eta-bg);
  border-radius: var(--eta-r-xl);
  overflow:      hidden;
  border:        1px solid var(--eta-border);
  box-shadow:    var(--eta-shadow-lg);
}

.eta-standalone {
  font-family: var(--eta-font);
  font-size:   15px;
  color:       var(--eta-text);
  max-width:   760px;
  margin:      0 auto;
}

/* ==========================================================================
   TAB NAVIGATION
   ========================================================================== */

.eta-nav {
  display:       flex;
  flex-wrap:     wrap;
  gap:           2px;
  padding:       var(--eta-s4) var(--eta-s5) 0;
  background:    var(--eta-surface);
  border-bottom: 1px solid var(--eta-border);
  overflow-x:    auto;
  scrollbar-width: none;
}
.eta-nav::-webkit-scrollbar { display: none; }

.eta-nav-btn {
  display:      flex;
  align-items:  center;
  gap:          var(--eta-s2);
  padding:      var(--eta-s2) var(--eta-s4);
  border:       none;
  border-bottom: 2px solid transparent;
  border-radius: var(--eta-r-sm) var(--eta-r-sm) 0 0;
  background:   transparent;
  color:        var(--eta-text-2);
  font-family:  var(--eta-font);
  font-size:    13px;
  font-weight:  500;
  cursor:       pointer;
  white-space:  nowrap;
  transition:   color var(--eta-dur-fast) var(--eta-ease),
                border-color var(--eta-dur-fast) var(--eta-ease),
                background var(--eta-dur-fast) var(--eta-ease);
  outline-offset: 2px;
  margin-bottom: -1px;
}

.eta-nav-btn:hover  { color: var(--eta-text); background: var(--eta-surface-2); }
.eta-nav-btn:focus-visible { outline: 2px solid var(--eta-blue); border-radius: var(--eta-r-sm); }
.eta-nav-btn.active { color: var(--eta-blue); border-bottom-color: var(--eta-blue); background: var(--eta-blue-light); font-weight: 600; }
.eta-nav-btn svg    { width: 15px; height: 15px; flex-shrink: 0; opacity: .7; }
.eta-nav-btn.active svg { opacity: 1; }

/* ==========================================================================
   PANELS
   ========================================================================== */

.eta-panels {
  padding:    var(--eta-s7) var(--eta-s6);
  background: var(--eta-bg);
  min-height: 460px;
}

.eta-panel { display: none; animation: etaFadeUp var(--eta-dur-slow) var(--eta-ease-out) both; }
.eta-panel.active { display: block; }

@keyframes etaFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) { .eta-panels { padding: var(--eta-s5) var(--eta-s4); } }

/* ==========================================================================
   TOOL CARD
   ========================================================================== */

.eta-tool-card {
  background:    var(--eta-surface);
  border-radius: var(--eta-r-lg);
  padding:       var(--eta-s7);
  border:        1px solid var(--eta-border);
  box-shadow:    var(--eta-shadow-md);
  max-width:     720px;
}

.eta-tool-header {
  margin-bottom:  var(--eta-s6);
  padding-bottom: var(--eta-s5);
  border-bottom:  1px solid var(--eta-border);
}

.eta-tool-title {
  font-size:   20px;
  font-weight: 700;
  color:       var(--eta-navy);
  margin:      0 0 var(--eta-s2);
  display:     flex;
  align-items: center;
  gap:         var(--eta-s3);
  line-height: 1.2;
}

.eta-tool-title .eta-badge {
  font-size:    10px;
  font-weight:  600;
  padding:      2px 8px;
  border-radius: 20px;
  background:   var(--eta-blue-light);
  color:        var(--eta-blue);
  letter-spacing: .4px;
  text-transform: uppercase;
}

.eta-tool-desc { font-size: 14px; color: var(--eta-text-2); margin: 0; line-height: 1.6; }

@media (max-width: 640px) {
  .eta-tool-card  { padding: var(--eta-s5); border-radius: var(--eta-r-md); }
  .eta-tool-title { font-size: 18px; }
}

/* ==========================================================================
   PLATFORM BADGE
   ========================================================================== */

.eta-platform-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--eta-s2);
  padding:       5px 12px;
  border-radius: 20px;
  font-size:     12px;
  font-weight:   600;
  margin-bottom: var(--eta-s5);
  letter-spacing: .2px;
}

.badge-trendyol { background: #FFF4EE; color: var(--eta-trendyol); }
.badge-amazon   { background: #FFF8EC; color: var(--eta-amazon);   }
.badge-hepsi    { background: #EEF5FF; color: var(--eta-hepsi);    }
.badge-cicek    { background: #FFF0F4; color: var(--eta-cicek);    }
.badge-etsy     { background: #FFF3EE; color: var(--eta-etsy);     }
.badge-n11      { background: #F5EEFF; color: var(--eta-n11);      }

/* ==========================================================================
   FORM ELEMENTS
   ========================================================================== */

.eta-field { margin-bottom: var(--eta-s5); }

.eta-field label, .eta-label {
  display:        block;
  font-size:      12px;
  font-weight:    600;
  color:          var(--eta-text-2);
  margin-bottom:  var(--eta-s2);
  letter-spacing: .3px;
  text-transform: uppercase;
}

.eta-input, .eta-select, .eta-textarea {
  width:         100%;
  padding:       10px 14px;
  border-radius: var(--eta-r-md);
  border:        1.5px solid var(--eta-border);
  background:    var(--eta-surface);
  color:         var(--eta-text);
  font-family:   var(--eta-font);
  font-size:     15px;
  line-height:   1.4;
  transition:    border-color var(--eta-dur-fast) var(--eta-ease), box-shadow var(--eta-dur-fast) var(--eta-ease);
  box-sizing:    border-box;
  appearance:    none;
  -webkit-appearance: none;
}

.eta-input:hover, .eta-select:hover, .eta-textarea:hover { border-color: var(--eta-text-3); }

.eta-input:focus, .eta-select:focus, .eta-textarea:focus {
  outline:      none;
  border-color: var(--eta-blue);
  box-shadow:   var(--eta-shadow-inp);
}

.eta-input::placeholder { color: var(--eta-text-3); }

.eta-select {
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394A3B8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 14px center;
  padding-right:       38px;
  cursor:              pointer;
}

.eta-select option { background: var(--eta-surface); color: var(--eta-text); }
.eta-textarea { min-height: 90px; resize: vertical; line-height: 1.6; }

.eta-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--eta-s4); }
@media (max-width: 520px) { .eta-row { grid-template-columns: 1fr; } }

.eta-input-group { position: relative; }
.eta-input-group .eta-input-prefix {
  position:      absolute;
  left:          12px;
  top:           50%;
  transform:     translateY(-50%);
  color:         var(--eta-text-3);
  font-size:     14px;
  font-weight:   500;
  pointer-events: none;
}
.eta-input-group .eta-input { padding-left: 28px; }

.eta-char-counter { font-size: 11px; text-align: right; margin-top: var(--eta-s1); font-variant-numeric: tabular-nums; transition: color var(--eta-dur-fast); }
.eta-char-counter.good { color: var(--eta-green); }
.eta-char-counter.warn { color: var(--eta-amber); }
.eta-char-counter.bad  { color: var(--eta-red);   }

.eta-range { width: 100%; accent-color: var(--eta-blue); height: 4px; border-radius: 2px; cursor: pointer; }

.eta-field.has-error .eta-input,
.eta-field.has-error .eta-select,
.eta-field.has-error .eta-textarea {
  border-color: var(--eta-red);
  box-shadow:   0 0 0 3px rgba(220,38,38,.12);
}

.eta-field-error { font-size: 12px; color: var(--eta-red); margin-top: var(--eta-s1); display: none; }
.eta-field.has-error .eta-field-error { display: block; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.eta-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--eta-s2);
  padding:         11px var(--eta-s6);
  border-radius:   var(--eta-r-md);
  border:          none;
  font-family:     var(--eta-font);
  font-size:       14px;
  font-weight:     600;
  letter-spacing:  .1px;
  cursor:          pointer;
  transition:      background var(--eta-dur-fast) var(--eta-ease),
                   box-shadow var(--eta-dur-fast) var(--eta-ease),
                   transform  var(--eta-dur-fast) var(--eta-ease);
  outline-offset:  2px;
}

.eta-btn:focus-visible { outline: 2px solid var(--eta-blue); }

.eta-btn-primary {
  background: var(--eta-blue);
  color:      var(--eta-text-inv);
  box-shadow: 0 2px 8px rgba(37,99,235,.28);
}
.eta-btn-primary:hover   { background: var(--eta-blue-dark); box-shadow: 0 4px 14px rgba(37,99,235,.35); transform: translateY(-1px); }
.eta-btn-primary:active  { transform: translateY(0); box-shadow: 0 1px 4px rgba(37,99,235,.2); }

.eta-btn-secondary {
  background: var(--eta-surface);
  color:      var(--eta-text-2);
  border:     1.5px solid var(--eta-border);
  box-shadow: var(--eta-shadow-sm);
}
.eta-btn-secondary:hover { background: var(--eta-surface-2); color: var(--eta-text); border-color: var(--eta-text-3); }

.eta-btn-green {
  background: #16A34A;
  color:      var(--eta-text-inv);
  box-shadow: 0 2px 8px rgba(22,163,74,.25);
}
.eta-btn-green:hover { background: #15803D; transform: translateY(-1px); }

.eta-btn-full { width: 100%; }

/* ==========================================================================
   RESULT PANELS
   ========================================================================== */

.eta-result {
  margin-top:    var(--eta-s6);
  padding:       var(--eta-s5) var(--eta-s6);
  border-radius: var(--eta-r-lg);
  background:    var(--eta-green-bg);
  border:        1.5px solid var(--eta-green-border);
  display:       none;
}

.eta-result.visible { display: block; animation: etaFadeUp var(--eta-dur-slow) var(--eta-ease-out) both; }

.eta-result-title {
  font-size:    11px;
  font-weight:  700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color:        var(--eta-green);
  margin-bottom: var(--eta-s4);
}

.eta-result-row {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  gap:             var(--eta-s4);
  padding:         9px 0;
  border-bottom:   1px solid rgba(0,0,0,.06);
}
.eta-result-row:last-child { border-bottom: none; }
.eta-result-row .label { font-size: 13px; color: var(--eta-text-2); flex-shrink: 0; }
.eta-result-row .value { font-family: var(--eta-mono); font-size: 14px; font-weight: 500; color: var(--eta-text); text-align: right; }

.eta-result-row.is-primary .value { font-size: 20px; font-weight: 700; color: var(--eta-green); }
.eta-result-row.is-primary .label { font-weight: 600; color: var(--eta-text); }

.eta-result-neutral { background: var(--eta-surface-2); border-color: var(--eta-border); }
.eta-result-neutral .eta-result-title { color: var(--eta-text-2); }

/* ==========================================================================
   QR KOD OLUŞTURUCU
   ========================================================================== */

/* ── Content type tab strip ── */
.eta-qr-type-tabs {
  display:    flex;
  flex-wrap:  wrap;
  gap:        6px;
  margin-top: var(--eta-s2);
}
.eta-qr-type-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  padding:       6px 12px;
  border-radius: var(--eta-r-sm);
  border:        1.5px solid var(--eta-border);
  background:    var(--eta-surface);
  color:         var(--eta-text-2);
  font-size:     13px;
  font-weight:   500;
  cursor:        pointer;
  transition:    border-color .15s, background .15s, color .15s;
  white-space:   nowrap;
}
.eta-qr-type-btn:hover { border-color: var(--eta-blue); color: var(--eta-blue); }
.eta-qr-type-btn.active {
  border-color: var(--eta-blue);
  background:   var(--eta-blue-light);
  color:        var(--eta-blue);
}
.eta-qr-type-btn svg { flex-shrink: 0; }

/* ── Settings box ── */
.eta-qr-settings {
  border:        1px solid var(--eta-border);
  border-radius: var(--eta-r-md);
  padding:       var(--eta-s4) var(--eta-s5);
  background:    var(--eta-surface-2);
  margin-bottom: var(--eta-s3);
}
.eta-qr-settings-title {
  font-size:      12px;
  font-weight:    600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color:          var(--eta-text-2);
  margin-bottom:  var(--eta-s4);
}
.eta-qr-settings-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--eta-s4);
}
@media (max-width: 480px) { .eta-qr-settings-grid { grid-template-columns: 1fr; } }

/* ── Color picker row ── */
.eta-qr-color-wrap {
  display:     flex;
  align-items: center;
  gap:         10px;
  margin-top:  var(--eta-s2);
}
.eta-qr-color-input {
  width:         44px;
  height:        38px;
  border:        1.5px solid var(--eta-border);
  border-radius: var(--eta-r-sm);
  padding:       3px;
  cursor:        pointer;
  background:    var(--eta-surface);
}
.eta-qr-color-val {
  font-family: var(--eta-mono);
  font-size:   12px;
  color:       var(--eta-text-2);
}

/* ── Eye button inside password input ── */
.eta-input-eye-btn {
  position:        absolute;
  right:           10px;
  top:             50%;
  transform:       translateY(-50%);
  background:      none;
  border:          none;
  padding:         4px;
  cursor:          pointer;
  color:           var(--eta-text-3);
  display:         flex;
  align-items:     center;
}
.eta-input-eye-btn:hover { color: var(--eta-text-2); }
/* Make room for the eye button in the input */
.eta-input-group:has(.eta-input-eye-btn) .eta-input { padding-right: 38px; }

/* ── WiFi checkbox label ── */
.eta-qr-checkbox-label {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   14px;
  color:       var(--eta-text-2);
  cursor:      pointer;
}
.eta-checkbox {
  width:         16px;
  height:        16px;
  accent-color:  var(--eta-blue);
  cursor:        pointer;
  flex-shrink:   0;
}

/* ── Output section ── */
#eta-qr-output {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--eta-s5);
  margin-top:     var(--eta-s6);
}
#eta-qr-output[hidden] { display: none; }

/* QR canvas wrapper (inline padding = quiet zone) */
#eta-qr-canvas {
  border-radius: var(--eta-r-md);
  border:        1px solid var(--eta-border);
  box-shadow:    var(--eta-shadow-md);
  line-height:   0;
  /* background and padding set inline by JS */
  padding:       16px;
  background:    #fff;
  transition:    padding .2s ease;
}
#eta-qr-canvas img,
#eta-qr-canvas canvas { display: block; }

/* ── Preview wrap: QR + content string ── */
.eta-qr-preview-wrap {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--eta-s3);
  width:          100%;
}
.eta-qr-content-preview {
  display:      flex;
  align-items:  flex-start;
  gap:          6px;
  width:        100%;
  max-width:    420px;
  padding:      8px 12px;
  border-radius:var(--eta-r-sm);
  background:   var(--eta-surface-2);
  border:       1px solid var(--eta-border);
}
.eta-qr-content-label {
  font-size:   11px;
  font-weight: 600;
  color:       var(--eta-text-3);
  white-space: nowrap;
  padding-top: 1px;
  flex-shrink: 0;
}
.eta-qr-content-val {
  font-family:   var(--eta-mono);
  font-size:     11px;
  color:         var(--eta-text-2);
  word-break:    break-all;
  line-height:   1.5;
}

/* ── Export row ── */
.eta-qr-export-row {
  display:     flex;
  align-items: center;
  gap:         var(--eta-s2);
  flex-wrap:   wrap;
}
.eta-qr-export-label {
  font-size:   12px;
  font-weight: 600;
  color:       var(--eta-text-3);
  margin-right:2px;
}

/* ==========================================================================
   META PREVIEW  (SERP snippet tool)
   ========================================================================== */

/* ── Label row: label left, char bar + counter right ── */
.eta-label-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--eta-s3);
  margin-bottom:   var(--eta-s2);
}
.eta-label-row .eta-label { margin-bottom: 0; }

/* ── Character progress bar ── */
.eta-char-bar-wrap {
  display:     flex;
  align-items: center;
  gap:         8px;
  flex-shrink: 0;
}
.eta-char-bar {
  width:         72px;
  height:        4px;
  background:    var(--eta-border);
  border-radius: 2px;
  overflow:      hidden;
}
.eta-char-bar-fill {
  height:           100%;
  width:            0%;
  border-radius:    2px;
  background:       var(--eta-text-3);
  transition:       width .15s ease, background .15s ease;
}
.eta-char-bar-fill.is-good { background: var(--eta-green); }
.eta-char-bar-fill.is-warn { background: var(--eta-amber); }
.eta-char-bar-fill.is-bad  { background: var(--eta-red);   }

/* Override default margin when counter sits inside label-row */
.eta-label-row .eta-char-counter { margin-top: 0; }

/* ── Subtle hint text below inputs ── */
.eta-field-hint {
  display:     block;
  font-size:   11px;
  color:       var(--eta-text-3);
  margin-top:  4px;
  line-height: 1.4;
}

/* ── Device toggle row ── */
.eta-meta-device-toggle {
  display:     flex;
  align-items: center;
  gap:         var(--eta-s3);
  margin-bottom: var(--eta-s4);
}
.eta-meta-device-toggle .eta-label { margin: 0; white-space: nowrap; }

/* ── SERP wrapper — white card replicating a browser result page ── */
.eta-meta-serp-wrap {
  background:    #fff;
  border:        1px solid #dfe1e5;
  border-radius: var(--eta-r-md);
  overflow:      hidden;
  margin-bottom: var(--eta-s5);
  transition:    max-width .2s ease;
}

/* Mobile device modifier */
.eta-meta-serp-wrap.is-mobile { max-width: 390px; }

/* ── Simulated browser chrome bar ── */
.eta-meta-serp-chrome {
  background:    #f8f9fa;
  border-bottom: 1px solid #e8eaed;
  padding:       10px 14px;
}
.eta-meta-serp-bar {
  display:       flex;
  align-items:   center;
  gap:           8px;
  background:    #fff;
  border:        1px solid #dfe1e5;
  border-radius: 22px;
  padding:       5px 14px;
  max-width:     480px;
  color:         #5f6368;
  font-size:     13px;
  font-family:   Arial, sans-serif;
}
.eta-meta-serp-bar svg { flex-shrink: 0; color: #9aa0a6; }
.eta-meta-serp-bar-text { color: #5f6368; }

/* ── SERP result body ── */
.eta-meta-serp-result {
  padding: 16px 20px 22px;
}

/* Site info row: favicon + domain/crumb + kebab */
.eta-serp-site-row {
  display:     flex;
  align-items: center;
  gap:         10px;
  margin-bottom: 6px;
}
.eta-serp-favicon {
  width:          26px;
  height:         26px;
  border-radius:  50%;
  background:     #e8eaed;
  display:        flex;
  align-items:    center;
  justify-content:center;
  flex-shrink:    0;
  overflow:       hidden;
}
.eta-serp-domain-wrap {
  flex:       1;
  min-width:  0;
  line-height:1.3;
}
.eta-serp-domain {
  display:        block;
  font-size:      14px;
  color:          #202124;
  font-weight:    500;
  font-family:    Arial, sans-serif;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}
.eta-serp-breadcrumb {
  display:       block;
  font-size:     12px;
  color:         #5f6368;
  font-family:   Arial, sans-serif;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.eta-serp-kebab {
  background:    none;
  border:        none;
  color:         #5f6368;
  font-size:     18px;
  padding:       4px 6px;
  border-radius: 50%;
  line-height:   1;
  cursor:        default;
  flex-shrink:   0;
}

/* SERP title */
.eta-serp-title {
  font-size:      20px;
  color:          #1a0dab;
  line-height:    1.3;
  margin-bottom:  4px;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
  cursor:         pointer;
  font-weight:    400;
  font-family:    Arial, sans-serif;
}
.eta-serp-title:hover       { text-decoration: underline; }
.eta-serp-title.is-placeholder { color: #bdc1c6; }
.eta-meta-serp-wrap.is-mobile .eta-serp-title { font-size: 18px; }

/* SERP description */
.eta-serp-desc {
  font-size:              14px;
  color:                  #4d5156;
  line-height:            1.57;
  display:                -webkit-box;
  -webkit-line-clamp:     2;
  -webkit-box-orient:     vertical;
  overflow:               hidden;
  font-family:            Arial, sans-serif;
}
.eta-serp-desc.is-placeholder   { color: #bdc1c6; }
.eta-meta-serp-wrap.is-mobile .eta-serp-desc { font-size: 13px; }

/* ── SEO guidance grid ── */
.eta-meta-guidance {
  border:        1px solid var(--eta-border);
  border-radius: var(--eta-r-md);
  padding:       var(--eta-s4) var(--eta-s5);
  background:    var(--eta-surface-2);
  margin-top:    var(--eta-s2);
}
.eta-meta-guidance-title {
  font-size:      12px;
  font-weight:    600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color:          var(--eta-text-2);
  margin-bottom:  var(--eta-s4);
}
.eta-meta-guidance-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--eta-s4);
}
@media (max-width: 480px) {
  .eta-meta-guidance-grid { grid-template-columns: 1fr; }
}
.eta-meta-guide-item {
  display:        flex;
  flex-direction: column;
  gap:            5px;
}
.eta-meta-guide-label {
  font-size:   13px;
  font-weight: 600;
  color:       var(--eta-text);
}
.eta-meta-guide-range {
  display:     flex;
  align-items: center;
  gap:         6px;
  font-size:   12px;
  color:       var(--eta-text-2);
}
.eta-guide-badge {
  display:       inline-flex;
  align-items:   center;
  padding:       2px 9px;
  border-radius: 10px;
  font-size:     11px;
  font-weight:   600;
  white-space:   nowrap;
}
.eta-guide-badge.eta-guide-good { background: #D1FAE5; color: #065F46; }
.eta-guide-badge.eta-guide-warn { background: #FEF3C7; color: #92400E; }
.eta-guide-badge.eta-guide-bad  { background: #FEE2E2; color: #991B1B; }
.eta-meta-guide-desc {
  font-size:   11px;
  color:       var(--eta-text-3);
  line-height: 1.5;
}

/* ==========================================================================
   COPY INPUT
   ========================================================================== */

.eta-copy-wrap { display: flex; gap: var(--eta-s3); align-items: center; margin-top: var(--eta-s4); }

.eta-copy-input {
  flex:          1;
  font-family:   var(--eta-mono);
  font-size:     13px;
  padding:       10px 14px;
  border-radius: var(--eta-r-md);
  background:    var(--eta-surface-2);
  border:        1.5px solid var(--eta-border);
  color:         var(--eta-text);
  cursor:        text;
  user-select:   all;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

/* ==========================================================================
   NOTE / INFO BLOCKS
   ========================================================================== */

.eta-note {
  display:       flex;
  gap:           var(--eta-s3);
  padding:       var(--eta-s4) var(--eta-s5);
  border-radius: var(--eta-r-md);
  background:    var(--eta-blue-light);
  border:        1px solid #BFDBFE;
  font-size:     12.5px;
  color:         #1E40AF;
  line-height:   1.6;
  margin-top:    var(--eta-s5);
}

.eta-note svg          { flex-shrink: 0; margin-top: 1px; }
.eta-note.is-warning   { background: var(--eta-amber-bg); border-color: #FDE68A; color: #92400E; }
.eta-note.is-success   { background: var(--eta-green-bg); border-color: var(--eta-green-border); color: #065F46; }

/* ==========================================================================
   DIVIDER
   ========================================================================== */

.eta-divider { height: 1px; background: var(--eta-border); margin: var(--eta-s6) 0; border: none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 640px) {
  .eta-nav { padding: var(--eta-s3) var(--eta-s4) 0; flex-wrap: nowrap; }
  .eta-nav-btn { font-size: 12px; padding: var(--eta-s2) var(--eta-s3); }
  .eta-btn { font-size: 14px; }
}

/* ==========================================================================
   ACCESSIBILITY — reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .eta-panel, .eta-result.visible { animation: none; }
  .eta-btn, .eta-input, .eta-select, .eta-nav-btn { transition: none; }
}


/* ==========================================================================
   SEGMENTED CONTROL  (mode switch — KDV tool and others)
   ========================================================================== */

.eta-segment {
  display:       inline-flex;
  background:    var(--eta-surface-2);
  border:        1.5px solid var(--eta-border);
  border-radius: var(--eta-r-md);
  padding:       3px;
  gap:           2px;
  width:         100%;
}

.eta-segment-btn {
  flex:            1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--eta-s2);
  padding:         9px var(--eta-s4);
  border:          none;
  border-radius:   calc(var(--eta-r-md) - 2px);
  background:      transparent;
  color:           var(--eta-text-2);
  font-family:     var(--eta-font);
  font-size:       13px;
  font-weight:     500;
  cursor:          pointer;
  white-space:     nowrap;
  transition:      background var(--eta-dur-fast) var(--eta-ease),
                   color      var(--eta-dur-fast) var(--eta-ease),
                   box-shadow var(--eta-dur-fast) var(--eta-ease);
  outline-offset: 2px;
}

.eta-segment-btn:hover:not(.active) {
  background: rgba(0,0,0,.04);
  color:      var(--eta-text);
}

.eta-segment-btn.active {
  background:  var(--eta-surface);
  color:       var(--eta-blue);
  font-weight: 600;
  box-shadow:  var(--eta-shadow-sm);
}

.eta-segment-btn:focus-visible {
  outline: 2px solid var(--eta-blue);
}

.eta-segment-btn svg { flex-shrink: 0; }


/* ==========================================================================
   RATE PILLS  (VAT preset buttons)
   ========================================================================== */

.eta-rate-pills {
  display: flex;
  gap:     var(--eta-s2);
  flex-wrap: wrap;
}

.eta-pill {
  padding:       8px 18px;
  border:        1.5px solid var(--eta-border);
  border-radius: var(--eta-r-md);
  background:    var(--eta-surface);
  color:         var(--eta-text-2);
  font-family:   var(--eta-font);
  font-size:     13px;
  font-weight:   600;
  cursor:        pointer;
  transition:    border-color var(--eta-dur-fast) var(--eta-ease),
                 background   var(--eta-dur-fast) var(--eta-ease),
                 color        var(--eta-dur-fast) var(--eta-ease),
                 box-shadow   var(--eta-dur-fast) var(--eta-ease);
  outline-offset: 2px;
}

.eta-pill:hover:not(.active) {
  border-color: var(--eta-blue);
  color:        var(--eta-blue);
  background:   var(--eta-blue-light);
}

.eta-pill.active {
  background:   var(--eta-blue);
  border-color: var(--eta-blue);
  color:        var(--eta-text-inv);
  box-shadow:   0 2px 6px rgba(37,99,235,.25);
}

.eta-pill:focus-visible {
  outline: 2px solid var(--eta-blue);
}


/* ==========================================================================
   TOOL ACTION ROW  (Hesapla + Temizle)
   ========================================================================== */

.eta-kdv-actions {
  display:      flex;
  gap:          var(--eta-s3);
  align-items:  center;
  margin-bottom: var(--eta-s5);
}

/* Hesapla grows to fill available width; Temizle stays compact */
.eta-kdv-btn-hesapla { flex: 1; }

.eta-btn-sm {
  padding:   7px 14px;
  font-size: 12px;
}

/* Custom rate wrap spacing — removes the inline style from the template */
.eta-custom-rate-wrap .eta-input-group { margin-top: var(--eta-s3); }


/* ==========================================================================
   KDV TOOL — RESULT PANEL ENHANCEMENTS
   ========================================================================== */

/* Primary value row: value + copy button side by side */
.eta-result-primary-val {
  display:     flex;
  align-items: center;
  gap:         var(--eta-s2);
}

/* Copy icon button inside the primary result row */
.eta-result-copy-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           28px;
  height:          28px;
  border:          1px solid var(--eta-green-border);
  border-radius:   var(--eta-r-sm);
  background:      transparent;
  color:           var(--eta-green);
  cursor:          pointer;
  flex-shrink:     0;
  transition:      background var(--eta-dur-fast) var(--eta-ease),
                   color      var(--eta-dur-fast) var(--eta-ease),
                   border-color var(--eta-dur-fast) var(--eta-ease);
  outline-offset:  2px;
}

.eta-result-copy-btn:hover          { background: rgba(5,150,105,.12); }
.eta-result-copy-btn:focus-visible  { outline: 2px solid var(--eta-blue); }
.eta-result-copy-btn.is-copied      { background: var(--eta-green); color: #fff; border-color: var(--eta-green); }

/* Thin divider between primary result and the detail rows */
.eta-result-divider {
  height:     1px;
  background: var(--eta-green-border);
  margin:     var(--eta-s2) 0 var(--eta-s3);
  opacity:    0.45;
  border:     none;
}

/* KDV Tutarı — accent colour to draw the eye */
.eta-result-row .value.eta-val-accent { color: var(--eta-blue); }

/* Muted rows (Oran, İşlem Tipi) — secondary visual weight */
.eta-result-row.eta-result-row-muted           { padding: 6px 0; }
.eta-result-row.eta-result-row-muted .label    { font-size: 12px; color: var(--eta-text-3); }
.eta-result-row.eta-result-row-muted .value    { font-size: 12px; color: var(--eta-text-2); font-weight: 400; }


/* ==========================================================================
   KDV TOOL — RATE REFERENCE BLOCK
   ========================================================================== */

.eta-kdv-rate-ref {
  margin-top:    var(--eta-s5);
  padding:       var(--eta-s4) var(--eta-s5);
  border-radius: var(--eta-r-md);
  background:    var(--eta-surface-2);
  border:        1px solid var(--eta-border);
}

.eta-kdv-rate-ref-title {
  font-size:      11px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color:          var(--eta-text-2);
  margin-bottom:  var(--eta-s3);
}

.eta-kdv-rate-grid {
  display:        flex;
  flex-direction: column;
  gap:            var(--eta-s2);
}

.eta-kdv-rate-item {
  display:     flex;
  align-items: flex-start;
  gap:         var(--eta-s3);
}

.eta-rate-badge {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         3px 10px;
  border-radius:   20px;
  font-size:       11px;
  font-weight:     700;
  font-family:     var(--eta-mono);
  flex-shrink:     0;
  min-width:       42px;
  letter-spacing:  .3px;
}

.eta-rate-1  { background: #F0FDF4; color: #166534; }
.eta-rate-10 { background: #FFFBEB; color: #92400E; }
.eta-rate-20 { background: #EFF6FF; color: #1D4ED8; }

.eta-rate-desc {
  font-size:   12px;
  color:       var(--eta-text-2);
  line-height: 1.55;
  padding-top: 2px;
}


/* ==========================================================================
   WHATSAPP LINK OLUŞTURUCU
   ========================================================================== */

/* ── WhatsApp brand button ── */
.eta-btn-wa {
  background:  #25D366;
  color:       #fff;
  border:      1.5px solid #25D366;
  font-weight: 600;
}
.eta-btn-wa:hover  { background: #1DA851; border-color: #1DA851; }
.eta-btn-wa:focus-visible { outline: 2px solid #25D366; outline-offset: 2px; }

/* ── Outlined WA button (Open link) ── */
.eta-btn-wa-outline {
  background:  transparent;
  color:       #1DA851;
  border:      1.5px solid #25D366;
  font-weight: 500;
  text-decoration: none;
  display:     inline-flex;
  align-items: center;
  gap:         6px;
}
.eta-btn-wa-outline:hover {
  background: rgba(37, 211, 102, .08);
  color:      #15803D;
}

/* ── Country code + phone input row ── */
.eta-wa-phone-row {
  display:    flex;
  gap:        var(--eta-s2);
  align-items:stretch;
}
.eta-wa-country-sel {
  flex-shrink: 0;
  width:       110px;
  padding:     10px 8px;
  font-size:   14px;
}

/* ── Result action row (Open + QR) ── */
.eta-wa-result-actions {
  display:     flex;
  gap:         var(--eta-s2);
  margin-top:  var(--eta-s3);
  flex-wrap:   wrap;
}

/* ── Normalised number preview inside result ── */
.eta-wa-number-preview {
  display:      flex;
  align-items:  center;
  gap:          8px;
  padding:      8px 0 var(--eta-s3);
  border-bottom:1px solid var(--eta-border);
  margin-bottom:var(--eta-s3);
}
.eta-wa-num-label {
  font-size:  12px;
  color:      var(--eta-text-3);
  flex-shrink:0;
}
.eta-wa-num-value {
  font-family: var(--eta-mono);
  font-size:   15px;
  font-weight: 600;
  color:       #1DA851;
  letter-spacing: .02em;
}

/* ── QR inline panel ── */
.eta-wa-qr-panel {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--eta-s4);
  padding:        var(--eta-s5) 0 var(--eta-s3);
  border-top:     1px solid var(--eta-border);
  margin-top:     var(--eta-s4);
}
.eta-wa-qr-canvas {
  border-radius: var(--eta-r-sm);
  overflow:      hidden;
  line-height:   0; /* collapse inline image gap */
  box-shadow:    var(--eta-shadow-sm);
}
.eta-wa-qr-canvas img,
.eta-wa-qr-canvas canvas { display: block; }

/* Active state for QR toggle button */
.eta-btn.is-active {
  background:   var(--eta-blue-light);
  color:        var(--eta-blue);
  border-color: var(--eta-blue);
}

/* ── Optional label badge ── */
.eta-label-opt {
  font-size:   11px;
  font-weight: 400;
  color:       var(--eta-text-3);
  margin-left: 4px;
}

/* ==========================================================================
   GLOBAL TOKEN FIX — --eta-text-muted alias (was undefined)
   ========================================================================== */

:root {
  --eta-text-muted: var(--eta-text-3);
  --eta-radius-sm:  var(--eta-r-sm);   /* legacy alias used in some templates */
  --eta-accent2:    var(--eta-accent-dark); /* used in tool-desi result */
}

/* ==========================================================================
   MARKETPLACE TOOLS — shared result card styles (v2)
   Used by: tool-trendyol, tool-amazon, tool-hepsiburada,
            tool-ciceksepeti, tool-n11
   ========================================================================== */

/* ── Input grid: price + KDV side by side on wider screens ── */
.eta-mk-input-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

@media (max-width: 480px) {
  .eta-mk-input-grid { grid-template-columns: 1fr; gap: 0; }
}

/* ── Kargo row: amount input + "satıcı öder" checkbox inline ── */
.eta-mk-kargo-row {
  display:     flex;
  gap:         12px;
  align-items: center;
}

.eta-mk-kargo-row .eta-input { flex: 1; min-width: 0; }

.eta-mk-kargo-check {
  display:     flex;
  align-items: center;
  gap:         6px;
  font-size:   13px;
  color:       var(--eta-text-2);
  cursor:      pointer;
  white-space: nowrap;
  user-select: none;
}

.eta-mk-kargo-check input[type="checkbox"] {
  width:        16px;
  height:       16px;
  accent-color: var(--eta-blue);
  cursor:       pointer;
  flex-shrink:  0;
}

/* ── Result card: section groupings ── */
.eta-mk-section {
  padding: 10px 0 2px;
}

.eta-mk-section:first-child { padding-top: 0; }

.eta-mk-section-label {
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--eta-text-3);
  margin-bottom:  6px;
}

.eta-mk-divider {
  height:     1px;
  background: var(--eta-border);
  margin:     6px 0;
}

/* ── Row variants ── */

/* Total row — bold label + slightly larger value */
.eta-result-row.eta-result-row--total {
  border-top:  1px solid var(--eta-border);
  margin-top:  4px;
  padding-top: 8px;
}

.eta-result-row.eta-result-row--total .label {
  font-weight: 600;
  color:       var(--eta-text);
}

.eta-result-row.eta-result-row--total .value {
  font-size:   15px;
  font-weight: 700;
}

/* Highlight row — used for Net Kazanç, Net Kâr, Başa Baş */
.eta-result-row.eta-result-row--highlight .label {
  font-weight: 600;
  color:       var(--eta-text);
}

.eta-result-row.eta-result-row--highlight .value {
  font-size:   17px;
  font-weight: 700;
}

/* ── Value colour modifiers ── */
.eta-result-row .value.is-negative { color: var(--eta-red);   }
.eta-result-row .value.is-positive { color: var(--eta-green); }
.eta-result-row .value.is-accent   { color: var(--eta-blue);  }

/* ── Disclaimer footnote ── */
.eta-mk-note {
  font-size:   11px;
  color:       var(--eta-text-muted);
  margin-top:  10px;
  line-height: 1.5;
}

.eta-mk-note a {
  color: var(--eta-blue);
  text-decoration: none;
}

.eta-mk-note a:hover { text-decoration: underline; }

/* ==========================================================================
   ETSY TOOL — tool-specific styles
   ========================================================================== */

/* ── Price input with currency symbol prefix ── */
.eta-etsy-price-wrap {
  position: relative;
  display:  flex;
  align-items: center;
}

.eta-etsy-sym {
  position:       absolute;
  left:           12px;
  font-size:      13px;
  font-weight:    500;
  color:          var(--eta-text-2);
  pointer-events: none;
  z-index:        1;
  min-width:      20px;
  text-align:     right;
}

/* Widen the left padding to clear the symbol (JS sets symbol text,
   so we use a generous left padding that works for all symbols) */
.eta-input--sym { padding-left: 36px; }

/* ── Fee settings header ── */
.eta-etsy-fees-header {
  display:         flex;
  align-items:     baseline;
  gap:             8px;
  margin:          20px 0 4px;
  padding-bottom:  8px;
  border-bottom:   1px solid var(--eta-border);
}

.eta-etsy-fees-header > span:first-child {
  font-size:   13px;
  font-weight: 600;
  color:       var(--eta-text);
}

.eta-etsy-fees-hint {
  font-size:  11px;
  color:      var(--eta-text-3);
  font-style: italic;
}

/* ── Offsite Ads row: checkbox + rate select on one line ── */
.eta-etsy-ads-row {
  display:     flex;
  align-items: center;
  gap:         16px;
  flex-wrap:   wrap;
}

.eta-etsy-ads-rate {
  display:     flex;
  align-items: center;
  gap:         6px;
}

.eta-etsy-ads-rate-label {
  font-size: 12px;
  color:     var(--eta-text-2);
}

/* Narrow select for the ads rate (doesn't need full width) */
.eta-select--narrow {
  width:    auto;
  min-width: 140px;
}


/* ==========================================================================
   DESI CALCULATOR  v2
   ========================================================================== */

/* Preset bar ---------------------------------------------------------------- */
.eta-desi-presets {
  display:        flex;
  align-items:    center;
  gap:            var(--eta-s3);
  flex-wrap:      wrap;
  margin-bottom:  var(--eta-s5);
}

.eta-desi-presets-label {
  font-size:   12px;
  font-weight: 600;
  color:       var(--eta-text-2);
  white-space: nowrap;
}

/* 3-column dimension grid --------------------------------------------------- */
.eta-desi-dims {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--eta-s4);
  margin-bottom:         var(--eta-s5);
}

@media (max-width: 560px) {
  .eta-desi-dims { grid-template-columns: 1fr; }
}

/* Label unit suffix --------------------------------------------------------- */
.eta-label-unit {
  font-size:   11px;
  font-weight: 400;
  color:       var(--eta-text-3);
}

/* Result row winner highlight ----------------------------------------------- */
.eta-result-row.eta-desi-row--winner {
  background: rgba(37, 99, 235, 0.05);
  border-radius: var(--eta-radius-sm);
  margin-left:  -8px;
  padding-left:  8px;
  margin-right: -8px;
  padding-right: 8px;
}

/* Kazanan badge ------------------------------------------------------------- */
.eta-desi-kazanan {
  margin-top:  var(--eta-s3);
  padding:     10px 14px;
  border-radius: var(--eta-radius-sm);
  font-size:   13px;
  font-weight: 500;
  line-height: 1.4;
}

.eta-desi-kazanan--hacimsel {
  background: rgba(37, 99, 235, 0.08);
  color:      var(--eta-blue);
  border:     1px solid rgba(37, 99, 235, 0.18);
}

.eta-desi-kazanan--gercek {
  background: rgba(5, 150, 105, 0.08);
  color:      var(--eta-green);
  border:     1px solid rgba(5, 150, 105, 0.18);
}

/* Inline formula hint inside result label ----------------------------------- */
.eta-desi-formula-inline {
  display:     block;
  font-size:   10px;
  font-weight: 400;
  color:       var(--eta-text-3);
  margin-top:  2px;
  font-style:  italic;
}

/* Formula explanation panel ------------------------------------------------- */
.eta-desi-formula-panel {
  margin-top:    var(--eta-s5);
  padding:       16px 18px;
  background:    rgba(255, 255, 255, 0.03);
  border:        1px solid var(--eta-border);
  border-radius: var(--eta-radius-sm);
}

.eta-desi-formula-title {
  font-size:     12px;
  font-weight:   700;
  color:         var(--eta-text-2);
  margin-bottom: var(--eta-s3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.eta-desi-formula-eqs {
  display:        flex;
  flex-direction: column;
  gap:            var(--eta-s2);
  margin-bottom:  var(--eta-s3);
}

.eta-desi-formula-eq {
  display:       block;
  font-family:   var(--eta-font-mono, monospace);
  font-size:     12px;
  color:         var(--eta-text);
  background:    rgba(255, 255, 255, 0.05);
  border:        1px solid var(--eta-border);
  border-radius: 4px;
  padding:       6px 10px;
  line-height:   1.5;
}

.eta-desi-formula-note {
  font-size:   12px;
  color:       var(--eta-text-muted, var(--eta-text-3));
  margin:      0;
  line-height: 1.6;
}

/* ==========================================================================
   GÜMRÜK VERGİSİ HESAPLAMA  v2
   ========================================================================== */

/* Toggle-card grid ---------------------------------------------------------- */
.eta-gumruk-toggles {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--eta-s3);
  margin-bottom:         var(--eta-s5);
}

@media (max-width: 540px) {
  .eta-gumruk-toggles { grid-template-columns: 1fr; }
}

/* Individual toggle card ---------------------------------------------------- */
.eta-toggle-card {
  display:        flex;
  align-items:    center;
  justify-content:space-between;
  gap:            var(--eta-s3);
  padding:        12px 14px;
  background:     var(--eta-surface);
  border:         1.5px solid var(--eta-border);
  border-radius:  var(--eta-r-md, var(--eta-radius-sm));
  cursor:         pointer;
  transition:     border-color var(--eta-dur-fast) var(--eta-ease),
                  background   var(--eta-dur-fast) var(--eta-ease);
  user-select:    none;
}

.eta-toggle-card:hover {
  border-color: var(--eta-blue);
  background:   var(--eta-blue-light);
}

.eta-toggle-card:has(input:checked) {
  border-color: var(--eta-blue);
  background:   var(--eta-blue-light);
}

/* Hide native checkbox — we use the custom track */
.eta-toggle-card input[type="checkbox"] {
  position: absolute;
  opacity:  0;
  width:    0;
  height:   0;
}

.eta-toggle-card__body {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  flex:           1;
  min-width:      0;
}

.eta-toggle-card__icon {
  font-size:     18px;
  line-height:   1;
  margin-bottom: 4px;
}

.eta-toggle-card__label {
  font-size:   13px;
  font-weight: 600;
  color:       var(--eta-text);
  line-height: 1.3;
}

.eta-toggle-card__hint {
  font-size:   11px;
  color:       var(--eta-text-3);
  line-height: 1.3;
}

/* Toggle switch track + thumb ----------------------------------------------- */
.eta-toggle-switch {
  flex-shrink: 0;
}

.eta-toggle-switch__track {
  display:          block;
  width:            40px;
  height:           22px;
  border-radius:    11px;
  background:       var(--eta-border);
  position:         relative;
  transition:       background var(--eta-dur-fast) var(--eta-ease);
  pointer-events:   none;
}

.eta-toggle-switch__track::after {
  content:          '';
  position:         absolute;
  top:              3px;
  left:             3px;
  width:            16px;
  height:           16px;
  border-radius:    50%;
  background:       #fff;
  box-shadow:       0 1px 3px rgba(0,0,0,.25);
  transition:       transform var(--eta-dur-fast) var(--eta-ease);
}

.eta-toggle-card input:checked ~ .eta-toggle-switch .eta-toggle-switch__track,
.eta-toggle-card:has(input:checked) .eta-toggle-switch__track {
  background: var(--eta-blue);
}

.eta-toggle-card:has(input:checked) .eta-toggle-switch__track::after {
  transform: translateX(18px);
}

/* Kargo uyarı bandı --------------------------------------------------------- */
.eta-gumruk-kargo-uyari {
  display:       flex;
  align-items:   flex-start;
  gap:           8px;
  padding:       10px 14px;
  margin-bottom: var(--eta-s4);
  background:    rgba(217, 119, 6, 0.08);
  border:        1px solid rgba(217, 119, 6, 0.25);
  border-radius: var(--eta-radius-sm);
  font-size:     12px;
  color:         #92400E;
  line-height:   1.5;
}

/* Uygulanan kural badge ----------------------------------------------------- */
.eta-gumruk-kural {
  margin-top:    var(--eta-s3);
  padding:       9px 14px;
  border-radius: var(--eta-radius-sm);
  font-size:     12px;
  font-weight:   500;
  color:         var(--eta-text-2);
  background:    rgba(255,255,255,0.03);
  border:        1px solid var(--eta-border);
  line-height:   1.4;
}

.eta-gumruk-kural--muaf {
  background: rgba(5, 150, 105, 0.08);
  color:      var(--eta-green);
  border:     1px solid rgba(5, 150, 105, 0.2);
}

/* Disclaimer panel ---------------------------------------------------------- */
.eta-gumruk-disclaimer {
  display:       flex;
  align-items:   flex-start;
  gap:           10px;
  margin-top:    var(--eta-s5);
  padding:       14px 16px;
  background:    rgba(255, 255, 255, 0.025);
  border:        1px solid var(--eta-border);
  border-radius: var(--eta-radius-sm);
}

.eta-gumruk-disclaimer__icon {
  font-size:   18px;
  flex-shrink: 0;
  margin-top:  1px;
}

.eta-gumruk-disclaimer__text {
  font-size:   12px;
  color:       var(--eta-text-muted, var(--eta-text-3));
  line-height: 1.65;
  margin:      0;
}

.eta-gumruk-disclaimer__text a {
  color:           var(--eta-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.eta-gumruk-disclaimer__text strong {
  color: var(--eta-text-2);
}

/* ==========================================================================
   KOMISYON ENGINE — Manuel oran override
   ========================================================================== */

/* Kategori select: manuel oran aktifken görsel olarak pasifleşir ----------- */
.eta-field.eta-mk-kategori--override .eta-select {
  opacity:        0.4;
  pointer-events: none;
}

.eta-field.eta-mk-kategori--override > label::after {
  content:      ' · manuel oran aktif';
  font-size:    11px;
  font-weight:  400;
  color:        var(--eta-blue);
  margin-left:  4px;
}

/* Kullanılan oran kaynağı: sonuç kartında küçük hint satırı --------------- */
.eta-mk-oran-kaynak-row {
  padding-bottom: 6px;
  margin-top:    -2px;
}

.eta-mk-oran-kaynak {
  font-size:   11px;
  font-weight: 500;
  color:       var(--eta-blue);
  font-style:  italic;
}

/* Manuel hint — aktif override mesajı ------------------------------------ */
.eta-mk-manuel-hint--active {
  color:       var(--eta-blue);
  font-weight: 600;
  font-style:  italic;
}

/* Preset oran uyarısı — kategori select altında gösterilir --------------- */
.eta-komisyon-preset-uyari {
  color:       #92400e;          /* amber-800 */
  font-style:  normal;
  font-size:   11px;
  font-weight: 500;
  margin-top:  2px;
  display:     block;
}

/* Komisyon tabanı etiketi (net/brüt) — satır içi küçük badge ─────────── */
.eta-mk-tabani-etiket {
  display:       inline-block;
  font-size:     10px;
  font-weight:   600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color:         var(--eta-blue);
  opacity:       0.8;
  margin-left:   3px;
  vertical-align: middle;
}

/* Formül notu — komisyon hesap yöntemi kısa özeti ────────────────────── */
.eta-mk-formul-notu {
  font-size:    11px;
  color:        var(--eta-text-muted, #6b7280);
  font-style:   italic;
  padding:      4px 0 6px 0;
  border-bottom: 1px dashed var(--eta-border, #e5e7eb);
  margin-bottom: 4px;
  line-height:  1.5;
}
.eta-mk-formul-notu:empty {
  display: none;
}

/* Sonuç kartı kaynak notu — tüm pazaryeri araçlarında standart ─────────── */
.eta-result-preset-notu {
  margin:       12px 0 0 0;
  padding:      8px 10px;
  border-top:   1px solid var(--eta-border, #e5e7eb);
  font-size:    11px;
  color:        var(--eta-text-muted, #6b7280);
  line-height:  1.5;
}