/* ==========================================================================
   Delta Motor — Servis kapsami
   Her hizmet bir kunye sayfasi gibi kurulur: ust seritte ad + sure + lift,
   altta ne yapildigi. Anasayfadaki kart izgarasindan bilerek farkli.
   ========================================================================== */

/* --- Hizmet kunyesi ----------------------------------------------------- */

.sheets {
  display: grid;
  gap: var(--s-5);
}

.sheet {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--d-base) var(--e-out),
              box-shadow var(--d-base) var(--e-out);
}

.sheet:hover {
  border-color: var(--c-line-strong);
  box-shadow: var(--sh-md);
}

/* Ust serit */
.sheet__bar {
  display: grid;
  gap: var(--s-3);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
  padding: var(--s-4) var(--s-5);
  background: var(--c-surface-alt);
  border-bottom: 1px solid var(--c-line);
}

@media (min-width: 760px) {
  .sheet__bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--s-4);
  }
}

/* Anasayfa kartlariyla ayni olcu (`.service__icon`, 36px). Ikonlar 48
   birimlik viewBox'ta `stroke-width: 2.25` ile cizili; 28px'te cizgi
   1.31px'e dusup inceliyordu, 36px'te 1.69px — onceki 24 birimlik
   ikonlarin agirligi (1.75px). Yeni ikon eklenirken bu oran korunmali. */
.sheet__icon {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--c-blue);
  flex: none;
}

.sheet__name {
  font-family: var(--f-display);
  font-weight: 700;
  font-variation-settings: 'wdth' var(--wdth-tight);
  font-size: var(--t-xl);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  line-height: 1.1;
}

/* Barin sag ucu: arac tipi sekmeleri (sure/lift kunyesinin yerine geldi).
   Ortak `.tabs__list` bir bolum basliginin altinda durmak uzere yazildi;
   kendi alt cizgisi ve alt boslugu var. Bar zaten kendi border-bottom'unu
   tasidigi icin ikisi de burada fazla. */
.sheet__bar .tabs__list {
  margin-bottom: 0;
  border-bottom: 0;
  gap: var(--s-4);
}

.sheet__bar .tabs__tab {
  padding-bottom: var(--s-2);
}

/* Govde */
.sheet__body {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: minmax(0, 1fr);
  padding: var(--s-5);
}

@media (min-width: 860px) {
  .sheet__body { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); }
}

.sheet__intro {
  display: grid;
  align-content: start;
  gap: var(--s-4);
  min-width: 0;
}

/* --- Gorselli kunye ----------------------------------------------------
   Sol sutun tamamen gorsel oldugunda kullanilir (.sheet__intro yerine).
   object-position sag yariya kaydirildi: dar kirpmada motosiklet karede
   kalir, teknisyenin kolu kirpilir.

   Gorsel HER OLCUDE kare kalir. Onceden genis ekranda sutun yuksekligine
   yayiliyordu (`height: 100%`); sag sutun akordeona cevrilince o yukseklik
   degisken oldu ve gorsel her acilista uzayip kisalmaya, 1000x1000 kare
   fotograf 540x803 olarak kirpilmaya basladi. Kare sabit, `align-self`
   ile basa hizali: bloklar acilip kapanirken gorsel yerinde durur.
   ----------------------------------------------------------------------- */

.sheet__media {
  display: block;
  align-self: start;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 55% 50%;
  border-radius: var(--r-sm);
  background: var(--c-surface-alt);
}

/* Gorselin karsisindaki metin sutunu: tanitim + ne zaman + kapsam.
   .sheet__intro'dan farki daha genis bosluk: uc ayri blok tasiyor. */
.sheet__side {
  display: grid;
  align-content: start;
  gap: var(--s-5);
  min-width: 0;
}


/* Kunyenin tek cumlelik ozeti — "aciklama" akordeonunun ilk satiri.
   Detay paragrafindan once gelir ve ondan once okunmalidir: bir punto
   buyuk, tam kontrastli, biraz daha agir. Detay ise `--c-ink-mute`de
   kalir; ikisi ayni renkte olsaydi ozet oldugu anlasilmazdi. */
