:root {
  /* 1. M3 RENK ROLLERİ (SYS COLOR ROLES) */
  --md-sys-color-primary:                  #1f5bff;
  --md-sys-color-on-primary:               #ffffff;
  --md-sys-color-primary-container:        #e0e8ff;
  --md-sys-color-on-primary-container:     #00174b;

  --md-sys-color-secondary:                #4a4f59;
  --md-sys-color-on-secondary:             #ffffff;
  --md-sys-color-secondary-container:      #eaecef;
  --md-sys-color-on-secondary-container:   #16181d;

  --md-sys-color-tertiary:                 #006874;
  --md-sys-color-on-tertiary:              #ffffff;
  --md-sys-color-tertiary-container:       #9eeffd;
  --md-sys-color-on-tertiary-container:    #001f24;

  --md-sys-color-error:                    #ba1a1a;
  --md-sys-color-on-error:                 #ffffff;
  --md-sys-color-error-container:          #ffdad6;
  --md-sys-color-on-error-container:       #410002;

  --md-sys-color-surface:                  #ffffff;
  --md-sys-color-surface-dim:              #ded8e1;
  --md-sys-color-surface-bright:           #fef7ff;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low:    #f7f7f5;
  --md-sys-color-surface-container:        #f2f2ef;
  --md-sys-color-surface-container-high:   #ecece8;
  --md-sys-color-surface-container-highest:#e4e4e0;

  --md-sys-color-on-surface:               #16181d;
  --md-sys-color-on-surface-variant:       #4a4f59;
  --md-sys-color-outline:                  #6b707a;
  --md-sys-color-outline-variant:          #e4e4e0;
  --md-sys-color-outline-strong:           #cfcfca;

  --md-sys-color-inverse-surface:          #111317;
  --md-sys-color-inverse-on-surface:       #f2f2ef;
  --md-sys-color-inverse-on-surface-variant:#a3a7af;
  --md-sys-color-inverse-primary:          #b4c5ff;
  --md-sys-color-inverse-outline:          #2a2d33;

  /* 2. M3 YÜKSEKLİK VE GÖLGELER (SYS ELEVATION) */
  --md-sys-elevation-level0:               none;
  --md-sys-elevation-level1:               0px 1px 3px 1px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.12);
  --md-sys-elevation-level2:               0px 2px 6px 2px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.14);
  --md-sys-elevation-level3:               0px 4px 8px 3px rgba(0, 0, 0, 0.08), 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level4:               0px 6px 10px 4px rgba(0, 0, 0, 0.08), 0px 2px 3px 0px rgba(0, 0, 0, 0.16);
  --md-sys-elevation-level5:               0px 8px 12px 6px rgba(0, 0, 0, 0.08), 0px 4px 4px 0px rgba(0, 0, 0, 0.18);

  /* 3. M3 ŞEKİL VE YUVARLAKLIK (SYS SHAPE) */
  --md-sys-shape-corner-none:              0px;
  --md-sys-shape-corner-extra-small:       4px;
  --md-sys-shape-corner-small:             8px;
  --md-sys-shape-corner-medium:            12px;
  --md-sys-shape-corner-large:             16px;
  --md-sys-shape-corner-extra-large:       28px;
  --md-sys-shape-corner-full:              9999px;

  /* 4. M3 TİPOGRAFİ SKALASI (SYS TYPESCALE) */
  --md-sys-font-sans:                      -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --md-sys-font-mono:                      ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --md-sys-font-serif:                     "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  /* 5. M3 DURUM KATMANLARI VE HAREKET (STATE & MOTION) */
  --md-sys-state-hover-opacity:            0.08;
  --md-sys-state-focus-opacity:            0.12;
  --md-sys-state-pressed-opacity:          0.12;

  --md-sys-motion-easing-standard:         cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized:       cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-duration-short:          150ms;
  --md-sys-motion-duration-medium:         300ms;
  --md-sys-motion-duration-long:           500ms;
  /* M3 vurgulu hareket: giren öğe yavaşlayarak yerine oturur, çıkan hızlanarak ayrılır */
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);

  /* 7. MARKA REFERANS PALETİ (M3 ref palette) — logo laciverti ve vurgu yeşili tonları.
     Rol değil, ton: bileşenler bunlara doğrudan değil, aşağıdaki özel renk rolleri üzerinden bağlanır. */
  --md-ref-palette-brand10:                #040f30;
  --md-ref-palette-brand20:                #0a2368;
  --md-ref-palette-brand30:                #103190;
  --md-ref-palette-brand60:                #4e86e8;
  --md-ref-palette-brand80:                #c9d3f2;
  --md-ref-palette-brand90:                #dce4ff;
  --md-ref-palette-accent70:               #6ccb4f;

  /* 8. MARKA ÖZEL RENK ROLLERİ (M3 custom colors). Kontrast: on-brand-variant / brand 7,4:1;
     on-accent / accent 5,5:1 — ikisi de küçük metin için AA'yı geçer. */
  --md-custom-color-brand:                 var(--md-ref-palette-brand30);
  --md-custom-color-on-brand:              #ffffff;
  --md-custom-color-on-brand-variant:      var(--md-ref-palette-brand80);
  --md-custom-color-brand-container:       var(--md-ref-palette-brand60);
  --md-custom-color-brand-container-low:   var(--md-ref-palette-brand90);
  --md-custom-color-brand-outline:         rgba(255, 255, 255, 0.14);
  --md-custom-color-brand-ghost:           rgba(255, 255, 255, 0.05);
  --md-custom-color-accent:                var(--md-ref-palette-accent70);
  --md-custom-color-on-accent:             var(--md-ref-palette-brand30);

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;
  --page-max-width: 1200px;

  /* 6. GÜNCEL LANDING APEX EŞLEMESİ (--lp-*) */
  --lp-ink:        var(--md-sys-color-on-surface);
  --lp-ink2:       var(--md-sys-color-on-surface-variant);
  --lp-ink3:       var(--md-sys-color-outline);
  --lp-rule:       var(--md-sys-color-outline-variant);
  --lp-rule2:      var(--md-sys-color-outline-strong);
  --lp-fill:       var(--md-sys-color-surface-container);
  --lp-subtle:     var(--md-sys-color-surface-container-low);
  --lp-dark:       var(--md-sys-color-inverse-surface);
  --lp-dark-rule:  var(--md-sys-color-inverse-outline);
  --lp-dark-ink:   var(--md-sys-color-inverse-on-surface);
  --lp-dark-ink2:  var(--md-sys-color-inverse-on-surface-variant);
  --lp-blue:       var(--md-sys-color-primary);
  --lp-sans:       var(--md-sys-font-sans);
  --lp-mono:       var(--md-sys-font-mono);
  --lp-serif:      var(--md-sys-font-serif);

  /* 7. GERİYE DÖNÜK UYUMLULUK VE FORM/AUTH SAYFALARI HARİTASI */
  --bg-primary:            var(--md-sys-color-surface);
  --bg-surface:            var(--md-sys-color-surface-container-lowest);
  --bg-card:               var(--md-sys-color-surface-container-lowest);
  --bg-card-hover:         var(--md-sys-color-surface-container-low);
  --bg-subtle:             var(--md-sys-color-surface-container-low);
  --bg-dark-frame:         var(--md-sys-color-inverse-surface);
  --bg-inset:              rgba(22, 24, 29, 0.04);

  --text-primary:          var(--md-sys-color-on-surface);
  --text-secondary:        var(--md-sys-color-on-surface-variant);
  --text-muted:            var(--md-sys-color-outline);
  --text-inverse:          var(--md-sys-color-surface);

  --border-subtle:         var(--md-sys-color-outline-variant);
  --border-strong:         var(--md-sys-color-outline-strong);
  --border-focus:          var(--md-sys-color-primary);

  --btn-primary-bg:        var(--md-sys-color-on-surface);
  --btn-primary-text:      #ffffff;
  --btn-secondary-bg:      var(--md-sys-color-surface);
  --btn-secondary-border:  var(--md-sys-color-outline-variant);
  --btn-secondary-text:    var(--md-sys-color-on-surface);

  --shadow-subtle:         var(--md-sys-elevation-level1);
  --shadow-soft:           var(--md-sys-elevation-level2);
  --shadow-card:           var(--md-sys-elevation-level1);
  --shadow-floating:       var(--md-sys-elevation-level3);
  --shadow-btn:            var(--md-sys-elevation-level1);
  --shadow-mockup:         var(--md-sys-elevation-level4);

  --radius-sm:             var(--md-sys-shape-corner-extra-small);
  --radius-md:             6px;
  --radius-lg:             var(--md-sys-shape-corner-small);
  --radius-xl:             var(--md-sys-shape-corner-medium);
  --radius-2xl:            var(--md-sys-shape-corner-large);
  --radius-3xl:            var(--md-sys-shape-corner-extra-large);
  --radius-full:           var(--md-sys-shape-corner-full);

  --raw-onyx:              var(--md-sys-color-on-surface);
  --raw-parchment-cream:   var(--md-sys-color-surface-container-low);
  --color-brand-400:       var(--md-sys-color-primary);
  --color-brand-500:       var(--md-sys-color-on-surface);
  --color-brand-600:       var(--md-sys-color-on-surface);
  --color-ruby-500:        var(--md-sys-color-error);
  --color-mint-electric:   var(--md-sys-color-tertiary);
  --glow-brand:            rgba(31, 91, 255, 0.16);
}


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-family: var(--md-sys-font-sans); color: var(--md-sys-color-on-surface); background-color: var(--md-sys-color-surface); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; background-color: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface-variant); line-height: 1.5; overflow-x: hidden; }

:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

.container { width: 100%; max-width: var(--page-max-width, 1200px); margin-left: auto; margin-right: auto; padding-left: clamp(1.25rem, 4vw, 3rem); padding-right: clamp(1.25rem, 4vw, 3rem); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--md-sys-font-sans); font-size: 0.875rem; font-weight: 500; padding: 0.625rem 1.25rem; border-radius: var(--md-sys-shape-corner-small); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: all var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard); line-height: 1.25; }
.btn:active { transform: scale(0.98); }
.btn-primary { background-color: var(--btn-primary-bg); color: var(--btn-primary-text); box-shadow: var(--md-sys-elevation-level1); }
.btn-primary:hover { background-color: #2b313b; box-shadow: var(--md-sys-elevation-level2); transform: translateY(-1px); }
.btn-secondary { background-color: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); border: 1px solid var(--md-sys-color-outline-variant); box-shadow: var(--md-sys-elevation-level0); }
.btn-secondary:hover { background-color: var(--md-sys-color-surface-container-low); border-color: var(--md-sys-color-outline); box-shadow: var(--md-sys-elevation-level1); transform: translateY(-1px); }
.btn-outline { background-color: transparent; color: var(--md-sys-color-on-surface-variant); border: none; }
.btn-outline:hover { color: var(--md-sys-color-on-surface); background-color: rgba(22, 24, 29, var(--md-sys-state-hover-opacity)); }

