/*
 * cllctv.tr — Ana Stil Dosyası  v2
 * Mobile-first · CSS Özel Özellikleri · Semantik BEM
 * ============================================================
 */

/* ============================================================
   1. TASARIM DEĞİŞKENLERİ
   ============================================================ */
:root {
  /* Marka */
  --c-brand:          #4f46e5;
  --c-brand-hover:    #4338ca;
  --c-brand-active:   #3730a3;
  --c-brand-light:    #eef2ff;
  --c-brand-border:   #c7d2fe;
  --c-brand-text:     #4338ca;
  --c-brand-glow:     rgba(79,70,229,0.20);
  --c-brand-gradient: linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%);

  /* Aksent */
  --c-violet:         #7c3aed;
  --c-violet-light:   #f5f3ff;
  --c-violet-border:  #ddd6fe;

  /* Metin */
  --c-text:           #0f172a;
  --c-text-muted:     #64748b;
  --c-text-light:     #94a3b8;
  --c-text-xlight:    #cbd5e1;
  --c-text-inverse:   #ffffff;

  /* Arka Plan */
  --c-bg:             #ffffff;
  --c-bg-subtle:      #f8fafc;
  --c-bg-muted:       #f1f5f9;

  /* Kenarlık */
  --c-border:         #e2e8f0;
  --c-border-dark:    #cbd5e1;

  /* Durum */
  --c-success:        #059669;
  --c-success-bg:     #ecfdf5;
  --c-success-border: #a7f3d0;
  --c-error:          #dc2626;
  --c-error-bg:       #fef2f2;
  --c-error-border:   #fecaca;

  /* Özel Bölümler */
  --c-hero-bg:        #060b18;
  --c-hero-surface:   #0c1526;
  --c-footer-bg:      #0a0f1e;
  --c-footer-border:  rgba(255,255,255,0.07);

  /* Tipografi */
  --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-xs:   .75rem;
  --fs-sm:   .875rem;
  --fs-base: 1rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  1.5rem;
  --fs-3xl:  1.875rem;
  --fs-4xl:  2.25rem;
  --fs-5xl:  2.75rem;
  --fs-6xl:  3.75rem;
  --fs-7xl:  4.5rem;

  --fw-normal:    400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --fw-black:     900;

  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-normal: 1.6;
  --lh-loose:  1.75;

  /* Boşluklar */
  --sp-1:  .25rem;
  --sp-2:  .5rem;
  --sp-3:  .75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* Köşe */
  --r-xs:   .25rem;
  --r-sm:   .375rem;
  --r-md:   .625rem;
  --r-lg:   .875rem;
  --r-xl:   1.125rem;
  --r-2xl:  1.5rem;
  --r-3xl:  2rem;
  --r-full: 9999px;

  /* Gölgeler */
  --shadow-xs:    0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:    0 1px 4px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.04);
  --shadow-md:    0 4px 12px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:    0 8px 24px rgba(0,0,0,.10),0 4px 8px rgba(0,0,0,.05);
  --shadow-xl:    0 20px 48px rgba(0,0,0,.12),0 8px 16px rgba(0,0,0,.06);
  --shadow-card:  0 0 0 1px rgba(0,0,0,.05),0 10px 28px rgba(0,0,0,.12),0 40px 80px rgba(0,0,0,.20);
  --shadow-brand: 0 8px 24px rgba(79,70,229,.30),0 2px 8px rgba(79,70,229,.18);

  /* Geçişler */
  --tr:        150ms ease;
  --tr-slow:   280ms ease;
  --tr-spring: 300ms cubic-bezier(.34,1.56,.64,1);

  /* Düzen */
  --nav-height:   4rem;
  --container-xl: 1200px;
  --container-lg: 960px;
  --container-md: 720px;
  --container-sm: 540px;
  --container-xs: 480px;
}

/* ============================================================
   2. SIFIRLAMA VE TEMEL
   ============================================================ */
*,*::before,*::after { box-sizing:border-box;margin:0;padding:0; }

html { scroll-behavior:smooth;-webkit-text-size-adjust:100%; }

body {
  font-family: var(--font);
  font-size:   var(--fs-base);
  line-height: var(--lh-normal);
  color:       var(--c-text);
  background:  var(--c-bg);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,svg { display:block;max-width:100%; }
a       { color:inherit;text-decoration:none; }
button  { cursor:pointer;border:none;background:none;font:inherit; }
input,textarea,select { font:inherit; }
ul,ol  { list-style:none; }

[x-cloak] { display:none !important; }

/* ============================================================
   3. DÜZEN
   ============================================================ */
.container      { width:100%;max-width:var(--container-xl);margin-inline:auto;padding-inline:var(--sp-5); }
.container--lg  { max-width:var(--container-lg); }
.container--md  { max-width:var(--container-md); }
.container--sm  { max-width:var(--container-sm); }
.container--xs  { max-width:var(--container-xs); }

/* ============================================================
   4. BUTONLAR
   ============================================================ */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--sp-2);
  padding:         .75rem var(--sp-6);
  border-radius:   var(--r-md);
  font-size:       var(--fs-sm);
  font-weight:     var(--fw-semibold);
  line-height:     1;
  white-space:     nowrap;
  transition:      background var(--tr),box-shadow var(--tr),transform var(--tr),color var(--tr),border-color var(--tr);
  -webkit-tap-highlight-color: transparent;
}
.btn:disabled { opacity:.5;cursor:not-allowed;pointer-events:none; }

