/* Moonstone Motors — B · Far. Değerler tokens/tokens.css içinden gelir. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }
body {
  margin: 0;
  background: var(--mm-kirec);
  color: var(--mm-gece-ormani);
  font: var(--mm-govde-agirlik) var(--mm-govde)/var(--mm-govde-satir) var(--mm-yazi);
  -webkit-font-smoothing: antialiased;
  --kenar: var(--mm-sayfa-kenar);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1; }
img { max-width: 100%; display: block; }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
a { color: var(--mm-cam); }
a:hover { color: var(--mm-gece-ormani); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--mm-cam); outline-offset: 3px; border-radius: 6px; }

.kap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--kenar); }
.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.veri { font-family: var(--mm-veri); font-weight: 500; }
.ikincil { color: var(--mm-yosun); }
.ince { font-size: 14px; line-height: 1.5; color: var(--mm-yosun); }
.yer-tutucu { font-family: var(--mm-veri); font-weight: 500; font-size: .94em; }
.js-var { display: none; }
.atla { position: absolute; left: 12px; top: -80px; z-index: 10; background: var(--mm-gece-ormani); color: #fff; padding: 12px 18px; border-radius: 22px; font-weight: 700; }
.atla:focus { top: 12px; color: #fff; }

h1, h2 { font-weight: var(--mm-baslik-agirlik); letter-spacing: var(--mm-baslik-aralik); }
h1 { font-size: var(--mm-sayfa-basligi); line-height: 1.04; }
h2 { font-size: var(--mm-bolum-basligi); line-height: 1.1; letter-spacing: -.025em; }

/* Logo: iki "o" bir çift far */
.logo { display: inline-flex; align-items: baseline; color: var(--mm-gece-ormani); }
.logo-soz { display: inline-flex; align-items: baseline; font-weight: 800; font-size: 26px; line-height: 1; letter-spacing: var(--mm-logo-aralik); }
.far { display: inline-block; width: var(--mm-logo-daire); height: var(--mm-logo-daire); border-radius: 50%; margin: 0 var(--mm-logo-daire-bosluk); }
.far-sol { background: var(--mm-cam); }
.far-sag { background: var(--mm-yesil-isik); box-shadow: inset 0 0 0 var(--mm-logo-kontur) var(--mm-gece-ormani); }
.logo-motors { font-weight: 600; font-size: 11px; letter-spacing: .3em; color: var(--mm-cam); margin-left: 8px; }
.logo-bag { text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }

