/* ════════════════════════════════════════════════════════════════
   CompoundPro - Calculator Styles (Beyaz/Açık ton, Ayna Cam)
   Hesap makinesi sayfaları, slider, form, results, compare, ads
   ════════════════════════════════════════════════════════════════ */

/* ═══ CALCULATOR LAYOUT ═══ */
/* Flexbox fallback for browsers without CSS Grid support */
.calc-layout {
  display: flex;
  gap: 40px;
  align-items: start;
}

.calc-layout > .calc-inputs {
  flex: 0 0 380px;
  max-width: 380px;
}

.calc-layout > .calc-results {
  flex: 1 1 auto;
  min-width: 0;
}

/* CSS Grid for modern browsers */
@supports (display: grid) {
  .calc-layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 40px;
    align-items: start;
  }

  .calc-layout > .calc-inputs {
    flex: none;
    max-width: none;
  }

  .calc-layout > .calc-results {
    flex: none;
    min-width: 0;
  }
}

.calc-inputs {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.calc-panel {
  background: var(--mirror-glass-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid rgba(15, 23, 42, 0.07);
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
  border-left: 4px solid rgba(234, 88, 12, 0.35) !important;
  border-right: 4px solid rgba(234, 88, 12, 0.35) !important;
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: var(--mirror-glass-shadow);
  position: relative;
  overflow: hidden;
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease !important;
}

.calc-panel:hover {
  border-left-color: rgba(234, 88, 12, 0.85) !important;
  border-right-color: rgba(234, 88, 12, 0.85) !important;
  transform: translateY(-2px);
  box-shadow:
    0 1px 2px rgba(15,23,42,0.04),
    0 14px 32px -8px rgba(15,23,42,0.12),
    0 28px 56px -18px rgba(249,115,22,0.14) !important;
}

.calc-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mirror-glass-shine);
  pointer-events: none;
  opacity: 0.4;
  z-index: 0;
}

.calc-panel > * {
  position: relative;
  z-index: 2;
}

.calc-section-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: 16px;
  display: block;
}

@media (max-width: 1024px) {
  .calc-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .calc-inputs {
    position: static;
  }
}


/* ═══ FORM FIELDS & INPUTS ═══ */
.calc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}

/* Standalone inputs without wrapper */
.calc-field > input[type="number"]:not([class]) {
  width: 100%;
  padding: 11px 16px;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1rem;
  color: var(--color-text-primary);
  background-color: var(--color-bg-surface);
  transition: border-color var(--ease-base), box-shadow var(--ease-base), background-color var(--ease-base);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.calc-field > input[type="number"]:not([class]):hover {
  border-color: var(--color-orange);
}

.calc-field > input[type="number"]:not([class]):focus {
  border-color: var(--color-orange-2);
  box-shadow: 0 0 0 3px var(--color-orange-10);
  outline: none;
}

.calc-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--color-text-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.calc-label-hint {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.calc-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.calc-input,
.calc-input-wrapper input[type="number"],
input[type="number"].calc-input {
  width: 100%;
  padding: 11px 16px;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1rem;
  color: var(--color-text-primary);
  background-color: var(--color-bg-surface);
  transition: border-color var(--ease-base), box-shadow var(--ease-base), background-color var(--ease-base);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.calc-input:hover,
.calc-input-wrapper input[type="number"]:hover {
  border-color: var(--color-orange);
  background-color: var(--color-bg-surface);
}

.calc-input:focus,
.calc-input-wrapper input[type="number"]:focus {
  border-color: var(--color-orange-2);
  box-shadow: 0 0 0 3px var(--color-orange-10);
  background-color: var(--color-bg-surface);
  outline: none; /* Remove default outline, use custom box-shadow instead */
}

.calc-input:focus-visible,
.calc-input-wrapper input[type="number"]:focus-visible {
  outline: 3px solid var(--color-orange-2);
  outline-offset: 2px;
  border-color: var(--color-orange-2);
  box-shadow: 0 0 0 3px var(--color-orange-10);
  background-color: var(--color-bg-surface);
}

/* Remove outline for mouse users in browsers that support :focus-visible */
.calc-input:focus:not(:focus-visible),
.calc-input-wrapper input[type="number"]:focus:not(:focus-visible) {
  outline: none;
}

/* Prefix & Suffix Handling */
.calc-input-wrapper.calc-input-prefix .calc-input {
  padding-left: 32px;
}

.calc-input-wrapper.calc-input-suffix .calc-input {
  padding-right: 38px;
}

.calc-input-wrapper::before,
.calc-input-wrapper::after {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  color: var(--color-text-primary);
  pointer-events: none;
  font-weight: 600;
  z-index: 10;
}

.calc-input-wrapper.calc-input-prefix::before {
  content: attr(data-prefix);
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.calc-input-wrapper.calc-input-suffix::after {
  content: attr(data-suffix);
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}
  content: attr(data-suffix) !important;
  right: 14px;
}


/* ═══ CUSTOM RANGE SLIDER (koyu temaya uygun, tooltip destekli) ═══ */
.slider-wrapper {
  position: relative;
  margin-top: 16px;
  margin-bottom: 8px;
  padding: 0 4px;
}

.calc-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  border-radius: var(--radius-full);
  background: linear-gradient(
    to right,
    var(--color-orange) 0%,
    var(--color-orange) var(--slider-fill, 50%),
    #E2E8F0 var(--slider-fill, 50%),
    #E2E8F0 100%
  );
  outline: none;
  cursor: pointer;
  transition: background 80ms linear;
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05);
}

.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-orange) 0%, #EA580C 100%);
  border: 3px solid var(--color-white);
  cursor: grab;
  box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: transform var(--ease-fast), box-shadow var(--ease-fast);
}