.btn--primary {
  background: var(--c-brand-gradient);
  color: #fff;
  box-shadow: 0 2px 8px rgba(79,70,229,.20);
}
.btn--primary:hover  { background:linear-gradient(135deg,#4338ca 0%,#6d28d9 100%);box-shadow:var(--shadow-brand); }
.btn--primary:active { transform:scale(.99); }

.btn--outline {
  background:   transparent;
  color:        var(--c-text-muted);
  border:       1.5px solid var(--c-border);
}
.btn--outline:hover { border-color:var(--c-border-dark);background:var(--c-bg-subtle); }

.btn--ghost {
  background: transparent;
  color: var(--c-text-muted);
  padding: .5rem var(--sp-4);
}
.btn--ghost:hover { background:var(--c-bg-muted);color:var(--c-text); }

.btn--full { width:100%; }
.btn--lg   { padding:.875rem var(--sp-6);font-size:var(--fs-base); }
.btn--sm   { padding:.5rem var(--sp-4);font-size:var(--fs-xs); }

/* ============================================================
   5. FORM ELEMANLARI
   ============================================================ */
.input {
  width:        100%;
  padding:      .75rem var(--sp-4);
  border:       1.5px solid var(--c-border);
  border-radius:var(--r-lg);
  background:   var(--c-bg-subtle);
  color:        var(--c-text);
  font-size:    var(--fs-sm);
  transition:   border-color var(--tr),box-shadow var(--tr),background var(--tr);
  appearance:   none;
}
.input:focus {
  outline:      none;
  border-color: var(--c-brand);
  background:   var(--c-bg);
  box-shadow:   0 0 0 3px rgba(79,70,229,.10);
}
.input::placeholder { color:var(--c-text-light); }
.input--icon { padding-left:2.75rem; }

.input-wrapper { position:relative; }
.input-wrapper .input-icon {
  position:    absolute;
  left:        var(--sp-3);
  top:         50%;
  transform:   translateY(-50%);
  color:       var(--c-text-light);
  pointer-events:none;
  display:     flex;
  align-items: center;
}

/* ============================================================
   6. NAVİGASYON
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--nav-height);
  background: rgba(6,11,24,.92);
  backdrop-filter: blur(12px) saturate(1.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.site-header__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          100%;
}

.site-header__logo {
  font-size:      var(--fs-xl);
  font-weight:    var(--fw-black);
  letter-spacing: -.03em;
  color: #fff;
  line-height: 1;
  transition: opacity var(--tr);
}
.site-header__logo:hover { opacity:.8; }
.site-header__logo span { color:#818cf8; }

.site-header__nav {
  display: none;
  align-items: center;
  gap: var(--sp-1);
}
.site-header__nav a {
  padding: .4rem .75rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: rgba(255,255,255,.5);
  letter-spacing: .01em;
  transition: color var(--tr),background var(--tr);
}
.site-header__nav a:hover { color:#fff;background:rgba(255,255,255,.07); }
.site-header__nav a.is-active { color:#a5b4fc; }

/* Hamburger */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.25rem;
  height: 2.25rem;
  padding: .4rem;
  border-radius: var(--r-sm);
  background: none;
  border: none;
  cursor: pointer;
  transition: background var(--tr);
  -webkit-tap-highlight-color: transparent;
}
.hamburger:hover { background:rgba(255,255,255,.08); }
.hamburger__line {
  display: block;
  width: 100%;
  height: 2px;
  background: rgba(255,255,255,.7);
  border-radius: var(--r-full);
  transition: transform var(--tr-slow),opacity var(--tr-slow);
  transform-origin: center;
}
.hamburger--open .hamburger__line:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger--open .hamburger__line:nth-child(2) { opacity:0;transform:scaleX(0); }
.hamburger--open .hamburger__line:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile Nav */
.mobile-nav {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  z-index: 190;
  background: rgba(6,11,24,.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: var(--sp-4) var(--sp-5) var(--sp-6);
}
.mobile-nav__links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.mobile-nav__link {
  display: block;
  padding: .75rem var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: rgba(255,255,255,.7);
  transition: color var(--tr),background var(--tr);
}
.mobile-nav__link:hover { color:#fff;background:rgba(255,255,255,.08); }
.mobile-nav__divider {
  height: 1px;
  background: rgba(255,255,255,.07);
  margin: var(--sp-3) 0;
}

/* ============================================================
   7. HERO
   ============================================================ */
.hero {
  position:  relative;
  min-height: calc(100svh - var(--nav-height));
  display:   flex;
  flex-direction: column;
  align-items:    center;
  justify-content:center;
  padding: var(--sp-16) var(--sp-4) var(--sp-12);
  background: var(--c-hero-bg);
  overflow: hidden;
}

/* Katmanlı arka plan */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 50% at 50% -10%,rgba(79,70,229,.18) 0%,transparent 65%),
    radial-gradient(ellipse 60% 40% at 20% 110%,rgba(124,58,237,.10) 0%,transparent 60%),
    radial-gradient(rgba(255,255,255,.018) 1px,transparent 1px);
  background-size: auto,auto,28px 28px;
  pointer-events: none;
}

/* Parlayan orb */
.hero::after {
  content: '';
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: min(600px,120vw);
  height: min(600px,120vw);
  background: radial-gradient(circle,rgba(79,70,229,.10) 0%,transparent 70%);
  pointer-events: none;
  animation: heroGlow 8s ease-in-out infinite alternate;
}

.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-xs);
  margin-inline: auto;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: .3rem .75rem;
  border-radius: var(--r-full);
  background: rgba(79,70,229,.12);
  border: 1px solid rgba(99,102,241,.25);
  color: #a5b4fc;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: .02em;
  margin-bottom: var(--sp-5);
}
.hero__badge-dot {
  width: 6px;height: 6px;
  border-radius:50%;background:#818cf8;
  flex-shrink:0;
  box-shadow:0 0 6px rgba(129,140,248,.8);
  animation: pulse 2s ease-in-out infinite;
}

.hero__heading {
  font-size: clamp(1.75rem, 9vw, var(--fs-4xl));
  font-weight: var(--fw-black);
  letter-spacing: -.04em;
  line-height: var(--lh-tight);
  color: #fff;
  margin-bottom: var(--sp-3);
}
.hero__heading em { font-style:normal;color:#818cf8; }

.hero__lead {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.45);
  line-height: var(--lh-normal);
  margin-bottom: var(--sp-8);
}

/* ============================================================
   8. FORM KARTI
   ============================================================ */
.form-card {
  background:    var(--c-bg);
  border-radius: var(--r-2xl);
  box-shadow:    var(--shadow-card);
  padding:       var(--sp-5);
  border:        1px solid rgba(255,255,255,.06);
}

.form-card__field { margin-bottom:var(--sp-4); }
.form-card__label {
  display:        block;
  font-size:      var(--fs-xs);
  font-weight:    var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: .07em;
  color:          var(--c-text-muted);
  margin-bottom:  var(--sp-2);
}