.glass-panel { background: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-large); box-shadow: var(--md-sys-elevation-level1); }
.bento-card { background: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-large); padding: clamp(1.75rem, 3vw, 2.5rem); transition: box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard), transform var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard); display: flex; flex-direction: column; position: relative; box-shadow: var(--md-sys-elevation-level0); }
.bento-card:hover { box-shadow: var(--md-sys-elevation-level2); transform: translateY(-2px); }

.form-group { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.form-label { font-size: 0.8125rem; font-weight: 500; color: var(--md-sys-color-on-surface); letter-spacing: 0.01em; }
.form-input, .form-select { width: 100%; padding: 0.75rem 1rem; background-color: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-small); color: var(--md-sys-color-on-surface); font-family: var(--md-sys-font-sans); font-size: 0.9375rem; transition: border-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard), box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard); }
.form-input:focus, .form-select:focus { background-color: var(--md-sys-color-surface); border-color: var(--md-sys-color-primary); box-shadow: 0 0 0 3px rgba(31, 91, 255, 0.15); outline: none; }
.form-checkbox-label { display: flex; align-items: flex-start; gap: var(--space-3); font-size: 0.8125rem; color: var(--md-sys-color-on-surface-variant); cursor: pointer; }
.form-checkbox-label input[type="checkbox"] { margin-top: 0.125rem; accent-color: var(--md-sys-color-primary); }
.form-error { font-size: 0.75rem; color: var(--md-sys-color-error); }

.badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0.25rem 0.75rem; border-radius: var(--md-sys-shape-corner-full); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; border: 1px solid var(--md-sys-color-outline-variant); }
.badge-brand { background: var(--md-sys-color-surface-container); border-color: var(--md-sys-color-outline-variant); color: var(--md-sys-color-on-surface); font-family: var(--md-sys-font-sans); }
.badge-placeholder { background: #fdf0d5; border-color: #fbd38d; color: #8a4b08; }

.partner-logo-banner { text-align: center; padding: 1.125rem 1.5rem; border-bottom: 1px solid var(--md-sys-color-outline-variant); background: var(--md-sys-color-surface); font-size: 0.8125rem; font-weight: 500; color: var(--md-sys-color-primary); letter-spacing: 0.02em; }
.partner-logo-grid { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; background: var(--md-sys-color-surface); }
.partner-logo-cell { display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 5.5rem; padding: 1.25rem 1.5rem; border-right: 1px solid var(--md-sys-color-outline-variant); font-size: 0.9375rem; font-weight: 600; color: var(--md-sys-color-on-surface); opacity: 0.85; transition: background-color var(--md-sys-motion-duration-short), opacity var(--md-sys-motion-duration-short); }
.partner-logo-cell:last-child { border-right: none; }
.partner-logo-cell:hover { background-color: var(--md-sys-color-surface-container-low); opacity: 1; }
@media (max-width: 900px) {
  .partner-logo-grid { grid-template-columns: repeat(2, 1fr); }
  .partner-logo-cell:nth-child(2) { border-right: none; }
  .partner-logo-cell:nth-child(1), .partner-logo-cell:nth-child(2) { border-bottom: 1px solid var(--md-sys-color-outline-variant); }
}
@media (max-width: 540px) {
  .partner-logo-grid { grid-template-columns: 1fr; }
  .partner-logo-cell { border-right: none !important; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
  .partner-logo-cell:last-child { border-bottom: none; }
}

@media (min-width: 768px) {
  .md-flex { display: flex !important; }
  .md-grid-2 { grid-template-columns: repeat(2, 1fr) !important; }
  .md-grid-3 { grid-template-columns: repeat(3, 1fr) !important; }
}