/* =========================================================================
 * ETKİLEŞİM KATMANI
 *
 * Sitedeki tıklanabilir her öğenin üzerine gelme ve basma hissinin tek sahibi
 * bu dosyadır. En son yüklenir; bu yüzden başka bir dosyadaki kural bunu
 * ezemez. Yeni bir tıklanabilir bileşen eklenince buraya da eklenir.
 *
 * Kural seti:
 *   üzerine gelince  -> yükselir ve renklenir
 *   basınca          -> hafifçe çöker, geri bildirim anlık olsun diye hızlanır
 *   klavyeyle gelince-> turkuaz odak halkası
 *
 * Üzerine gelme etkileri @media (hover:hover) içinde; dokunmatik ekranda
 * hover durumu dokunduktan sonra takılı kalmasın diye.
 * ========================================================================= */

:root{
  --gecis:.18s cubic-bezier(.2,.7,.3,1);
  --gecis-basma:.06s ease-out;
  --halka:0 0 0 3px rgba(34,211,238,.35);
}

/* ---- 1. ortak: imleç ve dokunma vurgusu ---- */
a,button,summary,[role="button"],label.secim,.secim,.filtre-rozet{
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
button[disabled],button:disabled,.btn:disabled,.buton:disabled{cursor:not-allowed}

/* ---- 2. odak halkası (klavye) ---- */
a:focus-visible,button:focus-visible,summary:focus-visible,
[role="button"]:focus-visible,.secim:focus-within,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid #22D3EE;
  outline-offset:3px;
}

/* =========================================================================
 * 3. YÜZEY ÖĞELERİ — düğmeler, kartlar, ikon düğmeleri
 *    Bunlar yükselir ve basınca çöker.
 * ========================================================================= */
.btn,.buton,
.hizmet,.arac,.yazi-kart,.kapsam-kart,.tool-kart,
.kaydir-ok,.menu-ac,.secim,.filtre-rozet,
.navigation.pagination a{
  transition:background var(--gecis),border-color var(--gecis),color var(--gecis),
             box-shadow var(--gecis),transform var(--gecis);
  will-change:transform;
}

@media (hover:hover){
  .btn:hover,.buton:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(4,38,46,.22)}
  .btn-koyu:hover{box-shadow:0 10px 22px rgba(8,13,20,.3)}

  .hizmet:hover,.arac:hover,.yazi-kart:hover,.kapsam-kart:hover,.tool-kart:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 34px rgba(12,22,32,.12);
  }

  .kaydir-ok:hover,.menu-ac:hover{transform:translateY(-1px)}
  .secim:hover{border-color:#22D3EE}
  .filtre-rozet:hover{transform:translateY(-1px)}
  .navigation.pagination a:hover{transform:translateY(-2px)}
}

/* basma: her cihazda, dokunmatik dahil */
.btn:active,.buton:active{
  transform:translateY(0) scale(.97);
  box-shadow:none;
  transition-duration:var(--gecis-basma);
}
.hizmet:active,.arac:active,.yazi-kart:active,.kapsam-kart:active,.tool-kart:active,
.durum:active{
  transform:translateY(-1px) scale(.994);
  box-shadow:0 6px 14px rgba(12,22,32,.1);
  transition-duration:var(--gecis-basma);
}
.kaydir-ok:active,.menu-ac:active,.filtre-rozet:active,.navigation.pagination a:active{
  transform:scale(.9);
  transition-duration:var(--gecis-basma);
}
.secim:active{transform:scale(.97);transition-duration:var(--gecis-basma)}

/* devre dışı düğme hiçbir his vermez */
.btn:disabled:hover,.buton:disabled:hover,
.btn:disabled:active,.buton:disabled:active,
.btn[disabled]:hover,.buton[disabled]:hover,
.btn[disabled]:active,.buton[disabled]:active{
  transform:none;box-shadow:none;
}

/* =========================================================================
 * 4. SATIR İÇİ BAĞLANTILAR — metin içinde geçen bağlantılar
 *    Bunlar yükselmez; renklenir, altı çizilir, basınca soluklaşır.
 * ========================================================================= */
.yazi-govde a,.olcum-alt a,.zaman-not a,.form-gizlilik a,.form-sonuc a,
.kirinti a,footer a,.kart-oku,.yan-tum,.arac-govde a,.alt-menu a,.menu a,.menu-ust,.marka{
  transition:color var(--gecis),opacity var(--gecis),background var(--gecis),transform var(--gecis);
}

@media (hover:hover){
  .kirinti a:hover,footer a:hover{color:#fff}
  .yazi-govde a:hover,.olcum-alt a:hover{color:#0C1620}
  .kart-oku,.yan-tum,.arac-govde a{display:inline-block}
  .yazi-kart:hover .kart-oku,.arac:hover .arac-govde a{transform:translateX(3px)}
  .yan-tum:hover{transform:translateX(3px)}
  .marka:hover{opacity:.85}
}

.yazi-govde a:active,.olcum-alt a:active,.kirinti a:active,
footer a:active,.yan-tum:active,.marka:active,
.menu a:active,.alt-menu a:active,.menu-ust:active{
  opacity:.65;
  transition-duration:var(--gecis-basma);
}

/* menü maddeleri: basınca hafif çöksün */
.menu a:active,.alt-menu a:active,.menu-ust:active{transform:scale(.97)}

/* =========================================================================
 * 5. AÇILIR BAŞLIKLAR (SSS)
 * ========================================================================= */
summary{transition:color var(--gecis),opacity var(--gecis)}
@media (hover:hover){ summary:hover{color:#0A7C91} }
summary:active{opacity:.7;transition-duration:var(--gecis-basma)}

/* =========================================================================
 * 6. HAREKET AZALTMA TERCİHİ
 *    Kullanıcı sistemde hareketi azalttıysa taşıma ve ölçek kalkar,
 *    geri bildirim renk ve saydamlıkla verilir.
 * ========================================================================= */
@media (prefers-reduced-motion: reduce){
  .btn,.buton,.hizmet,.arac,.yazi-kart,.kapsam-kart,.tool-kart,
  .kaydir-ok,.menu-ac,.secim,.filtre-rozet,.navigation.pagination a,
  .kart-oku,.yan-tum,.menu a,.alt-menu a,.menu-ust,.marka{
    transition-duration:.01ms;
  }
  .btn:hover,.buton:hover,.hizmet:hover,.arac:hover,.yazi-kart:hover,
  .kapsam-kart:hover,.tool-kart:hover,.kaydir-ok:hover,.menu-ac:hover,
  .filtre-rozet:hover,.navigation.pagination a:hover,.yan-tum:hover,
  .yazi-kart:hover .kart-oku,.arac:hover .arac-govde a{transform:none}
  .btn:active,.buton:active,.hizmet:active,.arac:active,.yazi-kart:active,
  .kapsam-kart:active,.tool-kart:active,.kaydir-ok:active,.menu-ac:active,
  .secim:active,.filtre-rozet:active,.navigation.pagination a:active,
  .menu a:active,.alt-menu a:active,.menu-ust:active{transform:none;opacity:.7}
}