.calc-slider::-webkit-slider-thumb:hover,
.calc-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.15);
  box-shadow: 0 0 20px rgba(249, 115, 22, 0.7), 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Strong focus indicators for keyboard navigation */
.calc-slider:focus-visible {
  outline: 3px solid var(--color-orange-2);
  outline-offset: 4px;
  border-radius: var(--radius-full);
}

.calc-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--color-orange-10), 0 0 20px rgba(249, 115, 22, 0.7), 0 2px 4px rgba(0, 0, 0, 0.4);
  transform: scale(1.15);
}

.calc-slider:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--color-orange-10), 0 0 20px rgba(249, 115, 22, 0.7), 0 2px 4px rgba(0, 0, 0, 0.4);
  transform: scale(1.15);
}

.calc-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-bg-base);
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-orange) 0%, #EA580C 100%);
  cursor: grab;
  box-shadow: 0 0 12px rgba(249, 115, 22, 0.5), 0 2px 4px rgba(0, 0, 0, 0.4);
  transition: transform var(--ease-fast);
}

.calc-slider::-moz-range-thumb:hover,
.calc-slider::-moz-range-thumb:active {
  cursor: grabbing;
  transform: scale(1.15);
}

/* Slider value tooltip (kayan baloncuk) */
.slider-tooltip {
  position: absolute;
  top: -38px;
  left: 0;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--color-orange) 0%, #EA580C 100%);
  color: var(--color-white);
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.8125rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--ease-fast);
  z-index: 5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 12px rgba(249, 115, 22, 0.4);
}

.slider-tooltip::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: var(--color-orange);
}

.slider-wrapper:hover .slider-tooltip,
.slider-wrapper.dragging .slider-tooltip {
  opacity: 1;
}

.slider-track-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-text-dim);
}


/* ═══ SEGMENTED CONTROLS ═══ */
.calc-segment {
  display: flex;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-bg-surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.calc-segment-btn {
  flex: 1;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  background-color: transparent;
  border: none;
  transition: all var(--ease-base);
  letter-spacing: 0.02em;
}

.calc-segment-btn:not(:last-child) {
  border-right: 2px solid var(--color-border-strong);
}

.calc-segment-btn:hover {
  background-color: var(--color-glass-strong);
  color: var(--color-text-primary);
}

.calc-segment-btn:focus-visible {
  outline: 3px solid var(--color-orange-2);
  outline-offset: -2px;
  z-index: 1;
  position: relative;
}

.calc-segment-btn.active {
  background: linear-gradient(135deg, var(--color-orange) 0%, #EA580C 100%);
  color: var(--color-white);
  box-shadow: 0 0 12px rgba(249, 115, 22, 0.3);
}


/* ═══ COLLAPSIBLE ACCORDION FOR ADVANCED INPUTS ═══ */
.calc-collapsible-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 14px 0;
  border: none;
  background: transparent;
  border-top: 2px solid var(--color-border);
  border-bottom: 2px solid var(--color-border);
  cursor: pointer;
  color: var(--color-text-primary);
  transition: color var(--ease-base);
  margin: 16px 0;
}

.calc-collapsible-trigger:hover {
  color: var(--color-orange-2);
}

.calc-collapsible-trigger:focus-visible {
  outline: 3px solid var(--color-orange-2);
  outline-offset: 2px;
  color: var(--color-orange-2);
}

.calc-collapsible-trigger .chevron-icon {
  transition: transform var(--ease-base);
}

.calc-collapsible-trigger.open .chevron-icon {
  transform: rotate(180deg);
}

.calc-collapsible-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--ease-slow) ease-in-out;
}