/* Geçerlilik Seçicisi */
.validity-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: var(--sp-2);
}
.validity-btn {
  padding: .625rem var(--sp-2);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text-muted);
  background: var(--c-bg-subtle);
  text-align: center;
  transition: all var(--tr);
  cursor: pointer;
}
.validity-btn:hover { border-color:var(--c-border-dark);background:var(--c-bg-muted); }
.validity-btn--active {
  border-color: var(--c-brand);
  background:   var(--c-brand-light);
  color:        var(--c-brand-text);
  box-shadow:   0 0 0 3px rgba(79,70,229,.08);
}

/* Hata */
.form-error {
  display:     flex;
  align-items: flex-start;
  gap:         var(--sp-2);
  padding:     var(--sp-3);
  border-radius: var(--r-md);
  background:  var(--c-error-bg);
  border:      1px solid var(--c-error-border);
  color:       var(--c-error);
  font-size:   var(--fs-xs);
  line-height: var(--lh-snug);
  margin-bottom:var(--sp-4);
}
.form-error svg { flex-shrink:0;margin-top:1px; }

/* Kısalt Butonu */
.btn-shorten {
  width:   100%;
  padding: .9375rem var(--sp-6);
  background: var(--c-brand-gradient);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  transition: box-shadow var(--tr),transform var(--tr),filter var(--tr);
  box-shadow: 0 4px 16px rgba(79,70,229,.28);
  -webkit-tap-highlight-color: transparent;
}
.btn-shorten:hover:not(:disabled)  { box-shadow:var(--shadow-brand);filter:brightness(1.06); }
.btn-shorten:active:not(:disabled) { transform:scale(.99); }
.btn-shorten:disabled { opacity:.52;cursor:not-allowed; }
.btn-shorten__spinner {
  width:1rem;height:1rem;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .7s linear infinite;
}

/* Sonuç */
.result-header {
  display:     flex;
  align-items: center;
  gap:         var(--sp-3);
  margin-bottom:var(--sp-5);
}
.result-icon {
  width:2.25rem;height:2.25rem;
  border-radius:50%;
  background: var(--c-success-bg);
  border:1.5px solid var(--c-success-border);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;color:var(--c-success);
}
.result-title   { font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--c-text); }
.result-subtitle{ font-size:var(--fs-xs);color:var(--c-text-muted);margin-top:2px; }

.result-url-box {
  display:     flex;
  align-items: center;
  gap:         var(--sp-2);
  padding:     var(--sp-3) var(--sp-4);
  background:  var(--c-brand-light);
  border:      1.5px solid var(--c-brand-border);
  border-radius:var(--r-lg);
  margin-bottom:var(--sp-3);
}
.result-url {
  flex:1;
  font-size:var(--fs-sm);font-weight:var(--fw-bold);
  color:var(--c-brand-text);word-break:break-all;
}
.result-url:hover { text-decoration:underline; }

.btn-copy {
  flex-shrink:0;
  display:inline-flex;align-items:center;gap:var(--sp-1);
  padding:.375rem .75rem;
  background:var(--c-brand);color:#fff;
  font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  border-radius:var(--r-md);
  transition:background var(--tr);white-space:nowrap;
}
.btn-copy:hover { background:var(--c-brand-hover); }

.result-original {
  font-size:var(--fs-xs);color:var(--c-text-light);
  margin-bottom:var(--sp-5);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding-left:var(--sp-1);
}
.form-card__note {
  text-align:center;font-size:var(--fs-xs);
  color:var(--c-text-light);margin-top:var(--sp-4);
  line-height:var(--lh-snug);
}
.form-card__note a { color:var(--c-brand);text-decoration:underline; }

/* ============================================================
   9. SON LİNKLER
   ============================================================ */
.recent-links {
  background:   var(--c-bg-subtle);
  border-top:   1px solid var(--c-border);
  border-bottom:1px solid var(--c-border);
  padding: var(--sp-8) var(--sp-4);
}
.recent-links__header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   var(--sp-4);
}
.recent-links__title {
  font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  text-transform:uppercase;letter-spacing:.07em;color:var(--c-text-muted);
}
.recent-links__clear {
  font-size:var(--fs-xs);color:var(--c-text-light);
  cursor:pointer;background:none;border:none;
  font-family:var(--font);transition:color var(--tr);
}
.recent-links__clear:hover { color:var(--c-text-muted); }
.recent-links__list { display:flex;flex-direction:column;gap:var(--sp-2); }

.recent-link-item {
  display:     flex;
  align-items: center;
  gap:         var(--sp-3);
  padding:     var(--sp-3) var(--sp-4);
  background:  var(--c-bg);
  border:      1px solid var(--c-border);
  border-radius:var(--r-lg);
  box-shadow:  var(--shadow-xs);
  transition:  border-color var(--tr),box-shadow var(--tr);
}
.recent-link-item:hover { border-color:var(--c-brand-border);box-shadow:var(--shadow-sm); }
.recent-link-item__info { flex:1;min-width:0; }
.recent-link-item__short {
  display:block;font-size:var(--fs-sm);font-weight:var(--fw-semibold);
  color:var(--c-brand);margin-bottom:2px;
}
.recent-link-item__short:hover { text-decoration:underline; }
.recent-link-item__original {
  font-size:var(--fs-xs);color:var(--c-text-light);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.recent-link-item__copy {
  flex-shrink:0;width:2rem;height:2rem;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-md);color:var(--c-text-light);
  transition:color var(--tr),background var(--tr);
}
.recent-link-item__copy:hover { color:var(--c-brand);background:var(--c-brand-light); }

/* ============================================================
   10. BÖLÜM BAŞLIKLARI
   ============================================================ */
.section-header    { text-align:center;margin-bottom:var(--sp-12); }
.section-label {
  display:inline-block;
  font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  text-transform:uppercase;letter-spacing:.09em;
  color:var(--c-brand);margin-bottom:var(--sp-3);
}
.section-title {
  font-size:var(--fs-2xl);font-weight:var(--fw-bold);
  letter-spacing:-.025em;color:var(--c-text);
  line-height:var(--lh-snug);margin-bottom:var(--sp-3);
}
.section-desc {
  font-size:var(--fs-base);color:var(--c-text-muted);
  max-width:44ch;margin-inline:auto;line-height:var(--lh-normal);
}