/* Butonlar */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--mm-buton-yukseklik); padding: 0 28px; border: 0; border-radius: var(--mm-buton-yaricap);
  font: 700 17px/1 var(--mm-yazi); text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color .15s, color .15s, transform .15s;
}
.btn:active { transform: scale(.98); }
.btn-birincil { background: var(--mm-cam); color: #fff; }
.btn-birincil:hover { background: var(--mm-gece-ormani); color: #fff; }
.btn-ikincil { height: var(--mm-ikincil-yukseklik); border-radius: 26px; background: var(--mm-yesil-isik); color: var(--mm-gece-ormani); font-size: 16px; }
.btn-ikincil:hover { background: #d6f765; color: var(--mm-gece-ormani); }
.btn-cerceve { height: var(--mm-ikincil-yukseklik); border-radius: 26px; background: transparent; color: var(--mm-cam); box-shadow: inset 0 0 0 1.5px var(--mm-cam); font-size: 16px; }
.btn-cerceve:hover { background: var(--mm-cam); color: #fff; }
.btn-kucuk { height: 44px; padding: 0 20px; border-radius: 22px; font-size: 14px; }
.bag { background: none; border: 0; padding: 14px 0; color: var(--mm-cam); font: 700 14px/1 var(--mm-yazi); cursor: pointer; text-decoration: underline; }
.yuvarlak { width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--mm-cam); display: inline-flex; align-items: center; justify-content: center; }
.hap { display: inline-flex; align-self: flex-start; padding: 8px 14px; border-radius: 20px; font-weight: 700; font-size: 13px; line-height: 1.3; }
.hap-lime { background: var(--mm-yesil-isik); }
.kart { background: #fff; border-radius: 20px; padding: 18px 16px; }
.kart-baslik { font-size: 16px; font-weight: 700; letter-spacing: 0; line-height: 1.3; }

/* Çift far motifi */
.cift-far { display: flex; gap: 8px; }
.cift-far span { width: 22px; height: 22px; border-radius: 50%; background: var(--mm-cam); }
.cift-far span:last-child { background: var(--mm-yesil-isik); box-shadow: inset 0 0 0 2px var(--mm-gece-ormani); }
.cift-far.buyuk span { width: 56px; height: 56px; }
.cift-far.buyuk span:last-child { box-shadow: inset 0 0 0 5px var(--mm-gece-ormani); }

/* Üst bölüm */
.ust-ic { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.ust-nav { display: none; gap: 4px; }
.ust-nav a { padding: 12px 14px; border-radius: 22px; color: var(--mm-gece-ormani); text-decoration: none; font-weight: 600; font-size: 15px; }
.ust-nav a:hover { background: #fff; }
.ust-eylem { display: flex; align-items: center; gap: 10px; }
.ust-cta { display: none; }

/* Kahraman */
.kahraman { display: grid; gap: 16px; padding-top: 20px; }
.kahraman-metin { display: flex; flex-direction: column; gap: 16px; }
.vaat { max-width: 12ch; }
.giris { color: var(--mm-yosun); max-width: 46ch; }
.sahne { position: relative; aspect-ratio: 390 / 204; margin-inline: calc(var(--kenar) * -1); container-type: inline-size; }
.sahne-lime { position: absolute; right: 9.2%; top: 0; width: 48.2%; aspect-ratio: 1; border-radius: 50%; background: var(--mm-yesil-isik); }
.sahne-halka { position: absolute; left: 14.9%; top: 17.6%; width: 33.8%; aspect-ratio: 1; border-radius: 50%; border: 14px solid var(--mm-cam); border-width: 3.6cqw; }
.sahne-golge { position: absolute; left: 9.2%; right: 9.2%; bottom: 2%; height: 7.8%; border-radius: 50%; background: rgba(15, 42, 34, .28); filter: blur(8px); }
.sahne img { position: absolute; left: 2%; bottom: 4.9%; width: 95.9%; height: auto; }
.rozetler { display: flex; gap: 8px; flex-wrap: wrap; }
.rozetler li { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-radius: 20px; background: #fff; font-weight: 600; font-size: 13px; line-height: 1.3; }
.rozetler li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mm-cam); }

/* Form */
.form-kart { background: #fff; border-radius: var(--mm-panel-yaricap); padding: 20px; margin-top: 6px; scroll-margin-top: 16px; }
.form, .adim { display: flex; flex-direction: column; gap: 16px; }
.adimlar { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; line-height: 1; }
.adim-g { display: flex; align-items: center; gap: 8px; color: var(--mm-yosun); }
.adim-no { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--mm-cizgi); display: grid; place-items: center; }
.adim-no .onay { display: none; }
.adim-cizgi { flex: 1; height: 3px; border-radius: 2px; background: var(--mm-cizgi); }
.form[data-etkin="1"] [data-g="1"], .form[data-etkin="2"] .adim-g { color: var(--mm-gece-ormani); }
.form[data-etkin="1"] [data-g="1"] .adim-no, .form[data-etkin="2"] [data-g="2"] .adim-no { background: var(--mm-cam); border-color: var(--mm-cam); color: #fff; }
.form[data-etkin="2"] [data-g="1"] .adim-no { background: var(--mm-yesil-isik); border-color: var(--mm-gece-ormani); color: var(--mm-gece-ormani); }
.form[data-etkin="2"] [data-g="1"] .no { display: none; }
.form[data-etkin="2"] [data-g="1"] .onay { display: block; }
.form[data-etkin="2"] .adim-cizgi { background: var(--mm-cam); }
.js .form[data-etkin="1"] .adim[data-adim="2"], .js .form[data-etkin="2"] .adim[data-adim="1"] { display: none; }
.js .btn.js-var, .js .ozet.js-var { display: flex; }
.adim-baslik { font-size: 26px; margin-top: 4px; }
.adim-baslik:focus { outline: none; }

.alan { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.alan label, .secim legend { font-weight: 600; font-size: var(--mm-etiket); line-height: 1.4; color: var(--mm-yosun); }
.istege-bagli { font-weight: 500; opacity: .8; }
.istege-bagli::before { content: "· "; }
.alan input, .alan select {
  width: 100%; height: var(--mm-alan-yukseklik); padding: 0 16px;
  background: var(--mm-kirec); color: var(--mm-gece-ormani);
  border: 1.5px solid var(--mm-cizgi); border-radius: var(--mm-alan-yaricap);
  font: 500 16px var(--mm-yazi); appearance: none; -webkit-appearance: none;
}
.alan input.veri { font-family: var(--mm-veri); }
.alan input::placeholder { color: var(--mm-yosun); opacity: .75; }
.alan select { padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F5C43' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 20px; }
.alan select:invalid { color: var(--mm-yosun); }
.alan input:focus, .alan select:focus { outline: none; border-color: var(--mm-cam); box-shadow: 0 0 0 3px rgba(15, 92, 67, .16); }
.hatali input, .hatali select { border-color: #A8321F; }
.hata { font-size: 13px; line-height: 1.4; font-weight: 600; color: #A8321F; }
.ikili { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-not { font-size: 12px; line-height: 1.5; color: var(--mm-yosun); text-align: center; }
.form-uyari { background: #FBEDE9; color: #7A2416; border-radius: 16px; padding: 12px 16px; font-size: 14px; line-height: 1.45; font-weight: 600; }
.form .btn { width: 100%; }

.secim { display: flex; flex-direction: column; gap: 8px; }
.secim legend { margin-bottom: 8px; }
.etiketler { display: flex; gap: 8px; flex-wrap: wrap; }
.etiket { position: relative; display: inline-flex; }
.etiketler.esit .etiket { flex: 1; }
.etiket input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.etiket span { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; padding: 0 16px; border-radius: var(--mm-etiket-yaricap); background: #fff; box-shadow: inset 0 0 0 1.5px var(--mm-cizgi); font-weight: 600; font-size: 14px; line-height: 1; white-space: nowrap; transition: background-color .15s, color .15s; }
.etiket input:checked + span { background: var(--mm-cam); color: #fff; box-shadow: none; }
.etiket input:focus-visible + span { outline: 3px solid var(--mm-cam); outline-offset: 3px; }
.onay-alani { display: flex; flex-direction: column; gap: 6px; }
.onay-kutu { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; font-size: 13px; line-height: 1.5; color: var(--mm-yosun); cursor: pointer; }
.onay-kutu input { width: 22px; height: 22px; margin: 0; flex-shrink: 0; accent-color: var(--mm-cam); }
.ozet { align-items: center; justify-content: space-between; gap: 12px; background: var(--mm-kirec); border-radius: 20px; padding: 6px 16px; }
.ozet > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-block: 8px; }
.ozet strong { font-weight: 700; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.ozet .veri { font-size: 13px; line-height: 1.3; color: var(--mm-yosun); }
.bal { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Bölümler */
.bolum { padding-top: 44px; display: flex; flex-direction: column; gap: 20px; }
.surec-adim { position: relative; display: flex; gap: 14px; padding-bottom: 22px; }
.surec-adim:last-child { padding-bottom: 0; }
.surec-adim:not(:last-child)::after { content: ""; position: absolute; left: 16.5px; top: 42px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--mm-cizgi); }
.surec-no { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--mm-cam); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 15px; line-height: 1; }
.surec-adim:last-child .surec-no { background: var(--mm-yesil-isik); color: var(--mm-gece-ormani); box-shadow: inset 0 0 0 2px var(--mm-gece-ormani); }
.surec h3 { font-size: var(--mm-kart-basligi); font-weight: 700; line-height: 1.3; }
.surec p { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--mm-yosun); }

.aranan-dis { padding-top: 32px; }
.aranan {
  margin-inline: -8px; border-radius: var(--mm-panel-yaricap); padding: 28px 20px;
  background: linear-gradient(180deg, rgba(15, 42, 34, .82), rgba(15, 42, 34, .95)), url(/gorseller/detay-koyu.jpg) center / cover, var(--mm-gece-ormani);
  color: var(--mm-kirec); display: grid; gap: 14px;
}
.aranan-metin { display: flex; flex-direction: column; gap: 14px; }
.aranan .cift-far span:first-child { background: var(--mm-kirec); }
.aranan .cift-far span:last-child { box-shadow: none; }
.aranan h2 { font-size: 28px; }
.aranan p { font-size: 15px; line-height: 1.5; color: var(--mm-koyu-ikincil); }
.aranan :focus-visible { outline-color: var(--mm-yesil-isik); }
.olcut { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-top: 1px solid var(--mm-koyu-cizgi); font-size: 15px; }
.olcut dt { color: var(--mm-koyu-ikincil); }
.olcut dd { color: var(--mm-yesil-isik); text-align: right; }
.olcut dd strong { font-weight: 700; }
.olcutler.acik .olcut { border-top-color: var(--mm-yumusak); }
.olcutler.acik .olcut:first-child { border-top: 0; }
.olcutler.acik dt { color: var(--mm-yosun); }
.olcutler.acik dd { color: var(--mm-gece-ormani); font-weight: 700; }
.olcutler.acik dd.veri { font-weight: 500; }
.aranan-cta { margin-top: 4px; }

.sss { padding-bottom: 36px; }
.sss:not(:last-child) { padding-bottom: 0; }

/* İletişim: kocaman numara. Lime üstündeki her şey gece ormanı. */
.iletisim-dis { padding-block: 44px 36px; }
.iletisim { margin-inline: -8px; background: var(--mm-yesil-isik); border-radius: var(--mm-panel-yaricap); padding: 28px 20px; display: flex; flex-direction: column; gap: 20px; }
.iletisim-ust { display: flex; flex-direction: column; gap: 14px; }
.hap-koyu { background: var(--mm-gece-ormani); color: var(--mm-kirec); }
.iletisim h2 { font-size: 28px; max-width: 18ch; }
/* Numara her ekranda tek satır: 12 rakam × .54em + 3 boşluk × .28em ≈ 6.75em, panelin iç genişliğine bölünür. */
.dev-numara { display: flex; flex-wrap: nowrap; column-gap: .28em; align-self: flex-start; white-space: nowrap; color: var(--mm-gece-ormani); text-decoration: none; font-size: calc((100vw - 66px) / 6.85); line-height: 1; letter-spacing: -.06em; }
.dev-numara:hover { color: var(--mm-cam); }
.iletisim-eylem { display: flex; flex-direction: column; gap: 10px; }
.btn-koyu { background: var(--mm-gece-ormani); color: #fff; font-size: 16px; }
.btn-koyu:hover { background: var(--mm-cam); color: #fff; }
.btn-cerceve-koyu { background: transparent; color: var(--mm-gece-ormani); box-shadow: inset 0 0 0 1.5px var(--mm-gece-ormani); font-size: 16px; }
.btn-cerceve-koyu:hover { background: var(--mm-gece-ormani); color: #fff; }
.iletisim-posta { align-self: center; padding: 12px 0; color: var(--mm-gece-ormani); font-weight: 700; font-size: 16px; }
.iletisim :focus-visible { outline-color: var(--mm-gece-ormani); }
.sorular { display: flex; flex-direction: column; gap: 10px; }
.soru { background: #fff; border-radius: 20px; padding: 0 18px; }
.soru summary { min-height: 56px; padding-block: 8px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-weight: 700; font-size: 16px; line-height: 1.3; cursor: pointer; list-style: none; }
.soru summary::-webkit-details-marker { display: none; }
.soru-imi::before { content: "+"; font-size: 22px; font-weight: 500; line-height: 1; color: var(--mm-cam); }
.soru[open] .soru-imi::before { content: "−"; }
.soru p { padding-bottom: 18px; font-size: 15px; line-height: 1.5; color: var(--mm-yosun); max-width: 60ch; }

/* Alt bölüm */
.alt { margin-top: 12px; background: #fff; border-radius: var(--mm-panel-yaricap) var(--mm-panel-yaricap) 0 0; font-size: 14px; line-height: 1.6; color: var(--mm-yosun); }
.alt-ic { display: grid; gap: 16px; padding-block: 32px; }
.alt-marka p { display: none; }
.alt-bilgi { display: grid; gap: 12px; }
.alt-nav { display: flex; flex-wrap: wrap; gap: 0 18px; }
.alt-nav a { padding: 12px 0; }
.alt-kunye { font-size: 12px; }
body.sade .alt { margin-top: 40px; }

/* Teşekkürler */
.tesekkur { display: grid; gap: 18px; padding-top: 24px; max-width: 520px; }
.tesekkur-ust, .tesekkur-alt { display: flex; flex-direction: column; gap: 18px; }
.tesekkur h1 { font-size: 36px; line-height: 1.06; }
.yanan-farlar { display: flex; gap: 10px; }
.yanan-farlar span { width: 64px; height: 64px; border-radius: 50%; background: var(--mm-yesil-isik); border: 5px solid var(--mm-gece-ormani); }
.satir-kart { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; font-weight: 600; font-size: 14px; }
.plaka { display: inline-flex; align-items: stretch; border: 2px solid var(--mm-gece-ormani); border-radius: 8px; overflow: hidden; font-size: 16px; line-height: 1; color: var(--mm-gece-ormani); }
.plaka-serit { background: var(--mm-cam); color: #fff; padding: 9px 6px; font-size: 11px; display: flex; align-items: center; }
.plaka-no { padding: 8px 12px; }
.mini-adimlar { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.mini-adimlar li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--mm-yosun); }
.mini-no { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--mm-cam); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12px; line-height: 1; }

/* Satılık araçlar */
.ilanlar, .ilan-detay, .metin { display: flex; flex-direction: column; gap: 16px; padding-top: 12px; }
.ilanlar h1 { font-size: 34px; line-height: 1.06; }
.suzgec { display: flex; gap: 8px; overflow-x: auto; margin-inline: calc(var(--kenar) * -1); padding: 4px var(--kenar); scrollbar-width: none; }
.suzgec::-webkit-scrollbar { display: none; }
.etiket-bag { flex-shrink: 0; display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--mm-cizgi); color: var(--mm-gece-ormani); text-decoration: none; font-weight: 600; font-size: 14px; }
.etiket-bag.secili { background: var(--mm-cam); color: #fff; box-shadow: none; }
.ilan-izgara { display: grid; gap: 16px; }
.ilan { background: #fff; border-radius: var(--mm-kart-yaricap); overflow: hidden; display: flex; flex-direction: column; }
.ilan-foto, .detay-foto { display: block; margin: 8px; aspect-ratio: 358 / 209; border-radius: 18px; overflow: hidden; background: var(--mm-yumusak); }
.ilan-foto img, .detay-foto img { width: 100%; height: 100%; object-fit: cover; }
.foto-yok { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; font-size: 13px; font-weight: 600; color: var(--mm-yosun); }
.ilan-govde { padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ilan-govde h2 { font-size: var(--mm-kart-basligi); font-weight: 700; letter-spacing: 0; line-height: 1.3; }
.ilan-govde h2 a { color: inherit; text-decoration: none; }
.ilan-govde .veri { font-size: 13px; line-height: 1.4; }
.ilan-alt { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 4px; }
.fiyat { font-weight: 800; font-size: 24px; letter-spacing: -.02em; line-height: 1.1; }
.fiyat.buyuk { font-size: 34px; }
.bos { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 28px 20px; }
.sat-serit { margin: 8px -8px 0; background: var(--mm-gece-ormani); color: var(--mm-kirec); border-radius: var(--mm-kart-yaricap); padding: 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.sat-serit p { font-weight: 700; font-size: 17px; line-height: 1.3; }
.sat-serit .btn { flex-shrink: 0; height: 48px; font-size: 15px; }
.sat-serit :focus-visible { outline-color: var(--mm-yesil-isik); }
.geri { align-self: flex-start; padding: 12px 0; font-weight: 700; font-size: 14px; }
.detay-izgara { display: grid; gap: 20px; }
.detay-foto { margin: 0; border-radius: var(--mm-kart-yaricap); }
.kucukler { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; padding: 4px; }
.kucuk { flex-shrink: 0; width: 72px; height: 54px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--mm-yumusak); cursor: pointer; opacity: .7; }
.kucuk.secili { opacity: 1; box-shadow: 0 0 0 2.5px var(--mm-cam); }
.kucuk img { width: 100%; height: 100%; object-fit: cover; }
.detay-bilgi { display: flex; flex-direction: column; gap: 16px; }
.detay-bilgi h1 { font-size: 30px; line-height: 1.1; }
.detay-bilgi .olcutler { background: #fff; border-radius: 20px; padding: 4px 18px; }
.detay-eylem { display: flex; flex-direction: column; gap: 10px; }
.aciklama { display: grid; gap: 12px; font-size: 15px; color: var(--mm-yosun); }

/* Yasal metin ve hata */
.metin h1 { font-size: 34px; }
.metin-ic { display: grid; gap: 14px; padding: 24px 20px; max-width: 760px; font-size: 15px; line-height: 1.65; }
.hata-sayfa { align-items: flex-start; gap: 16px; padding-top: 48px; }

/* Tablet */
@media (min-width: 640px) {
  body { --kenar: 32px; }
  .ilan-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aranan, .sat-serit, .iletisim { margin-inline: 0; }
  .iletisim { padding: 40px; }
  .dev-numara { font-size: min(150px, calc((100vw - 146px) / 6.85)); }
  .iletisim-eylem { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 12px; }
  .iletisim-posta { margin-left: 8px; }
  .aranan { padding: 40px; }
  .form-kart { padding: 28px; }
  .detay-eylem { flex-direction: row; flex-wrap: wrap; }
  .tesekkur { margin-inline: auto; }
  .sahne { margin-inline: 0; max-width: 620px; }
}

/* Masaüstü */
@media (min-width: 980px) {
  body { --kenar: 40px; }
  h1 { font-size: clamp(52px, 5.6vw, 76px); line-height: 1; letter-spacing: -.04em; }
  h2 { font-size: clamp(34px, 3.4vw, 46px); }
  .ust-ic { padding-block: 20px; }
  .logo-soz { font-size: 30px; }
  .logo-motors { font-size: 12px; }
  .ust-nav, .ust-cta { display: flex; }

  .kahraman {
    max-width: 1240px; padding-top: 36px; column-gap: clamp(40px, 5vw, 80px); row-gap: 24px;
    grid-template-columns: minmax(0, 1fr) minmax(400px, 460px);
    grid-template-areas: "metin form" "sahne form" "rozet form";
    grid-template-rows: auto auto 1fr; align-items: start;
  }
  .kahraman-metin { grid-area: metin; gap: 22px; }
  .giris { font-size: 19px; }
  .sahne { grid-area: sahne; max-width: 660px; margin-top: 8px; }
  .rozetler { grid-area: rozet; }
  .rozetler li { font-size: 14px; padding: 10px 16px; }
  .form-kart { grid-area: form; margin-top: 0; padding: 32px; border-radius: 36px; }

  .bolum { padding-top: 96px; gap: 40px; }
  .surec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .surec-adim { flex-direction: column; gap: 18px; padding-bottom: 0; }
  .surec-adim:not(:last-child)::after { left: 48px; right: -26px; top: 16.5px; bottom: auto; width: auto; height: 3px; }
  .surec h3 { font-size: 21px; }
  .surec p { font-size: 16px; margin-top: 8px; }

  .aranan-dis { padding-top: 96px; }
  .aranan { padding: 64px; border-radius: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "metin olcut" "cta olcut"; column-gap: 72px; row-gap: 28px; align-items: start; }
  .aranan-metin { grid-area: metin; gap: 18px; }
  .aranan .cift-far span { width: 30px; height: 30px; }
  .aranan h2 { font-size: clamp(34px, 3.4vw, 46px); }
  .aranan p { font-size: 17px; max-width: 38ch; }
  .aranan .olcutler { grid-area: olcut; }
  .aranan .olcut { padding: 20px 0; font-size: 17px; }
  .aranan .olcut:first-child { border-top: 0; }
  .aranan-cta { grid-area: cta; justify-self: start; margin-top: 0; height: 56px; padding: 0 32px; border-radius: 28px; }

  .sss { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); column-gap: 72px; align-items: start; padding-bottom: 96px; }
  .iletisim-dis { padding-block: 96px; }
  .iletisim { padding: 64px; border-radius: 40px; gap: 32px; }
  .dev-numara { font-size: min(150px, calc((100vw - 210px) / 6.85)); }
  .iletisim h2 { font-size: clamp(34px, 3.4vw, 46px); max-width: 20ch; }
  .iletisim .btn { height: 56px; padding: 0 30px; border-radius: 28px; }
  .soru { padding: 0 24px; }
  .soru summary { min-height: 68px; font-size: 18px; }
  .soru p { font-size: 16px; padding-bottom: 22px; }

  .alt { border-radius: 40px 40px 0 0; }
  .alt-ic { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; column-gap: 56px; padding-block: 56px 40px; align-items: start; }
  .alt-marka p { display: block; margin-top: 8px; font-weight: 600; color: var(--mm-gece-ormani); }
  .alt-nav { flex-direction: column; }
  .alt-nav a { padding: 6px 0; }
  .alt-kunye { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid var(--mm-yumusak); }

  .tesekkur { max-width: 1000px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; padding-top: 56px; align-items: start; }
  .tesekkur h1 { font-size: 56px; }
  .yanan-farlar span { width: 84px; height: 84px; border-width: 6px; }

  .ilanlar, .ilan-detay, .metin { padding-top: 32px; gap: 24px; }
  .ilanlar h1, .metin h1 { font-size: 56px; }
  .suzgec { margin-inline: 0; padding-inline: 0; }
  .ilan-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .sat-serit { padding: 28px 36px; margin-top: 24px; border-radius: 28px; }
  .sat-serit p { font-size: 22px; }
  .detay-izgara { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; align-items: start; }
  .detay-bilgi h1 { font-size: 40px; }
  .metin-ic { padding: 40px; font-size: 16px; }
}

/* Hareket: kelime kelime giriş, sıçrayarak belirme. Aynı anda en çok iki şey. */
@media (prefers-reduced-motion: no-preference) {
  .vaat .kelime { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .08em 0 .14em; margin: -.08em 0 -.14em; }
  .vaat .kelime > span { display: inline-block; transform: translateY(115%); animation: yukari .65s cubic-bezier(.2, .8, .2, 1) forwards; }
  .vaat .kelime:nth-child(2) > span { animation-delay: 70ms; }
  .vaat .kelime:nth-child(3) > span { animation-delay: 140ms; }
  .vaat .kelime:nth-child(4) > span { animation-delay: 210ms; }
  .vaat .kelime:nth-child(5) > span { animation-delay: 280ms; }
  .sahne-lime, .sahne-halka { animation: sicra .7s cubic-bezier(.34, 1.56, .64, 1) both; }
  .sahne-halka { animation-delay: .35s; }
  .sahne-lime { animation-delay: .5s; }
  .sahne img { animation: gel .8s cubic-bezier(.2, .8, .2, 1) .65s both; }
  .yanan-farlar span { animation: sicra .6s cubic-bezier(.34, 1.56, .64, 1) both; }
  .yanan-farlar span:last-child { animation-delay: .15s; }
  @keyframes yukari { to { transform: none; } }
  @keyframes sicra { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes gel { from { transform: translateX(-8%); opacity: 0; } to { transform: none; opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}