.calc-collapsible-content.open {
  max-height: 1200px;
}


/* ═══ ACTIONS ═══ */
.calc-btn-calculate {
  width: 100%;
  justify-content: center;
  font-size: 1rem;
  padding: 14px;
  margin-top: 24px;
}

.calc-btn-reset {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
}


/* ═══ RESULTS PANEL ═══ */
.calc-results {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Flexbox fallback for calc-result-cards */
.calc-result-cards {
  display: flex;
  flex-wrap: wrap;
  margin: -8px;
}

.calc-result-cards > * {
  flex: 0 0 calc(33.333% - 16px);
  max-width: calc(33.333% - 16px);
  margin: 8px;
  box-sizing: border-box;
}

/* CSS Grid for modern browsers */
@supports (display: grid) {
  .calc-result-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 0;
  }

  .calc-result-cards > * {
    flex: none;
    max-width: none;
    margin: 0;
  }
}

@media (max-width: 768px) {
  .calc-result-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .calc-result-cards {
    grid-template-columns: 1fr;
  }
}

.calc-result-card {
  text-align: center;
  padding: 20px 16px;
  background: var(--color-bg-surface);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06);
  transition: all var(--ease-base);
}

.calc-result-card:hover {
  border-color: var(--color-orange);
  box-shadow: 0 4px 8px rgba(249, 115, 22, 0.12);
  transform: translateY(-2px);
}

.calc-result-value {
  color: var(--color-text-primary);
}

.calc-result-card[data-variant="orange"] .calc-result-value {
  color: var(--color-orange-2);
}

.calc-result-card[data-variant="emerald"] .calc-result-value {
  color: var(--color-emerald-2);
}

.calc-result-card[data-variant="sea"] .calc-result-value {
  color: var(--color-sea-2);
}

.calc-result-card[data-variant="violet"] .calc-result-value {
  color: #C4B5FD;
}

.calc-result-card[data-variant="primary"] {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.08) 0%, var(--color-bg-surface) 100%);
  border-color: rgba(249, 115, 22, 0.4);
  border-width: 2px;
  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.15);
}

.calc-result-card[data-variant="primary"]:hover {
  border-color: var(--color-orange);
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.25);
}

.calc-result-card[data-variant="primary"] .calc-result-value {
  background: linear-gradient(135deg, var(--color-orange-2), var(--color-amber));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.calc-result-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.calc-result-subvalue {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--color-emerald-2);
  margin-top: 4px;
  font-weight: 600;
}


/* ═══ RESULT VIEW TABS ═══ */
.calc-tabs {
  display: flex;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: 24px;
  gap: 0;
  flex-wrap: wrap;
}

.calc-tab {
  padding: 12px 20px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all var(--ease-base);
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}

.calc-tab:hover {
  color: var(--color-text-primary);
}

.calc-tab:focus-visible {
  outline: 3px solid var(--color-orange-2);
  outline-offset: 2px;
  color: var(--color-text-primary);
}

.calc-tab.active {
  color: var(--color-orange-2);
  border-bottom-color: var(--color-orange-2);
}

.calc-tab-content {
  display: none;
}

.calc-tab-content.active {
  display: block;
  animation: fadeIn 250ms ease;
}


/* ═══ BREAKDOWN TABLE ═══ */
.calc-table-wrapper {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-border-strong);
  background-color: var(--color-bg-surface);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05);
}

.calc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  text-align: left;
}

.calc-table th {
  background-color: var(--color-bg-elevated-2);
  padding: 12px 16px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 3px solid var(--color-border-strong);
  white-space: nowrap;
}

