/* Ana sayfa kapağı (3 Kasım, Fahri seçimi B "çapraz yarık"; karar db64b9: adın sırasıyla önce KALDIR = vinç solda/üstte, ÇEK = çekici sağda/altta).
   Yerleşim sıraya bağlı (.yari-ilk / .yari-son), renk hizmete bağlı (.yari-vinc lacivert / .yari-cekici turuncu).
   Mobil önce: üstte ilk yaprak, altta ikinci, eğik kesik; geniş ekranda sol/sağ çapraz yarık, ortada "ya da".
   Renkler yalnız stil.css :root değişkenlerinden. Çekici teklif sayfası da buradadır. */
.kapak { position: relative; overflow: hidden; background: var(--navy); color: var(--beyaz); isolation: isolate; }
.yari { position: relative; overflow: hidden; display: flex; flex-direction: column; }
.yari-cekici { background: linear-gradient(160deg, var(--turuncu-ust) 0%, var(--turuncu) 40%, var(--turuncu-koyu) 100%); color: var(--turuncu-murekkep); }
.yari-vinc { background: linear-gradient(200deg, var(--navy-3) 0%, var(--navy) 70%); color: var(--beyaz); }
.yari-ilk { clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); padding: 1.75rem 1.25rem 5.75rem; min-height: 24.5rem; z-index: 1; }
.yari-son { clip-path: polygon(0 14%, 100% 0, 100% 100%, 0 100%); margin-top: -3.4rem; padding: 4.75rem 1.25rem 1.75rem; min-height: 24rem; }
.yari-vinc::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--izgara-cizgi) 1px, transparent 1px), linear-gradient(90deg, var(--izgara-cizgi) 1px, transparent 1px); background-size: 2.75rem 2.75rem; }
.dev { position: absolute; font-size: 7.5rem; font-weight: 900; letter-spacing: -.05em; line-height: 1; white-space: nowrap; pointer-events: none; z-index: 0; }
.yari-cekici .dev { color: var(--turuncu-murekkep); opacity: .12; }
.yari-vinc .dev { color: var(--beyaz); opacity: .06; }
.yari-ilk .dev { right: -.5rem; top: 2.25rem; }
.yari-son .dev { right: -.5rem; bottom: .25rem; }
.yari-ic { position: relative; z-index: 2; display: flex; flex-direction: column; flex: 1; }
.yaprak-no { font-size: .75rem; font-weight: 900; letter-spacing: .2em; opacity: .8; }
.yari h2 { font-size: 1.9rem; line-height: 1.02; font-weight: 900; letter-spacing: -.03em; margin: var(--a2) 0; color: inherit; }
.yari p { font-size: .9375rem; margin: 0 0 var(--a4); max-width: 55%; }
.yari-vinc p { color: var(--koyu-metin); }
.yari .btn { margin-top: auto; justify-content: center; font-size: 1.0625rem; min-height: 3.25rem; }
.btn-beyaz { background: var(--beyaz); color: var(--navy); box-shadow: 0 3px 0 var(--murekkep-12); }
.btn-beyaz:hover { background: var(--zemin); }
.yari-cizim { position: absolute; right: 1rem; width: 42%; max-width: 26rem; z-index: 1; pointer-events: none; }
.yari-ilk .yari-cizim { bottom: 8.25rem; }
.yari-son .yari-cizim { bottom: 5.75rem; }
.yari-cizim svg { width: 100%; height: auto; display: block; }
.yaprak-cipler { display: none; gap: var(--a2); flex-wrap: wrap; margin: var(--a3) 0 0; list-style: none; padding: 0; }
.yaprak-cipler li { font-size: .8125rem; font-weight: 700; padding: .3rem .7rem; border-radius: var(--r-tam); }
.yari-cekici .yaprak-cipler li { background: var(--murekkep-12); }
.yari-vinc .yaprak-cipler li { background: var(--beyaz-09); color: var(--koyu-metin); }
.ya-da { position: absolute; left: 50%; top: 21.9rem; transform: translate(-50%, -50%); width: 4.2rem; height: 4.2rem; border-radius: 50%;
  background: var(--beyaz); color: var(--navy); display: grid; place-items: center; text-align: center; z-index: 3;
  box-shadow: 0 0 0 .4rem var(--beyaz-09), 0 .6rem 1.4rem var(--kapak-golge); }
.ya-da b { display: block; font-size: .875rem; font-weight: 900; line-height: 1.1; }
.ya-da small { display: block; font-size: .625rem; font-weight: 700; color: var(--celik); }