/* ============================================================
   11. STATS ŞERIDI (Ana Sayfa — Güven Göstergeleri)
   ============================================================ */
.stats-strip {
  background: var(--c-bg-subtle);
  border-top:    1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  padding: var(--sp-6) var(--sp-4);
}
.stats-strip__grid {
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap: var(--sp-4);
}
.stat-item {
  display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:var(--sp-4) var(--sp-3);
}
.stat-item__num {
  font-size:var(--fs-2xl);font-weight:var(--fw-black);
  letter-spacing:-.04em;color:var(--c-brand);
  line-height:1;margin-bottom:var(--sp-1);
}
.stat-item__label { font-size:var(--fs-xs);color:var(--c-text-muted);line-height:var(--lh-snug); }

/* ============================================================
   12. TEASER GRID (Ana Sayfa — Keşfet Bölümleri)
   ============================================================ */
.teaser-section {
  padding:var(--sp-16) var(--sp-4);
  background:var(--c-bg);
}
.teaser-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-4);
}
.teaser-card {
  display:block;
  padding:var(--sp-6);
  background:var(--c-bg);
  border:1.5px solid var(--c-border);
  border-radius:var(--r-2xl);
  transition:border-color var(--tr-slow),box-shadow var(--tr-slow),transform var(--tr-slow);
  text-decoration:none;
  color:inherit;
  position:relative;overflow:hidden;
}
.teaser-card::before {
  content:'';
  position:absolute;top:0;left:0;right:0;
  height:3px;
  background:var(--c-brand-gradient);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--tr-slow);
}
.teaser-card:hover { border-color:var(--c-brand-border);box-shadow:var(--shadow-lg);transform:translateY(-2px); }
.teaser-card:hover::before { transform:scaleX(1); }
.teaser-card:active { transform:translateY(0); }