.calc-table td {
  padding: 12px 16px;
  border-bottom: 2px solid var(--color-border);
  font-family: var(--font-mono);
  color: var(--color-text-primary);
  white-space: nowrap;
}

.calc-table tr:last-child td {
  background-color: var(--color-bg-elevated-2);
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-text-primary);
}

.calc-table tr:hover td:not(:only-child) {
  background-color: var(--color-orange-10);
}

.calc-table tr:last-child:hover td {
  background-color: var(--color-bg-elevated-2);
}

.calc-table .growth-positive {
  color: var(--color-emerald-2);
  font-weight: 600;
}


/* ═══ ACTIONS & INSIGHTS ═══ */
.calc-insight-box {
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  background: linear-gradient(135deg, var(--color-emerald-10) 0%, var(--color-bg-surface) 100%);
  border: 2px solid rgba(16, 185, 129, 0.3);
  border-left: 4px solid var(--color-emerald);
  display: flex;
  gap: 16px;
  align-items: flex-start;
  color: var(--color-text-primary);
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.08);
}

.calc-insight-box ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
}

.calc-insight-box li {
  padding-left: 16px;
  position: relative;
}

.calc-insight-box li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--color-emerald-2);
  font-weight: 700;
}

.calc-insight-box strong {
  color: var(--color-emerald-2);
}

.calc-share-row {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  margin-top: 16px;
  width: 100%;
}

.calc-share-row .btn {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  justify-content: center;
  font-size: 0.8125rem;
  padding: 8px 4px;
}

.calc-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}


/* ═══ MATH FORMULA BOX ═══ */
.formula-display {
  background: linear-gradient(135deg, var(--color-bg-dark) 0%, #050810 100%);
  color: var(--color-white);
  padding: 24px;
  border-radius: var(--radius-lg);
  font-family: var(--font-mono);
  font-size: 1.125rem;
  text-align: center;
  overflow-x: auto;
  margin: 20px 0;
  white-space: nowrap;
  border: 2px solid rgba(15, 23, 42, 0.3);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.1);
}

.formula-display .var-p { color: var(--color-orange-2); font-weight: 600; }
.formula-display .var-r { color: var(--color-sea-2); font-weight: 600; }
.formula-display .var-n { color: var(--color-emerald-2); font-weight: 600; }
.formula-display .var-t { color: var(--color-text-muted); font-weight: 600; }
.formula-display .var-a { color: var(--color-text-primary); font-weight: 600; }


/* ═══ COMPARE MODE (Scenario A vs B) ═══ */
.compare-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-top: 2px solid var(--color-border);
  border-bottom: 2px solid var(--color-border);
  margin: 16px 0;
}

.compare-toggle-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.compare-toggle-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.compare-toggle-desc {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* iOS-style toggle */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background-color: var(--color-bg-elevated-2);
  border: 2px solid var(--color-border-strong);
  border-radius: 13px;
  transition: background-color var(--ease-base);
  cursor: pointer;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.1);
}

.toggle-slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  top: 3px;
  background-color: var(--color-text-muted);
  border-radius: 50%;
  transition: transform var(--ease-base), background-color var(--ease-base);
}

.toggle-switch input:checked + .toggle-slider {
  background: linear-gradient(135deg, var(--color-orange) 0%, #EA580C 100%);
  border-color: var(--color-orange-2);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(22px);
  background-color: var(--color-white);
}

/* Strong focus indicators for keyboard navigation */
.toggle-switch input:focus-visible + .toggle-slider {
  outline: 3px solid var(--color-orange-2);
  outline-offset: 2px;
}

.compare-scenario-b {
  border-top: 2px dashed var(--color-border-strong);
  padding-top: 20px;
  margin-top: 8px;
  position: relative;
}

.compare-scenario-b::before {
  content: "Scenario B";
  position: absolute;
  top: -10px;
  left: 0;
  background: var(--color-bg-elevated);
  padding: 0 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.7rem;
  color: var(--color-orange-2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Flexbox fallback for compare-results-grid */
.compare-results-grid {
  display: flex;
  flex-wrap: wrap;
  margin-top: 16px;
  margin-left: -8px;
  margin-right: -8px;
}

.compare-results-grid > * {
  flex: 0 0 calc(50% - 16px);
  max-width: calc(50% - 16px);
  margin: 8px;
  box-sizing: border-box;
}

/* CSS Grid for modern browsers */
@supports (display: grid) {
  .compare-results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
    margin-left: 0;
    margin-right: 0;
  }

  .compare-results-grid > * {
    flex: none;
    max-width: none;
    margin: 0;
  }
}

@media (max-width: 640px) {
  .compare-results-grid {
    grid-template-columns: 1fr;
  }
}

.compare-card {
  background: var(--color-bg-surface);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: 20px;
  position: relative;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05);
}

.compare-card[data-scenario="a"]::before {
  content: "A";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-orange-10);
  color: var(--color-orange-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  border: 1px solid rgba(249, 115, 22, 0.3);
}

.compare-card[data-scenario="b"]::before {
  content: "B";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-violet-10);
  color: #C4B5FD;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  border: 1px solid rgba(139, 92, 246, 0.3);
}