@media (min-width: 47.5em) {
  .kapak { height: 36rem; }
  .yari { position: absolute; top: 0; bottom: 0; width: 58%; min-height: 0; margin: 0; padding: 0; }
  .yari-ilk { left: 0; clip-path: polygon(0 0, 100% 0, 72.4% 100%, 0 100%); }
  .yari-son { right: 0; clip-path: polygon(27.6% 0, 100% 0, 100% 100%, 0 100%); }
  .yari-ic { position: absolute; top: 4.5rem; width: min(30rem, 36vw); flex: none; }
  .yari-ilk .yari-ic { left: max(1.5rem, calc((100vw - 72rem) / 2)); }
  .yari-son .yari-ic { right: max(1.5rem, calc((100vw - 72rem) / 2)); text-align: right; align-items: flex-end; }
  .yari h2 { font-size: clamp(2.4rem, 3.6vw, 3.4rem); }
  .yari p { font-size: 1.0625rem; max-width: 27rem; }
  .yari .btn { margin-top: 0; padding-left: 1.6rem; padding-right: 1.6rem; }
  .yaprak-cipler { display: flex; }
  .yari-son .yaprak-cipler { justify-content: flex-end; }
  .dev { font-size: clamp(9rem, 17vw, 15.5rem); letter-spacing: -.06em; }
  .yari-ilk .dev { left: -1rem; right: auto; top: auto; bottom: 2rem; }
  .yari-son .dev { right: -1rem; bottom: auto; top: 3rem; }
  .yari-cizim { width: min(28rem, 31vw); max-width: none; }
  .yari-ilk .yari-cizim { left: max(1.5rem, calc((100vw - 72rem) / 2)); right: auto; bottom: 1.25rem; }
  .yari-son .yari-cizim { right: max(1.5rem, calc((100vw - 72rem) / 2)); bottom: 2.5rem; }
  .yari-vinc .yari-cizim { width: min(19rem, 20vw); bottom: .75rem; }
  .ya-da { top: 50%; width: 7rem; height: 7rem; box-shadow: 0 0 0 .6rem var(--beyaz-09), 0 .75rem 2rem var(--kapak-golge); }
  .ya-da b { font-size: 1rem; }
  .ya-da small { font-size: .7rem; }
}

/* ---- Çekici teklif sayfası ---- */
.cekici-form { display: grid; gap: var(--a4); padding: var(--a5) 0 var(--a6); }
.cekici-form fieldset { border: 1px solid var(--cizgi); border-radius: .9rem; background: var(--kart); padding: var(--a4); margin: 0; }
.cekici-form legend { font-weight: 800; font-size: var(--y2); padding: 0 var(--a2); display: flex; gap: var(--a2); align-items: center; }
.cekici-form legend b { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--turuncu); color: var(--turuncu-murekkep); display: grid; place-items: center; font-size: .875rem; }
.secim-izgara { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--a2); margin-top: var(--a3); }
@media (min-width: 40em) { .secim-izgara { grid-template-columns: repeat(3, 1fr); } }
.secim { position: relative; }
.secim input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.secim span { display: flex; flex-direction: column; gap: .2rem; border: 1.5px solid var(--girdi-kenar); border-radius: .7rem; padding: .7rem .8rem; min-height: 3.25rem; font-weight: 700; background: var(--beyaz); }
.secim small { font-weight: 500; color: var(--metin-2); font-size: .8125rem; }
.secim input:checked + span { border-color: var(--turuncu); background: var(--turuncu-acik); box-shadow: inset 0 0 0 1px var(--turuncu); }
.secim input:focus-visible + span { outline: 3px solid var(--odak); outline-offset: 2px; }
.konum-satir { display: flex; flex-wrap: wrap; gap: var(--a2); align-items: center; margin-top: var(--a3); }
.konum-durum { font-size: .875rem; color: var(--metin-2); }
.konum-durum.tamam { color: var(--yesil); font-weight: 700; }
.alan { display: grid; gap: .3rem; margin-top: var(--a3); }
.alan label { font-weight: 700; font-size: .9375rem; }
.alan select, .alan input { min-height: 2.9rem; border: 1.5px solid var(--girdi-kenar); border-radius: .6rem; padding: 0 .75rem; font: inherit; background: var(--beyaz); color: var(--metin); width: 100%; }
.cekici-ozet { position: sticky; bottom: 0; background: var(--navy); color: var(--beyaz); border-radius: .9rem .9rem 0 0; padding: var(--a4); display: grid; gap: var(--a2); box-shadow: 0 -3px 0 var(--turuncu); }
.cekici-ozet .tutar { font-size: 1.5rem; font-weight: 900; }
.cekici-ozet .etiket { font-size: .8125rem; color: var(--koyu-metin-2); }
.cekici-uyari { background: var(--uyari-zemin); color: var(--uyari-metin); border-radius: .6rem; padding: .7rem .9rem; font-size: .9375rem; margin-top: var(--a3); }
.cekici-uyari a { color: var(--turuncu-metin); font-weight: 700; }
.traknock-serit { background: var(--turuncu-acik); border: 1px solid var(--turuncu-kenar); color: var(--turuncu-yazi); border-radius: .7rem; padding: .7rem .9rem; font-size: .9375rem; }
.ornek-teklif { display: grid; gap: var(--a2); margin-top: var(--a3); list-style: none; padding: 0; }
.ornek-teklif li { display: flex; justify-content: space-between; gap: var(--a3); background: var(--kart); border: 1px solid var(--cizgi); border-radius: .7rem; padding: .8rem 1rem; color: var(--metin); }
.ornek-teklif strong { font-size: 1.0625rem; }
.ornek-teklif small { color: var(--metin-2); display: block; }