.teaser-card__icon {
  width:3rem;height:3rem;
  border-radius:var(--r-xl);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:var(--sp-4);
  transition:transform var(--tr-spring);
}
.teaser-card:hover .teaser-card__icon { transform:scale(1.08); }
.teaser-card__icon--indigo  { background:#eef2ff;color:#4f46e5; }
.teaser-card__icon--violet  { background:#f5f3ff;color:#7c3aed; }
.teaser-card__icon--emerald { background:#ecfdf5;color:#059669; }

.teaser-card__title {
  font-size:var(--fs-base);font-weight:var(--fw-bold);
  color:var(--c-text);margin-bottom:var(--sp-2);letter-spacing:-.01em;
}
.teaser-card__desc {
  font-size:var(--fs-sm);color:var(--c-text-muted);
  line-height:var(--lh-normal);margin-bottom:var(--sp-5);
}
.teaser-card__arrow {
  display:inline-flex;align-items:center;gap:var(--sp-1);
  font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  color:var(--c-brand);
  transition:gap var(--tr);
}
.teaser-card:hover .teaser-card__arrow { gap:var(--sp-2); }

/* ============================================================
   13. CTA BANDI
   ============================================================ */
.cta-band {
  background:     var(--c-hero-bg);
  padding:        var(--sp-16) var(--sp-4);
  text-align:     center;
  position:       relative;
  overflow:       hidden;
}
.cta-band::before {
  content:'';
  position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 50%,rgba(79,70,229,.14) 0%,transparent 70%);
  pointer-events:none;
}
.cta-band__inner { position:relative;z-index:1; }
.cta-band__label {
  display:inline-block;
  font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  text-transform:uppercase;letter-spacing:.09em;
  color:rgba(129,140,248,.8);margin-bottom:var(--sp-4);
}
.cta-band__title {
  font-size:var(--fs-3xl);font-weight:var(--fw-black);
  letter-spacing:-.04em;color:#fff;
  line-height:var(--lh-snug);margin-bottom:var(--sp-3);
}
.cta-band__desc {
  font-size:var(--fs-base);color:rgba(255,255,255,.45);
  max-width:40ch;margin-inline:auto;
  line-height:var(--lh-normal);margin-bottom:var(--sp-8);
}
.cta-band__actions { display:flex;flex-direction:column;gap:var(--sp-3);align-items:center; }
.cta-band__actions .btn--outline {
  border-color:rgba(255,255,255,.18);
  color:rgba(255,255,255,.6);
}
.cta-band__actions .btn--outline:hover {
  border-color:rgba(255,255,255,.35);
  color:#fff;background:rgba(255,255,255,.06);
}

/* ============================================================
   14. SAYFA HERO (İç Sayfalar)
   ============================================================ */
.page-hero {
  background:    var(--c-hero-bg);
  padding:       var(--sp-12) var(--sp-4) var(--sp-10);
  position:      relative;
  overflow:      hidden;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.page-hero::before {
  content:'';
  position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(79,70,229,.15) 0%,transparent 65%);
  pointer-events:none;
}
.page-hero__inner { position:relative;z-index:1; }
.breadcrumb {
  display:inline-flex;align-items:center;gap:var(--sp-2);
  margin-bottom:var(--sp-5);
  flex-wrap:wrap;
}
.breadcrumb__item {
  font-size:var(--fs-xs);color:rgba(255,255,255,.35);
  transition:color var(--tr);
}
.breadcrumb__item:hover { color:rgba(255,255,255,.65); }
.breadcrumb__sep { font-size:var(--fs-xs);color:rgba(255,255,255,.18); }
.breadcrumb__current { color:rgba(255,255,255,.55);pointer-events:none; }

.page-hero__tag {
  display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:.3rem .75rem;
  border-radius:var(--r-full);
  background:rgba(79,70,229,.12);
  border:1px solid rgba(99,102,241,.25);
  color:#a5b4fc;
  font-size:var(--fs-xs);font-weight:var(--fw-medium);
  margin-bottom:var(--sp-4);
}
.page-hero__title {
  font-size:var(--fs-4xl);font-weight:var(--fw-black);
  letter-spacing:-.04em;color:#fff;
  line-height:var(--lh-tight);margin-bottom:var(--sp-3);
}
.page-hero__subtitle {
  font-size:var(--fs-md);color:rgba(255,255,255,.45);
  line-height:var(--lh-normal);max-width:52ch;
}

/* ============================================================
   15. FEATURE KARTI (geliştirilmiş)
   ============================================================ */
.features-section {
  padding:var(--sp-16) var(--sp-4);
  background:var(--c-bg);
}
/* Eski .features için geriye dönük uyum */
.features { padding:var(--sp-16) var(--sp-4);background:var(--c-bg); }

.features-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-4);
}
.feature-card {
  padding:var(--sp-6);
  background:var(--c-bg);
  border:1.5px solid var(--c-border);
  border-radius:var(--r-2xl);
  transition:border-color var(--tr-slow),box-shadow var(--tr-slow),transform var(--tr-slow);
}
.feature-card:hover {
  border-color:var(--c-brand-border);
  box-shadow:var(--shadow-md);
  transform:translateY(-1px);
}
.feature-card__icon {
  width:3rem;height:3rem;border-radius:var(--r-xl);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:var(--sp-4);
}
.feature-card__icon--indigo  { background:#eef2ff;color:#4f46e5; }
.feature-card__icon--amber   { background:#fffbeb;color:#d97706; }
.feature-card__icon--emerald { background:#ecfdf5;color:#059669; }
.feature-card__icon--sky     { background:#f0f9ff;color:#0284c7; }
.feature-card__icon--rose    { background:#fff1f2;color:#e11d48; }
.feature-card__icon--teal    { background:#f0fdfa;color:#0d9488; }
.feature-card__icon--violet  { background:#f5f3ff;color:#7c3aed; }
.feature-card__icon--orange  { background:#fff7ed;color:#ea580c; }

.feature-card__title {
  font-size:var(--fs-base);font-weight:var(--fw-semibold);
  color:var(--c-text);margin-bottom:var(--sp-2);letter-spacing:-.01em;
}
.feature-card__desc {
  font-size:var(--fs-sm);color:var(--c-text-muted);line-height:var(--lh-normal);
}

/* Büyük özellik kartı (özellikler sayfası) */
.feature-lg-card {
  display:grid;grid-template-columns:1fr;gap:var(--sp-8);
  padding:var(--sp-8) var(--sp-6);
  background:var(--c-bg);
  border:1.5px solid var(--c-border);
  border-radius:var(--r-2xl);
  transition:box-shadow var(--tr-slow);
}
.feature-lg-card:hover { box-shadow:var(--shadow-lg); }
.feature-lg-card__icon {
  width:3.5rem;height:3.5rem;border-radius:var(--r-xl);
  display:flex;align-items:center;justify-content:center;
}
.feature-lg-card__title {
  font-size:var(--fs-xl);font-weight:var(--fw-bold);
  letter-spacing:-.02em;color:var(--c-text);margin-bottom:var(--sp-3);
}
.feature-lg-card__desc {
  font-size:var(--fs-base);color:var(--c-text-muted);
  line-height:var(--lh-loose);margin-bottom:var(--sp-4);
}
.feature-lg-card__points { display:flex;flex-direction:column;gap:var(--sp-2); }
.feature-point {
  display:flex;align-items:flex-start;gap:var(--sp-3);
  font-size:var(--fs-sm);color:var(--c-text-muted);line-height:var(--lh-snug);
}
.feature-point__check {
  flex-shrink:0;width:1.25rem;height:1.25rem;
  border-radius:50%;background:var(--c-brand-light);
  display:flex;align-items:center;justify-content:center;
  color:var(--c-brand);margin-top:1px;
}

/* ============================================================
   16. NASIL ÇALIŞIR (Detaylı)
   ============================================================ */
.how-it-works {
  padding:var(--sp-16) var(--sp-4);
  background:var(--c-bg-subtle);
  border-top:1px solid var(--c-border);
  border-bottom:1px solid var(--c-border);
}
.how-section { padding:var(--sp-16) var(--sp-4);background:var(--c-bg); }

/* Eski steps (anasayfa) */
.steps { display:flex;flex-direction:column;gap:var(--sp-8); }
.step  { display:flex;align-items:flex-start;gap:var(--sp-4); }
.step__num {
  width:2.25rem;height:2.25rem;border-radius:50%;
  background:var(--c-brand);color:#fff;
  font-weight:var(--fw-bold);font-size:var(--fs-sm);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 4px 12px rgba(79,70,229,.3);
}
.step__body {}
.step__title { font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--c-text);margin-bottom:var(--sp-1); }
.step__desc  { font-size:var(--fs-sm);color:var(--c-text-muted);line-height:var(--lh-normal); }
.how-it-works__cta { text-align:center;margin-top:var(--sp-12); }

/* Yeni step-flow (nasıl çalışır sayfası) */
.step-flow { display:flex;flex-direction:column;gap:0; }
.step-detail {
  display:grid;grid-template-columns:auto 1fr;gap:var(--sp-6);
  padding:var(--sp-8) 0;
  border-bottom:1px solid var(--c-border);
  position:relative;
}
.step-detail:last-child { border-bottom:none; }
.step-detail__left { display:flex;flex-direction:column;align-items:center;gap:0; }
.step-detail__num {
  width:3rem;height:3rem;border-radius:50%;
  background:var(--c-brand-gradient);color:#fff;
  font-weight:var(--fw-black);font-size:var(--fs-base);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:var(--shadow-brand);
  position:relative;z-index:1;
}
.step-detail__line {
  flex:1;width:2px;
  background:linear-gradient(to bottom,var(--c-brand-border),transparent);
  margin-top:var(--sp-3);min-height:2rem;
}
.step-detail:last-child .step-detail__line { display:none; }
.step-detail__body {}
.step-detail__label {
  font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--c-brand);margin-bottom:var(--sp-2);
}
.step-detail__title {
  font-size:var(--fs-xl);font-weight:var(--fw-bold);
  letter-spacing:-.02em;color:var(--c-text);margin-bottom:var(--sp-3);
}
.step-detail__desc {
  font-size:var(--fs-base);color:var(--c-text-muted);
  line-height:var(--lh-loose);margin-bottom:var(--sp-4);
}
.step-detail__tip {
  display:flex;align-items:flex-start;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  background:var(--c-brand-light);
  border:1px solid var(--c-brand-border);
  border-radius:var(--r-lg);
  font-size:var(--fs-xs);color:var(--c-brand-text);
  line-height:var(--lh-snug);
}
.step-detail__tip svg { flex-shrink:0;margin-top:1px; }

/* ============================================================
   17. SSS (Temel + Detaylı)
   ============================================================ */
.faq         { padding:var(--sp-16) var(--sp-4);background:var(--c-bg); }
.faq-section-wrap { padding:var(--sp-16) var(--sp-4);background:var(--c-bg); }

.faq-list { display:flex;flex-direction:column;gap:var(--sp-2); }

.faq-item {
  border:1.5px solid var(--c-border);
  border-radius:var(--r-xl);overflow:hidden;
  transition:border-color var(--tr),box-shadow var(--tr);
}
.faq-item:hover { box-shadow:var(--shadow-xs); }
.faq-item--open { border-color:var(--c-brand-border);box-shadow:var(--shadow-sm); }

.faq-item__trigger {
  width:100%;display:flex;align-items:center;
  justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5);
  background:var(--c-bg);text-align:left;cursor:pointer;
  transition:background var(--tr);
}
.faq-item__trigger:hover { background:var(--c-bg-subtle); }
.faq-item--open .faq-item__trigger { background:var(--c-brand-light); }

.faq-item__question {
  font-size:var(--fs-sm);font-weight:var(--fw-semibold);
  color:var(--c-text);line-height:var(--lh-snug);
}
.faq-item--open .faq-item__question { color:var(--c-brand-text); }

.faq-item__icon {
  flex-shrink:0;width:1.25rem;height:1.25rem;
  color:var(--c-text-light);
  transition:transform var(--tr),color var(--tr);
}
.faq-item--open .faq-item__icon { transform:rotate(180deg);color:var(--c-brand); }

.faq-item__answer {
  padding:0 var(--sp-5) var(--sp-5);
  font-size:var(--fs-sm);color:var(--c-text-muted);
  line-height:var(--lh-loose);
  border-top:1px solid var(--c-brand-border);
}
.faq-item__answer strong { color:var(--c-text); }
.faq-item__answer code {
  font-size:.85em;background:#f1f5f9;
  padding:.1em .4em;border-radius:3px;font-family:monospace;
}
.faq-item__answer a { color:var(--c-brand);text-decoration:underline; }

/* FAQ Arama */
.faq-search-box {
  position:relative;margin-bottom:var(--sp-8);
}
.faq-search-box__icon {
  position:absolute;left:var(--sp-4);top:50%;transform:translateY(-50%);
  color:var(--c-text-light);pointer-events:none;
}
.faq-search-input {
  width:100%;padding:.875rem .875rem .875rem 3rem;
  border:2px solid var(--c-border);border-radius:var(--r-xl);
  background:var(--c-bg);font-size:var(--fs-base);color:var(--c-text);
  transition:border-color var(--tr),box-shadow var(--tr);
  appearance:none;
}
.faq-search-input:focus {
  outline:none;border-color:var(--c-brand);
  box-shadow:0 0 0 4px rgba(79,70,229,.08);
}
.faq-search-input::placeholder { color:var(--c-text-light); }
.faq-search-clear {
  position:absolute;right:var(--sp-4);top:50%;transform:translateY(-50%);
  width:1.75rem;height:1.75rem;
  border-radius:50%;background:var(--c-bg-muted);
  display:flex;align-items:center;justify-content:center;
  color:var(--c-text-muted);cursor:pointer;
  transition:background var(--tr),color var(--tr);
}
.faq-search-clear:hover { background:var(--c-border);color:var(--c-text); }

.faq-category { margin-bottom:var(--sp-10); }
.faq-category__title {
  font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  text-transform:uppercase;letter-spacing:.09em;
  color:var(--c-text-muted);margin-bottom:var(--sp-4);
  padding-bottom:var(--sp-3);
  border-bottom:1px solid var(--c-border);
  display:flex;align-items:center;gap:var(--sp-2);
}
.faq-no-results {
  text-align:center;padding:var(--sp-12) 0;
}
.faq-no-results__icon { font-size:2.5rem;margin-bottom:var(--sp-3); }
.faq-no-results__title { font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--c-text);margin-bottom:var(--sp-2); }
.faq-no-results__desc  { font-size:var(--fs-sm);color:var(--c-text-muted); }

/* ============================================================
   18. FOOTER
   ============================================================ */
.site-footer {
  background:  var(--c-footer-bg);
  padding:     var(--sp-10) var(--sp-4) var(--sp-8);
  border-top:  1px solid var(--c-footer-border);
}
.site-footer__inner {
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-6);
}
.site-footer__brand {
  display:flex;align-items:center;gap:var(--sp-3);
}
.site-footer__logo {
  font-size:var(--fs-lg);font-weight:var(--fw-black);
  letter-spacing:-.03em;color:#fff;
}
.site-footer__logo span { color:#818cf8; }
.site-footer__tagline   { font-size:var(--fs-xs);color:rgba(255,255,255,.3); }
.site-footer__sep {
  display:inline-block;width:1px;height:.75rem;
  background:rgba(255,255,255,.12);
}
.site-footer__nav {
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--sp-4);
}
.site-footer__nav a {
  font-size:var(--fs-xs);color:rgba(255,255,255,.35);
  transition:color var(--tr);
}
.site-footer__nav a:hover { color:rgba(255,255,255,.7); }
.site-footer__copy {
  font-size:var(--fs-xs);color:rgba(255,255,255,.2);text-align:center;
}

/* ============================================================
   19. HUKUK SAYFALARI
   ============================================================ */
.legal-hero {
  background:var(--c-hero-bg);
  padding:var(--sp-12) var(--sp-4) var(--sp-10);
  border-bottom:1px solid var(--c-footer-border);
  position:relative;overflow:hidden;
}
.legal-hero::before {
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(79,70,229,.12) 0%,transparent 65%);
  pointer-events:none;
}
.legal-hero__back {
  display:inline-flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-xs);font-weight:var(--fw-medium);
  color:rgba(255,255,255,.4);margin-bottom:var(--sp-5);
  transition:color var(--tr);position:relative;
}
.legal-hero__back:hover { color:rgba(255,255,255,.8); }
.legal-hero__title {
  font-size:var(--fs-3xl);font-weight:var(--fw-bold);
  letter-spacing:-.03em;color:#fff;margin-bottom:var(--sp-2);
  position:relative;
}
.legal-hero__meta { font-size:var(--fs-sm);color:rgba(255,255,255,.35);position:relative; }

.legal-body   { padding:var(--sp-12) var(--sp-4) var(--sp-20); }
.legal-content { max-width:720px;margin-inline:auto; }
.legal-content h2 {
  font-size:var(--fs-lg);font-weight:var(--fw-bold);
  color:var(--c-text);margin-top:var(--sp-10);margin-bottom:var(--sp-3);
  letter-spacing:-.015em;
}
.legal-content h2:first-child { margin-top:0; }
.legal-content h3 {
  font-size:var(--fs-base);font-weight:var(--fw-semibold);
  color:var(--c-text);margin-top:var(--sp-6);margin-bottom:var(--sp-2);
}
.legal-content p {
  font-size:var(--fs-base);color:var(--c-text-muted);
  line-height:var(--lh-loose);margin-bottom:var(--sp-4);
}
.legal-content ul {
  list-style:disc;padding-left:var(--sp-6);margin-bottom:var(--sp-4);
}
.legal-content li {
  font-size:var(--fs-base);color:var(--c-text-muted);
  line-height:var(--lh-loose);margin-bottom:var(--sp-2);
}
.legal-content a            { color:var(--c-brand);text-decoration:underline; }
.legal-content a:hover      { color:var(--c-brand-hover); }
.legal-content address      { font-style:normal; }
.legal-content .highlight-box {
  padding:var(--sp-5);background:var(--c-brand-light);
  border:1px solid var(--c-brand-border);border-radius:var(--r-lg);
  margin-bottom:var(--sp-6);
}
.legal-content .highlight-box p { font-size:var(--fs-sm);color:var(--c-brand-text);margin-bottom:0; }

.legal-table { width:100%;border-collapse:collapse;margin:var(--sp-4) 0 var(--sp-6);font-size:var(--fs-sm); }
.legal-table th,.legal-table td {
  text-align:left;padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--c-border);vertical-align:top;
}
.legal-table th { font-weight:var(--fw-semibold);color:var(--c-text);background:#f8fafc; }
.legal-table td { color:var(--c-text-muted); }
.legal-table code {
  font-size:.8em;background:#f1f5f9;
  padding:.1em .35em;border-radius:3px;
}

/* ============================================================
   20. 404 SAYFASI
   ============================================================ */
.notfound {
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:var(--sp-8) var(--sp-4);
  background:var(--c-hero-bg);text-align:center;
}
.notfound__code {
  font-size:6rem;font-weight:var(--fw-black);
  letter-spacing:-.06em;color:rgba(255,255,255,.05);line-height:1;
  margin-bottom:var(--sp-2);
}
.notfound__logo {
  font-size:var(--fs-2xl);font-weight:var(--fw-black);
  letter-spacing:-.04em;color:#fff;margin-bottom:var(--sp-2);
}
.notfound__logo span { color:#818cf8; }
.notfound__msg {
  font-size:var(--fs-sm);color:rgba(255,255,255,.35);
  margin-bottom:var(--sp-8);max-width:32ch;line-height:var(--lh-normal);
}
.notfound__btn {
  display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-6);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg);color:rgba(255,255,255,.7);
  font-size:var(--fs-sm);font-weight:var(--fw-medium);
  transition:background var(--tr),border-color var(--tr),color var(--tr);
}
.notfound__btn:hover { background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.25);color:#fff; }