.sheet__lead {
  font-size: var(--t-md);
  font-weight: 500;
  line-height: 1.45;
  color: var(--c-ink);
  text-wrap: pretty;
  margin-bottom: var(--s-3);
}

.sheet__note {
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--c-ink-mute);
  text-wrap: pretty;
}

/* Ne zaman gerekli — mavi kutu */
.sheet__when {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4);
  background: var(--c-blue-wash);
  border-left: 3px solid var(--c-blue);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* NOT: `.sheet__when-title` burada duruyordu. Akordeon gelince kutunun
   basligini akordeon basligi devraldi ("NE ZAMAN GEREKIR"); ayni metni iki
   kez yazmamak icin kaldirildi. */

.sheet__when-body {
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--c-ink);
}

/* Yapilan isler */
.sheet__tasks {
  display: grid;
  align-content: start;
  gap: 0;
  min-width: 0;
  border-top: 1px solid var(--c-line-strong);
}

/* NOT: `.sheet__tasks-title` burada duruyordu — akordeon basligi ("KAPSAM")
   devraldi. */

.sheet__task {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  align-items: start;
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--t-base);
  line-height: 1.45;
}

.sheet__task::before {
  content: '';
  width: 0.75rem;
  height: 1px;
  margin-top: 0.72em;
  background: var(--c-blue);
}

/* --- Kunyenin sag sutunu: akordeon --------------------------------------
   Uc blok (aciklama / ne zaman / kapsam) ust uste kapali durur. Ayrac
   hairline'lar sayfanin geri kalaniyla ayni: `.sheet__task` satirlari da
   boyle bolunuyor, akordeon onlarin uzerine yeni bir cizgi dili getirmez.

   Acilma yuksekligi JS'te olculmuyor: `grid-template-rows` 0fr -> 1fr.
   Bu gecis compositor disi (layout) calisir ama tek satirlik bir izgara
   uzerinde, kunye basina en fazla bir kez — olcup yazmaktan ucuz.
   ------------------------------------------------------------------------ */

.sheet__side.acc {
  gap: 0;
  border-top: 1px solid var(--c-line-strong);
}

.acc .sheet__tasks {
  border-top: 0;
}

.acc .sheet__task:last-child {
  border-bottom: 0;
}

.sheet__foot {
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--c-line);
  background: var(--c-bg);
}

/* --- Belirti tablosu ----------------------------------------------------
   Ziyaretcinin asil sorusu: "hangi isi secmeliyim?"
   ----------------------------------------------------------------------- */

.symptoms-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.symptoms {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  text-align: left;
}

.symptoms th {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--c-line-strong);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-faint);
  white-space: nowrap;
}

.symptoms td {
  padding: var(--s-4);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--t-base);
  line-height: 1.45;
  vertical-align: top;
}

.symptoms tbody tr {
  transition: background var(--d-fast) var(--e-out);
}

.symptoms tbody tr:hover { background: var(--c-surface); }

.symptoms__what { color: var(--c-ink); }

.symptoms__job {
  font-weight: 500;
  color: var(--c-blue);
  white-space: nowrap;
}

.symptoms__lift {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-sm);
  color: var(--c-ink-faint);
  white-space: nowrap;
}

/* Acil olanlar kirmizi isaretlenir */
.symptoms__urgent {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--f-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-red);
}

.symptoms__urgent::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-red);
  flex: none;
}

/* --- Randevuya gelirken ------------------------------------------------- */

.prep {
  display: grid;
  gap: 1px;
  background: var(--c-line);
  border-block: 1px solid var(--c-line);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 700px) {
  .prep { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .prep { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.prep__item {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-5);
  background: var(--c-bg);
}

.prep__mark {
  width: 1.5rem;
  height: 1px;
  background: var(--c-red);
}

.prep__name {
  font-family: var(--f-display);
  font-weight: 700;
  font-variation-settings: 'wdth' var(--wdth-tight);
  font-size: var(--t-lg);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  line-height: 1.1;
}

.prep__note {
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--c-ink-mute);
}