/* urun-sitesi.css: urun siteleri (navlun.pro; PO 22.10 tek sayfa). site-ana.css'in yerlesim ve hareket
   parcalarini kullanir; burada yalniz urun sayfasinin bolum zeminleri, bolunmus metnin yeri ve yeni
   uc parca (gun zinciri, tuketim siniflari, bu surumde olmayanlar) var. Belirtecler kurumsal.css. */

/* ---- Zeminler (ardisik iki bolum ayni zeminde degil) ---- */
.u-kagit { background: var(--s-kagit); }
.u-zemin { background: var(--s-zemin); }
.u-gri { background: var(--s-zemin-2); }

/* ---- Kahraman: telefon gorseli yok ---- */
.u-giris .s-giris-gorsel figcaption { padding-inline-start: 0; }
.u-giris .s-dev { font-size: clamp(44px, 5.2vw, 84px); }

/* ---- Bolunmus duzende metnin yeri ---- */
.u-metin-sol { grid-column: kap-bas / span 5; grid-row: 1; }
.u-metin-sag { grid-column: 9 / kap-son; grid-row: 1; }
.u-baglar { display: flex; flex-wrap: wrap; gap: 0 var(--s-g-kutu-1); margin: 0; }

/* ---- Bant bolumlerinde uclu ---- */
.u-gri .s-uclu { max-inline-size: 1040px; margin: var(--s-g-kutu-2) auto 0; }
.u-ikon {
  display: inline-grid; place-items: center; inline-size: var(--sp-12); block-size: var(--sp-12);
  margin-block-end: var(--sp-3); border-radius: var(--s-r-kart);
  background: var(--s-kagit); color: var(--s-vurgu-metin); border: 1px solid var(--s-cizgi);
}
.u-ikon .icon { inline-size: 24px; block-size: 24px; }

/* ---- 10 Maliyet: uzun dokum bir ekrana sigar; ustteki sonuc satiri gorunur, alt kenar solar ---- */
.u-maliyet .s-cerceve {
  position: relative;
  max-block-size: calc(100dvh - var(--s-ust-h) - 2 * clamp(48px, 9vh, 96px));
}
.u-maliyet .s-cerceve::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: var(--s-g-makro-1);
  background: linear-gradient(transparent, var(--s-kagit)); pointer-events: none;
}

/* ---- 06 Gun: bes durak ---- */
.u-gun .s-zincir { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.u-gun .s-zincir h3 { margin-block-start: var(--sp-1); }
.u-zaman {
  margin: var(--sp-4) 0 0; font-size: var(--fs-13); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--s-turkuaz);
}
.u-gun .s-zincir .u-zaman { color: var(--s-turkuaz); font-size: var(--fs-13); }

/* ---- 08 Yakit: 5/7, tuketim siniflari ---- */
.u-yakit-ic { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s-g-kutu-3); align-items: center; }
.u-yakit-ic > div > p:not(.s-ust-etiket) { margin: var(--sp-4) 0 var(--s-g-kutu-1); font-size: var(--s-fs-govde); color: var(--s-soluk); }
.u-siniflar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-g-kutu-1); margin: 0; padding: 0; list-style: none; }
/* Kartlar alcak golgede, ekran cerceveleri derin golgede (yukselti hiyerarsisi) */
.u-siniflar li {
  padding: var(--s-g-kutu-1); background: var(--s-zemin);
  border: 1px solid var(--s-cizgi); border-radius: var(--s-r-kart); box-shadow: 0 1px 2px var(--s-golge);
}
.u-siniflar .st { font-size: var(--fs-15); }
.u-siniflar p { margin: var(--sp-3) 0 0; color: var(--s-soluk); }
.u-yakit-ic + .s-uclu { margin-block-start: var(--s-g-kutu-3); }

/* ---- 11 Gecis: 7/5, bu surumde olmayanlar ---- */
.u-gecis-ic { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-g-kutu-3); align-items: start; }
.u-gecis-ic > div > p:not(.s-ust-etiket) { margin: var(--sp-4) 0 var(--s-g-kutu-1); max-inline-size: 56ch; font-size: var(--s-fs-govde); color: var(--s-soluk); }
.u-gecis-ic .s-maddeler { max-inline-size: 56ch; }
.u-yok {
  padding: var(--s-g-kutu-2); background: var(--s-kagit);
  border: 1px solid var(--s-cizgi); border-block-start: 4px solid var(--s-murekkep); border-radius: var(--s-r-kart);
  box-shadow: 0 1px 2px var(--s-golge);
}
.u-yok h3 { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-4); font-family: var(--s-font-baslik); font-size: var(--fs-28); }
.u-yok h3 .icon { color: var(--s-vurgu-metin); }
.u-yok dl { margin: 0 0 var(--sp-4); }
.u-yok dl div { padding-block: var(--sp-4); border-block-start: 1px solid var(--s-cizgi); }
.u-yok dt { font-weight: 600; color: var(--s-murekkep); }
.u-yok dd { margin: var(--sp-1) 0 0; color: var(--s-soluk); }

/* ---- 12 Kapanis ---- */
.u-kapanis .s-dev { max-inline-size: 18ch; }
.u-kapanis-alt { margin: var(--s-g-kutu-1) 0 var(--s-g-kutu-2); max-inline-size: 48ch; font-size: var(--fs-20); color: var(--s-buz-soluk); }

/* ---- Kisa dizustu ekrani (or. 1366x768): bolunmus metin bir ekrana sigsin ---- */
@media (min-width: 1101px) and (max-height: 820px) {
  .u-site { --s-fs-h2: clamp(32px, 3vw, 44px); }
  .s-bolunmus-metin > p { margin-block-end: var(--sp-4); }
  .s-maddeler li { padding-block: var(--sp-3); }
}

/* ---- Duyarlilik ---- */
@media (max-width: 1100px) {
  .u-metin-sol, .u-metin-sag { grid-column: kap-bas / kap-son; }
  .u-gun .s-zincir { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .u-yakit-ic, .u-gecis-ic { grid-template-columns: 1fr; gap: var(--s-g-kutu-2); }
}
@media (max-width: 860px) {
  .u-gun .s-zincir { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .u-siniflar { grid-template-columns: 1fr; }
  .u-gun .s-zincir { grid-template-columns: 1fr; }
  .u-yok { padding: var(--s-g-kutu-1); }
}