/* ============================================================
   21. ANİMASYONLAR
   ============================================================ */
@keyframes spin {
  to { transform:rotate(360deg); }
}
@keyframes pulse {
  0%,100% { opacity:1;transform:scale(1); }
  50%      { opacity:.7;transform:scale(.85); }
}
@keyframes heroGlow {
  from { opacity:.6;transform:translateX(-50%) scale(.9); }
  to   { opacity:1;transform:translateX(-50%) scale(1.1); }
}
@keyframes fadeInUp {
  from { opacity:0;transform:translateY(16px); }
  to   { opacity:1;transform:translateY(0); }
}
@keyframes fadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}

.fade-in        { animation:fadeIn    .3s ease both; }
.fade-in-up     { animation:fadeInUp  .4s ease both; }
.animate-stagger > * { animation:fadeInUp .45s ease both; }
.animate-stagger > *:nth-child(1) { animation-delay:.05s; }
.animate-stagger > *:nth-child(2) { animation-delay:.10s; }
.animate-stagger > *:nth-child(3) { animation-delay:.15s; }
.animate-stagger > *:nth-child(4) { animation-delay:.20s; }
.animate-stagger > *:nth-child(5) { animation-delay:.25s; }
.animate-stagger > *:nth-child(6) { animation-delay:.30s; }
.animate-stagger > *:nth-child(7) { animation-delay:.35s; }
.animate-stagger > *:nth-child(8) { animation-delay:.40s; }