.compare-delta {
  margin-top: 12px;
  padding: 12px 16px;
  background: var(--color-bg-surface);
  border-radius: var(--radius-md);
  border: 2px solid var(--color-border-strong);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.compare-delta-label {
  color: var(--color-text-muted);
}

.compare-delta-value {
  font-family: var(--font-mono);
  font-weight: 700;
}

.compare-delta-value.positive { color: var(--color-emerald-2); }
.compare-delta-value.negative { color: var(--color-rose); }


/* ═══ PREMIUM LOCK (kilitleme hissi) ═══ */
.premium-lock {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 24px;
  background: linear-gradient(135deg, var(--color-violet-10) 0%, var(--color-bg-surface) 100%);
  border: 2px dashed rgba(139, 92, 246, 0.4);
  text-align: center;
  margin-top: 16px;
  box-shadow: 0 2px 4px rgba(139, 92, 246, 0.08);
}

.premium-lock-icon {
  font-size: 2rem;
  margin-bottom: 8px;
  display: block;
  filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.5));
}

.premium-lock-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}

.premium-lock-desc {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-bottom: 16px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}


/* ═══ AD SLOT (CLS korumalı) ═══ */
.ad-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-surface);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text-dim);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: 90px;
  content-visibility: auto;
  contain-intrinsic-size: 90px;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(15, 23, 42, 0.02) 10px,
    rgba(15, 23, 42, 0.02) 20px
  );
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.ad-slot[data-ad-size="300x250"] {
  min-height: 250px;
  contain-intrinsic-size: 250px;
}

.ad-slot[data-ad-size="728x90"] {
  min-height: 90px;
  contain-intrinsic-size: 90px;
}

.ad-slot[data-ad-size="160x600"] {
  min-height: 600px;
  contain-intrinsic-size: 600px;
}

.ad-slot-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
}

.ad-slot::before {
  content: "Ad";
  position: absolute;
  top: 6px;
  left: 8px;
  font-size: 0.625rem;
  color: var(--color-text-dim);
  font-weight: 700;
}

/* Premium kullanıcı için ad slot'lar gizlenir */
body.tier-premium .ad-slot {
  display: none;
}

/* Mobile'da 728x90 leaderboard gizle */
@media (max-width: 768px) {
  .ad-slot[data-ad-size="728x90"] {
    display: none;
  }
}


/* ═══ RATE PRESET EXPLAINER ═══ */
.rate-preset-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  border: 2px solid var(--color-border-strong);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all var(--ease-base);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.rate-preset-btn:hover {
  background: var(--color-orange-10);
  color: var(--color-orange-2);
  border-color: var(--color-orange);
  transform: none;
  box-shadow: 0 2px 4px rgba(249, 115, 22, 0.15);
}

.rate-preset-btn:focus-visible {
  outline: 3px solid var(--color-orange-2);
  outline-offset: 2px;
}

.rate-preset-explainer {
  display: none;
  margin-top: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--color-amber-10) 0%, var(--color-bg-surface) 100%);
  border: 2px solid rgba(245, 158, 11, 0.3);
  border-left: 4px solid var(--color-amber);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
  animation: slideDown 200ms ease;
  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.08);
}

.rate-preset-explainer.show {
  display: block;
}

.rate-preset-explainer strong {
  color: var(--color-amber);
}


/* ═══ CONTRIBUTION ESCALATOR ═══ */
.escalator-info {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 4px;
  line-height: 1.4;
}