/* Çizim ve harita boyaları */
.k-tr { fill: var(--turuncu); } .yari-cekici .k-tr { fill: var(--navy-2); } .yari-cekici .k-tr2 { fill: var(--beyaz); } .k-tr2 { fill: var(--turuncu-hafif); } .k-nv { fill: var(--navy); } .k-nv2 { fill: var(--navy-2); }
.k-cl { fill: var(--celik); } .k-ca { fill: var(--celik-acik); } .k-co { fill: var(--celik-orta); } .k-cam { fill: var(--cizim-acik); }
.k-st { stroke: var(--turuncu-koyu); stroke-width: 2.4; fill: none; } .k-sn { stroke: var(--navy); stroke-width: 2.6; } .k-bos { fill: none; }
.k-ayak { stroke: var(--celik); stroke-width: 5; }
.k-yol { stroke: var(--navy-3); fill: none; } .k-ana-yol { stroke: var(--koyu-kenar); stroke-width: 16; fill: none; }
.k-ana-serit { stroke: var(--turuncu); stroke-width: 2; stroke-dasharray: 14 12; fill: none; opacity: .4; }

/* Ana sayfa çekici bölümü */
.cekici-bant { background: var(--zemin); }
.arac-cipler { display: flex; flex-wrap: wrap; gap: var(--a2); list-style: none; padding: 0; margin: 0 0 var(--a5); }
.arac-cipler a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border-radius: var(--r-tam); border: 1.5px solid var(--girdi-kenar); background: var(--beyaz); color: var(--navy); font-weight: 700; text-decoration: none; }
.arac-cipler a:hover { border-color: var(--turuncu); background: var(--turuncu-acik); }
.iki-yol { display: grid; gap: var(--a4); }
@media (min-width: 47.5em) { .iki-yol { grid-template-columns: repeat(3, 1fr); } }
.yol-kart { display: flex; flex-direction: column; gap: var(--a2); }
.yol-kart h3 { margin: 0; }
.yol-kart p { margin: 0 0 var(--a3); color: var(--metin-2); }
.yol-kart .btn { margin-top: auto; align-self: flex-start; }
.yol-etiket { align-self: flex-start; font-size: .75rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; padding: .25rem .6rem; border-radius: var(--r-tam); background: var(--turuncu-acik); color: var(--turuncu-metin); }
.yol-acil { background: var(--navy); color: var(--beyaz); }

/* Firmalar için sayfası ve perde kartları */
.firma-turleri { display: grid; gap: var(--a4); }
@media (min-width: 47.5em) { .firma-turleri { grid-template-columns: 1fr 1fr; } }
.firma-tur { display: flex; flex-direction: column; gap: var(--a3); }
.firma-tur h3 { margin: 0; }
.firma-tur .btn { margin-top: auto; align-self: flex-start; }
.firma-tur-cekici { border-top: .3rem solid var(--turuncu); }
.firma-tur-vinc { border-top: .3rem solid var(--navy); }
.liste-tik { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.liste-tik li { position: relative; padding-left: 1.6rem; color: var(--metin-2); }
.liste-tik li::before { content: ""; position: absolute; left: .2rem; top: .45rem; width: .7rem; height: .4rem; border-left: .18rem solid var(--turuncu); border-bottom: .18rem solid var(--turuncu); transform: rotate(-45deg); }
.sistem-akis { display: grid; gap: var(--a4); }
@media (min-width: 47.5em) { .sistem-akis { grid-template-columns: repeat(3, 1fr); } }
.sistem-akis li { background: var(--navy-2); border: 1px solid var(--koyu-kenar); border-radius: .9rem; padding: var(--a4); }
.sistem-akis b { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--turuncu); color: var(--turuncu-murekkep); font-weight: 900; }
.sistem-akis h3 { margin: var(--a2) 0 var(--a1); }
.sistem-akis p { margin: 0; color: var(--koyu-metin); }
.perde-izgara { display: grid; gap: var(--a3); margin-top: var(--a5); }
@media (min-width: 40em) { .perde-izgara { grid-template-columns: 1fr 1fr; } }
.perde { border: 1.5px dashed var(--girdi-kenar); border-radius: .8rem; padding: var(--a4); background: var(--zemin); display: grid; gap: .3rem; }
.perde strong { color: var(--navy); }
.perde p { margin: 0; color: var(--metin-2); font-size: .9375rem; }
.perde-etiket { justify-self: start; font-size: .75rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; padding: .2rem .55rem; border-radius: var(--r-tam); background: var(--navy); color: var(--beyaz); }
.btn-gece { background: var(--navy); color: var(--beyaz); box-shadow: 0 3px 0 var(--turuncu-murekkep); }
.btn-gece:hover { background: var(--navy-2); }