/* ============================================================
   22. YARDIMCI SINIFLAR
   ============================================================ */
.sr-only {
  position:absolute;width:1px;height:1px;padding:0;
  margin:-1px;overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border-width:0;
}
.text-center { text-align:center; }
.text-left   { text-align:left; }
.mt-auto     { margin-top:auto; }
.divider {
  height:1px;background:var(--c-border);
  border:none;margin:var(--sp-8) 0;
}

/* ============================================================
   23. MEDYA SORGULARI — sm (480px)
   ============================================================ */
@media (min-width:480px) {
  .form-card { padding:var(--sp-6) var(--sp-7); }
  .hero__heading { font-size:var(--fs-5xl); }
  .stats-strip__grid { grid-template-columns:repeat(4,1fr); }
  .cta-band__actions { flex-direction:row;justify-content:center; }
  .cta-band__title { font-size:var(--fs-4xl); }
}

/* ============================================================
   24. MEDYA SORGULARI — md (768px)
   ============================================================ */
@media (min-width:768px) {
  .site-header__nav { display:flex; }
  .hamburger        { display:none; }

  .hero { padding:var(--sp-24) var(--sp-4) var(--sp-16); }

  .teaser-grid      { grid-template-columns:repeat(3,1fr); }
  .features-grid    { grid-template-columns:repeat(2,1fr); }

  /* Ana sayfa adımlar yatay */
  .steps {
    flex-direction:row;align-items:flex-start;justify-content:center;
  }
  .step {
    flex-direction:column;align-items:center;text-align:center;
    flex:1;max-width:220px;
  }

  /* Büyük feature kartı 2 sütun */
  .feature-lg-card { grid-template-columns:auto 1fr; }

  .section-title { font-size:var(--fs-3xl); }

  .page-hero { padding:var(--sp-16) var(--sp-4) var(--sp-12); }
  .page-hero__title { font-size:var(--fs-5xl); }

  .step-detail { grid-template-columns:auto 1fr; }

  .site-footer__inner { flex-direction:row;justify-content:space-between; }
  .site-footer__nav   { justify-content:flex-start; }
}