/* ═══ TAX ACCOUNT TYPE TOGGLE ═══ */
/* Flexbox fallback for account-type-toggle */
.account-type-toggle {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.account-type-toggle > * {
  flex: 1 1 50%;
  min-width: 0;
}

/* CSS Grid for modern browsers */
@supports (display: grid) {
  .account-type-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 4px;
  }

  .account-type-toggle > * {
    flex: none;
    min-width: 0;
  }
}

.account-type-option {
  padding: 12px 14px;
  background: var(--color-bg-surface);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--ease-base);
  text-align: center;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.account-type-option:hover {
  border-color: var(--color-orange);
  background: var(--color-bg-surface);
  box-shadow: 0 2px 4px rgba(249, 115, 22, 0.1);
}

.account-type-option:focus-visible {
  outline: 3px solid var(--color-orange-2);
  outline-offset: 2px;
}

.account-type-option.active {
  border-color: var(--color-orange-2);
  background: var(--color-orange-10);
  box-shadow: 0 0 16px rgba(249, 115, 22, 0.2);
}

.account-type-option-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.account-type-option-desc {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  line-height: 1.3;
}

.account-type-option.active .account-type-option-title {
  color: var(--color-orange-2);
}


/* ═══ STICKY SIDEBAR ═══ */
.calc-sidebar {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}


/* ═══ CTA BANNER (calculator altı) ═══ */
.cta-banner {
  background:
    linear-gradient(135deg, rgba(249, 115, 22, 0.15) 0%, rgba(139, 92, 246, 0.10) 100%),
    linear-gradient(var(--color-bg-surface), var(--color-bg-surface)) padding-box;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-xl);
  padding: 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05);
}

.cta-banner::before {
  content: "";
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--color-orange) 0%, transparent 60%);
  opacity: 0.15;
  filter: blur(60px);
  pointer-events: none;
}

.cta-banner h3 {
  position: relative;
  z-index: 1;
  margin-bottom: 12px;
  color: var(--color-text-primary);
}

.cta-banner p {
  position: relative;
  z-index: 1;
  color: var(--color-text-secondary);
  margin-bottom: 20px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}


/* ═══ INLINE TUTORIAL CALLOUT ═══ */
.tutorial-callout {
  background: linear-gradient(135deg, var(--color-sea-10) 0%, var(--color-bg-surface) 100%);
  border: 2px solid rgba(56, 189, 248, 0.3);
  border-left: 4px solid var(--color-sea);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin: 16px 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  box-shadow: 0 2px 4px rgba(56, 189, 248, 0.08);
}

.tutorial-callout-icon {
  color: var(--color-sea-2);
  font-size: 1.25rem;
  flex-shrink: 0;
}

.tutorial-callout-content {
  flex: 1;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
}

.tutorial-callout-title {
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}


/* ═══ CHART CONTAINER ═══ */
.calc-chart-container {
  position: relative;
  width: 100%;
  height: 380px;
  padding: 20px;
  background: var(--color-bg-surface);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05);
}

@media (max-width: 640px) {
  .calc-chart-container {
    height: 300px;
    padding: 12px;
  }
}

.calc-chart-container canvas {
  max-width: 100%;
}


/* ═══ RESULTS PLACEHOLDER ═══ */
.calc-results-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
  background: var(--color-bg-surface);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-xl);
  color: var(--color-text-muted);
}

.calc-results-placeholder-icon {
  font-size: 3rem;
  margin-bottom: 16px;
  opacity: 0.5;
}

.calc-results-placeholder-text {
  font-size: 0.9375rem;
  max-width: 360px;
  line-height: 1.5;
}

/* Calculator refresh layer: home-aligned cards, panels, and controls. */
.calc-layout {
  gap: 32px !important;
  align-items: start;
}

.calc-panel,
.calc-results .card,
.calc-result-card,
.calc-chart-container,
.calc-results-placeholder,
#resultsPlaceholder {
  border-radius: var(--radius-xl) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(236, 253, 245, 0.72) 36%, rgba(254, 243, 199, 0.34) 72%, rgba(255, 255, 255, 0.92) 100%) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.32) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 12px 34px rgba(16, 185, 129, 0.09),
    0 0 0 1px rgba(15, 23, 42, 0.035) !important;
}

.calc-panel:hover,
.calc-results .card:hover,
.calc-result-card:hover {
  border-color: rgba(249, 115, 22, 0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 16px 42px rgba(16, 185, 129, 0.13),
    0 0 24px rgba(249, 115, 22, 0.08) !important;
}

/* Ensure .calc-panel has enlivened left/right orange borders and doesn't get fully overridden by grid card resets */
.calc-panel {
  border-left: 4px solid rgba(234, 88, 12, 0.35) !important;
  border-right: 4px solid rgba(234, 88, 12, 0.35) !important;
}

.calc-panel:hover {
  border-left-color: rgba(234, 88, 12, 0.85) !important;
  border-right-color: rgba(234, 88, 12, 0.85) !important;
  border-top-color: rgba(16, 185, 129, 0.32) !important;
  border-bottom-color: rgba(16, 185, 129, 0.32) !important;
}

.calc-section-title,
.calc-panel h2,
.calc-results h2,
.calc-results h3 {
  color: var(--color-text-primary) !important;
  letter-spacing: 0 !important;
}

.calc-segment,
.account-type-toggle,
.rate-preset-grid {
  gap: 8px !important;
}

.calc-segment {
  padding: 4px;
  border-radius: var(--radius-lg) !important;
  border: 1.5px solid var(--color-border-strong) !important;
  background: rgba(255, 255, 255, 0.76) !important;
}

.calc-segment-btn,
.rate-preset-btn,
.account-type-option {
  border-radius: var(--radius-md) !important;
  border: 1px solid transparent !important;
  background: rgba(255, 255, 255, 0.68) !important;
  color: var(--color-text-secondary) !important;
  transition: background-color var(--ease-base), border-color var(--ease-base), color var(--ease-base), box-shadow var(--ease-base) !important;
}

.calc-segment-btn:not(:last-child) {
  border-right: 1px solid transparent !important;
}

.calc-segment-btn:hover,
.rate-preset-btn:hover,
.account-type-option:hover {
  color: var(--color-text-primary) !important;
  border-color: rgba(249, 115, 22, 0.36) !important;
  background: var(--color-orange-10) !important;
}

.calc-segment-btn.active,
.account-type-option.active {
  color: var(--color-orange-2) !important;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.16), rgba(16, 185, 129, 0.10)) !important;
  border-color: rgba(249, 115, 22, 0.5) !important;
  box-shadow: 0 0 16px rgba(249, 115, 22, 0.16) !important;
}

.calc-btn-calculate,
.calc-btn-reset,
.calc-share-row .btn {
  min-height: 42px;
}

.calc-result-card[data-variant="primary"] {
  background:
    linear-gradient(135deg, rgba(249, 115, 22, 0.16) 0%, rgba(255, 255, 255, 0.94) 46%, rgba(16, 185, 129, 0.14) 100%) !important;
  border-color: rgba(249, 115, 22, 0.42) !important;
}

.calc-result-value {
  letter-spacing: 0 !important;
}

.formula-display {
  border-radius: var(--radius-xl) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.26);
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 58%, #0F172A 100%) !important;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.18);
}

.calc-hub-hero-orbs,
.calc-hub-hero::after {
  pointer-events: none;
}

.category-section {
  padding: 54px 0 !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}

.category-header {
  max-width: 720px;
  margin: 0 auto 28px !important;
  text-align: center;
}

.category-title {
  justify-content: center;
  gap: 10px !important;
  color: var(--color-text-primary) !important;
  letter-spacing: 0 !important;
}

.category-desc {
  margin-left: auto;
  margin-right: auto;
  color: var(--color-text-secondary) !important;
}

.calc-grid {
  gap: 22px !important;
}

.calc-hub-card {
  min-height: 264px;
  padding: 24px !important;
  border-radius: var(--radius-xl) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(236, 253, 245, 0.72) 36%, rgba(254, 243, 199, 0.34) 72%, rgba(255, 255, 255, 0.92) 100%) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.30) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 10px 30px rgba(16, 185, 129, 0.08),
    0 0 0 1px rgba(15, 23, 42, 0.035) !important;
}

.calc-hub-card:hover {
  transform: none !important;
  border-color: rgba(249, 115, 22, 0.7) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 16px 42px rgba(16, 185, 129, 0.13),
    0 0 24px rgba(249, 115, 22, 0.08) !important;
}