/* ============================================================
   25. MEDYA SORGULARI — lg (1024px)
   ============================================================ */
@media (min-width:1024px) {
  .features-grid { grid-template-columns:repeat(4,1fr); }
  .hero__heading  { font-size:var(--fs-6xl); }
  .hero__content  { max-width:var(--container-sm); }
  .form-card      { padding:var(--sp-8) var(--sp-8); }
}

/* ============================================================
   26. YAZICI
   ============================================================ */
@media print {
  .site-header,.site-footer { display:none; }
  body { font-size:12pt;color:#000; }
  a    { text-decoration:underline; }
}

/* ============================================================
   27. FRONTEND V3 — Mobil İyileştirmeler & Yeni Özellikler
   ============================================================ */

/* Evrensel tap highlight kaldır (eklenmiş olmayanlar için) */
a, button { -webkit-tap-highlight-color: transparent; }

/* Küçük ekranlarda hero alt metin kırılmasını kaldır */
@media (max-width: 479px) {
  .hero__lead br { display: none; }
}

/* Minimum dokunma hedefi — Apple HIG: 44×44dp */
@media (pointer: coarse) {
  .btn, .validity-btn { min-height: 44px; }
  .btn-shorten        { min-height: 52px; }
  .recent-link-item__copy,
  .recent-link-item__share { width: 2.5rem; height: 2.5rem; }
}

/* ── Input sağ butonlar: Temizle (×) + Yapıştır ────────────────────── */
.input-right-btns {
  position:       absolute;
  right:          var(--sp-3);
  top:            50%;
  transform:      translateY(-50%);
  display:        flex;
  align-items:    center;
  gap:            var(--sp-1);
  pointer-events: all;
  z-index:        2;
}

.btn-clear {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           1.5rem;
  height:          1.5rem;
  border-radius:   50%;
  background:      var(--c-bg-muted);
  color:           var(--c-text-muted);
  flex-shrink:     0;
  transition:      background var(--tr), color var(--tr);
}
.btn-clear:hover { background: var(--c-border-dark); color: var(--c-text); }

.btn-paste {
  display:       inline-flex;
  align-items:   center;
  padding:       .275rem .6rem;
  border:        1px solid var(--c-brand-border);
  border-radius: var(--r-sm);
  background:    var(--c-brand-light);
  color:         var(--c-brand-text);
  font-size:     .7rem;
  font-weight:   var(--fw-semibold);
  white-space:   nowrap;
  transition:    all var(--tr);
}
.btn-paste:hover { background: var(--c-brand); color: #fff; }

/* Input — sağda buton olunca ekstra padding */
.input--has-action { padding-right: 5.25rem; }

/* ── Hata görseli — silkeleme animasyonu ──────────────────────── */
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-7px); }
  40%     { transform: translateX(7px); }
  60%     { transform: translateX(-4px); }
  80%     { transform: translateX(4px); }
}
.form-error--shake { animation: shake .38s ease; }

/* ── Son Linkler — Paylaş butonu ────────────────────────────── */
.recent-link-item__share {
  flex-shrink:     0;
  width:           2rem;
  height:          2rem;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border-radius:   var(--r-md);
  color:           var(--c-text-light);
  transition:      color var(--tr), background var(--tr);
}
.recent-link-item__share:hover { color: var(--c-brand); background: var(--c-brand-light); }

/* ── Sonuç — QR Kod Bölümü ──────────────────────────────────── */
.result-divider {
  height:     1px;
  background: var(--c-border);
  margin:     var(--sp-5) 0;
  border:     none;
}

.result-qr {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             var(--sp-4);
  padding:         var(--sp-2) 0;
}

.result-qr__label {
  font-size:      var(--fs-xs);
  font-weight:    var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: .07em;
  color:          var(--c-text-muted);
}

.result-qr__wrap {
  display:       inline-flex;
  border-radius: var(--r-xl);
  overflow:      hidden;
  box-shadow:    var(--shadow-md);
  border:        5px solid #fff;
  background:    #fff;
  transition:    box-shadow var(--tr-slow);
}
.result-qr__wrap:hover { box-shadow: var(--shadow-lg); }
.result-qr__wrap canvas,
.result-qr__wrap img {
  display: block;
  width:   160px !important;
  height:  160px !important;
}

.result-qr__actions {
  display:         flex;
  gap:             var(--sp-2);
  flex-wrap:       wrap;
  justify-content: center;
}

.btn-qr-download,
.btn-qr-share {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--sp-2);
  padding:         .625rem var(--sp-4);
  border-radius:   var(--r-md);
  font-size:       var(--fs-xs);
  font-weight:     var(--fw-semibold);
  line-height:     1;
  cursor:          pointer;
  border:          none;
  white-space:     nowrap;
  min-height:      38px;
  transition:      all var(--tr);
}

.btn-qr-download {
  background: var(--c-bg-subtle);
  color:      var(--c-text-muted);
  border:     1.5px solid var(--c-border);
}
.btn-qr-download:hover {
  border-color: var(--c-brand-border);
  color:        var(--c-brand);
  background:   var(--c-brand-light);
}

.btn-qr-share {
  background: var(--c-brand-gradient);
  color:      #fff;
  box-shadow: 0 2px 8px rgba(79,70,229,.20);
}
.btn-qr-share:hover  { box-shadow: var(--shadow-brand); filter: brightness(1.06); }
.btn-qr-share:active { transform: scale(.98); }