.calc-hub-card-icon {
  width: 46px !important;
  height: 46px !important;
  border-radius: var(--radius-md) !important;
  font-size: 1.45rem !important;
  margin-bottom: 16px !important;
}

.calc-hub-card-title {
  color: var(--color-text-primary) !important;
  font-size: 1.18rem !important;
  line-height: 1.2 !important;
}

.calc-hub-card-desc {
  color: var(--color-text-muted) !important;
  font-size: 0.92rem !important;
}

@media (max-width: 1024px) {
  .calc-layout {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .calc-hub-card {
    min-height: auto;
  }

  .category-section {
    padding: 38px 0 !important;
  }
}

/* Final calculator visual sync after page-level inline styles. */
.calc-hub-card.card,
.calc-hub-card {
  min-height: 264px !important;
  padding: 24px !important;
  border-radius: var(--radius-xl) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(236, 253, 245, 0.72) 36%, rgba(254, 243, 199, 0.34) 72%, rgba(255, 255, 255, 0.92) 100%) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.30) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 10px 30px rgba(16, 185, 129, 0.08),
    0 0 0 1px rgba(15, 23, 42, 0.035) !important;
}

.calc-hub-card.card:hover,
.calc-hub-card:hover {
  transform: none !important;
  border-color: rgba(249, 115, 22, 0.70) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 16px 42px rgba(16, 185, 129, 0.13),
    0 0 24px rgba(249, 115, 22, 0.08) !important;
}

.calculator-page-hero {
  padding-top: 96px !important;
  padding-bottom: 28px !important;
}

.calculator-page-hero > div {
  min-height: 244px !important;
  height: 244px !important;
  padding: 26px 36px !important;
}

.calculator-page-hero h1 {
  font-size: clamp(2rem, 4vw, 2.625rem) !important;
  font-weight: 800 !important;
  margin-bottom: 10px !important;
}

.calculator-page-hero p {
  font-size: clamp(1rem, 1.75vw, 1.125rem) !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  max-width: 680px !important;
}

.calculator-page-hero .badge {
  padding: 5px 10px !important;
  font-size: 0.7rem !important;
}

@media (max-width: 768px) {
  .calculator-page-hero > div {
    min-height: 214px !important;
    height: auto !important;
    padding: 24px 18px !important;
  }
}

/* Global background parity: match the cleaner legal/disclaimer page atmosphere. */
html,
body {
  background: var(--color-bg-base, #FAFAF7) !important;
  background-color: var(--color-bg-base, #FAFAF7) !important;
}

body::before {
  content: "" !important;
  position: fixed !important;
  inset: 1px !important;
  background:
    radial-gradient(ellipse 72% 42% at 50% 0%, rgba(16, 185, 129, 0.095) 0%, transparent 58%),
    radial-gradient(ellipse 48% 38% at 18% 20%, rgba(249, 115, 22, 0.055) 0%, transparent 58%),
    radial-gradient(ellipse 46% 34% at 82% 35%, rgba(14, 165, 233, 0.045) 0%, transparent 58%),
    var(--color-bg-base, #FAFAF7) !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

.hero,
.calc-hub-hero,
.calculator-page-hero,
.legal-hero,
.about-hero,
.contact-hero,
.blog-hero,
.learn-hero,
.article-header {
  background:
    radial-gradient(ellipse 72% 42% at 50% 0%, rgba(16, 185, 129, 0.095) 0%, transparent 58%),
    radial-gradient(ellipse 48% 38% at 18% 20%, rgba(249, 115, 22, 0.055) 0%, transparent 58%),
    radial-gradient(ellipse 46% 34% at 82% 35%, rgba(14, 165, 233, 0.045) 0%, transparent 58%),
    var(--color-bg-base, #FAFAF7) !important;
}

.hero-bg-orbs,
.calc-hub-hero-orbs {
  opacity: 0.16 !important;
}

.hero-orb,
.calc-hub-orb {
  filter: blur(120px) !important;
  opacity: 0.08 !important;
}

.blog-hero > .container,
.learn-hero > .container,
.calc-hub-hero > .container,
.calculator-page-hero > div,
.legal-hero > .container,
.about-hero > .container,
.contact-hero > .container,
.article-header {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.74) 0%, rgba(236, 253, 245, 0.34) 42%, rgba(254, 243, 199, 0.22) 74%, rgba(255, 255, 255, 0.72) 100%) !important;
}