/* ========================================================================= TRANSFER VOUCHER (Components/Voucher/VoucherKarti.razor) — önek vk- Kağıt belge olduğu için açık/koyu temadan bağımsız: beyaz zemin, tek vurgu rengi (--vk-vurgu, firma rengi). Ölçüler em cinsindendir: önizlemede yazı boyutu değişince tüm belge orantılı küçülür. Ekranda 794px genişlik = A4 (210 mm) sayfanın 10 mm kenar boşluklu baskısı. YAZDIRMA: js/voucher.js voucher'ın bir kopyasını 'nin doğrudan altına (#etds-yazdir-kok) koyar ve 'e "etds-voucher-yazdir" sınıfını ekler. Baskıda uygulamanın geri kalanı display:none olur (visibility değil: gizli içerik yer kaplayıp boş sayfa üretmesin), kopya tek A4 sayfaya sığacak şekilde ölçeklenir. ========================================================================= */ .vk { --vk-vurgu: #2563eb; --vk-vurgu-metin: #1d4ed8; --vk-vurgu-ton: rgba(37, 99, 235, 0.07); --vk-vurgu-kenar: rgba(37, 99, 235, 0.28); --vk-font: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, sans-serif; --vk-metin: #0f172a; --vk-metin-2: #475569; --vk-metin-3: #64748b; --vk-kenar: #e2e8f0; --vk-kenar-2: #eef2f6; container-type: inline-size; position: relative; box-sizing: border-box; width: 100%; max-width: 794px; margin: 0 auto; padding: 2.6em 2.8em 1.8em; background: #ffffff; color: var(--vk-metin); font-family: var(--vk-font); font-size: 13.5px; line-height: 1.45; text-align: left; border-radius: 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 14px 36px -14px rgba(15, 23, 42, 0.22); overflow: hidden; -webkit-font-smoothing: antialiased; -webkit-print-color-adjust: exact; print-color-adjust: exact; color-scheme: light; } .vk *, .vk *::before, .vk *::after { box-sizing: border-box; } /* Üstte ince vurgu şeridi */ .vk::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 0.45em; background: var(--vk-vurgu); } .vk h3, .vk h4, .vk p, .vk ul, .vk ol, .vk dl, .vk dd { margin: 0; padding: 0; } .vk a { color: inherit; text-decoration: none; } .vk .vk-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; letter-spacing: 0.02em; } /* İki dilli etiket: "Alış yeri · Pick-up" */ .vk .vk-en { font-weight: 500; opacity: 0.72; } .vk .vk-en::before { content: " · "; opacity: 0.8; } .vk .vk-ikinci-dil { color: var(--vk-metin-3); } .vk .vk-etiket { font-size: 0.72em; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase; color: var(--vk-metin-3); line-height: 1.35; } /* ------------------------------------------------------------ BAŞLIK */ .vk .vk-bas { display: flex; justify-content: space-between; align-items: flex-start; gap: 2em; padding-bottom: 1.15em; border-bottom: 1px solid var(--vk-kenar); } .vk .vk-marka { min-width: 0; flex: 1 1 auto; } .vk .vk-logo { display: block; height: 3.4em; width: auto; max-width: 17em; object-fit: contain; object-position: left center; } .vk .vk-firma-unvan { margin-top: 0.45em; font-size: 0.86em; font-weight: 600; color: var(--vk-metin-2); } .vk .vk-firma-ad { font-size: 1.55em; font-weight: 720; letter-spacing: -0.01em; line-height: 1.2; overflow-wrap: anywhere; } .vk .vk-iletisim { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25em 1.2em; margin-top: 0.55em; font-size: 0.84em; color: var(--vk-metin-2); } .vk .vk-iletisim li { white-space: nowrap; } .vk .vk-iletisim-e { font-weight: 650; color: var(--vk-metin-3); margin-right: 0.4em; font-size: 0.9em; letter-spacing: 0.03em; } .vk .vk-belge { text-align: right; flex-shrink: 0; } .vk .vk-belge-tur { font-size: 1.3em; font-weight: 760; letter-spacing: 0.1em; color: var(--vk-vurgu-metin); line-height: 1.2; } .vk .vk-belge-no { display: inline-block; margin-top: 0.5em; padding: 0.25em 0.7em; border-radius: 999px; background: var(--vk-vurgu-ton); color: var(--vk-vurgu-metin); font-weight: 700; font-size: 0.95em; font-variant-numeric: tabular-nums; letter-spacing: 0.03em; } .vk .vk-belge-tarih { margin-top: 0.55em; font-size: 0.84em; color: var(--vk-metin-2); font-variant-numeric: tabular-nums; } .vk .vk-belge-tarih .vk-etiket { font-size: 0.82em; } /* ------------------------------------------------------------ SEFER ÖZETİ */ .vk .vk-ozet { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr); gap: 1.2em; margin-top: 1.2em; } .vk .vk-zaman { padding: 1em 1.2em 0.95em; border-radius: 0.9em; background: var(--vk-vurgu-ton); border: 1px solid var(--vk-vurgu-kenar); } .vk .vk-tarih { margin-top: 0.25em; font-size: 1.12em; font-weight: 650; line-height: 1.3; } .vk .vk-tarih-en { font-size: 0.9em; color: var(--vk-metin-2); margin-top: 0.1em; } .vk .vk-saat-etiket { margin-top: 0.8em; } .vk .vk-saat { font-size: 3em; font-weight: 760; line-height: 1.02; letter-spacing: -0.02em; color: var(--vk-vurgu-metin); font-variant-numeric: tabular-nums; } .vk .vk-bitis { margin-top: 0.45em; font-size: 0.92em; color: var(--vk-metin-2); } .vk .vk-bitis b { color: var(--vk-metin); font-variant-numeric: tabular-nums; margin-left: 0.2em; } .vk .vk-rota { list-style: none; padding: 1em 1em 1em 0.4em; display: flex; flex-direction: column; justify-content: center; } .vk .vk-durak { position: relative; display: flex; gap: 0.9em; padding-bottom: 1.1em; } .vk .vk-durak.son { padding-bottom: 0; } .vk .vk-durak:not(.son)::after { content: ""; position: absolute; left: 0.5em; top: 1.35em; bottom: 0.1em; border-left: 2px dashed var(--vk-vurgu-kenar); transform: translateX(-1px); } .vk .vk-nokta { flex-shrink: 0; width: 1em; height: 1em; margin-top: 0.15em; border-radius: 50%; border: 0.26em solid var(--vk-vurgu); background: #ffffff; } .vk .vk-durak.son .vk-nokta { background: var(--vk-vurgu); } .vk .vk-durak-ic { min-width: 0; } .vk .vk-yer { margin-top: 0.15em; font-size: 1.1em; font-weight: 620; line-height: 1.35; overflow-wrap: anywhere; } /* ------------------------------------------------------------ UÇUŞ / ARAÇ / ŞOFÖR */ .vk .vk-kutular { display: grid; grid-template-columns: repeat(auto-fit, minmax(12em, 1fr)); gap: 0.8em; margin-top: 1em; } .vk .vk-kutu { padding: 0.75em 1em; border: 1px solid var(--vk-kenar); border-radius: 0.8em; min-width: 0; } .vk .vk-deger { margin-top: 0.2em; font-size: 1.12em; font-weight: 680; line-height: 1.3; overflow-wrap: anywhere; } .vk .vk-plaka { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.06em; } .vk .vk-alt { margin-top: 0.25em; font-size: 0.88em; color: var(--vk-metin-2); } .vk .vk-alt b { color: var(--vk-metin); font-weight: 650; margin-left: 0.25em; font-variant-numeric: tabular-nums; } .vk .vk-tel { font-variant-numeric: tabular-nums; color: var(--vk-vurgu-metin); font-weight: 600; } /* ------------------------------------------------------------ BÖLÜMLER */ .vk .vk-bolum { margin-top: 1.25em; break-inside: avoid; page-break-inside: avoid; } .vk .vk-bolum-bas { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; margin-bottom: 0.45em; } .vk .vk-bolum-baslik { font-size: 0.95em; font-weight: 700; letter-spacing: 0.01em; color: var(--vk-metin); } .vk .vk-bolum-baslik .vk-en { font-weight: 500; } .vk .vk-sayac { font-size: 0.84em; font-weight: 650; color: var(--vk-vurgu-metin); white-space: nowrap; } /* ------------------------------------------------------------ YOLCULAR */ .vk .vk-yolcu-sutunlar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1.6em; } .vk .vk-yolcu-sutunlar.iki { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .vk .vk-tablo { width: 100%; border-collapse: collapse; table-layout: auto; } .vk .vk-tablo th { text-align: left; font-size: 0.7em; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vk-metin-3); padding: 0.5em 0.5em; border-bottom: 1px solid var(--vk-kenar); vertical-align: bottom; } .vk .vk-tablo th .vk-en::before { content: " / "; } .vk .vk-tablo td { padding: 0.45em 0.5em; border-bottom: 1px solid var(--vk-kenar-2); vertical-align: top; } .vk .vk-tablo tr:last-child td { border-bottom: none; } .vk .vk-tablo .vk-no { width: 2.2em; color: var(--vk-metin-3); font-variant-numeric: tabular-nums; } .vk .vk-tablo .vk-ad { font-weight: 620; overflow-wrap: anywhere; } .vk .vk-tablo .vk-uyruk { width: 1%; white-space: nowrap; color: var(--vk-metin-2); } .vk .vk-tablo .vk-kimlik { width: 1%; white-space: nowrap; color: var(--vk-metin-2); } .vk .vk-tablo td.vk-kimlik { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; } .vk .vk-tablo .vk-ad-alt { display: none; margin-top: 0.1em; font-size: 0.84em; font-weight: 500; color: var(--vk-metin-3); } .vk .vk-fazla { margin-top: 0.5em; font-size: 0.85em; color: var(--vk-metin-2); font-style: italic; } /* Ekran / baskı varyantı: baskıda (ve A4 önizlemede) kısaltılmış liste */ .vk .vk-yalniz-baski { display: none; } .vk.vk-baski .vk-yalniz-ekran, .vk.vk-a4 .vk-yalniz-ekran { display: none; } .vk.vk-baski .vk-yalniz-baski, .vk.vk-a4 .vk-yalniz-baski { display: block; } /* ------------------------------------------------------------ KARŞILAMA VE NOTLAR */ .vk .vk-bilgiler { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1em 1.6em; } .vk .vk-bilgiler.iki { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .vk .vk-bilgi { padding-left: 0.9em; border-left: 3px solid var(--vk-vurgu); min-width: 0; } .vk .vk-bilgi p { margin-top: 0.3em; font-size: 0.92em; color: var(--vk-metin-2); line-height: 1.5; overflow-wrap: anywhere; } .vk .vk-bilgi p.vk-ikinci-dil { color: var(--vk-metin-3); } .vk .vk-not { white-space: pre-line; } /* ------------------------------------------------------------ DOĞRULAMA / ACİL DURUM / REFERANSLAR */ .vk .vk-alt-satir { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.5em; align-items: center; margin-top: 1.3em; padding: 0.9em 1.1em; border: 1px solid var(--vk-kenar); border-radius: 0.9em; break-inside: avoid; page-break-inside: avoid; } .vk .vk-alt-satir.qrsiz { grid-template-columns: minmax(0, 1fr); } .vk .vk-qr-kutu { display: flex; align-items: center; gap: 0.9em; } .vk .vk-qr { width: 6.8em; height: 6.8em; flex-shrink: 0; background: #ffffff; } .vk .vk-qr svg { display: block; width: 100%; height: 100%; } .vk .vk-qr:empty { border: 1px dashed var(--vk-kenar); border-radius: 0.4em; } .vk .vk-qr-yazi { display: flex; flex-direction: column; gap: 0.15em; font-size: 0.84em; max-width: 9.5em; line-height: 1.35; } .vk .vk-qr-yazi b { font-weight: 650; color: var(--vk-metin); } .vk .vk-referanslar { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr); gap: 0.9em 1.5em; align-items: center; min-width: 0; } .vk .vk-acil { padding: 0.75em 0.95em; border-radius: 0.75em; background: var(--vk-vurgu-ton); min-width: 0; } .vk .vk-acil-no { display: block; margin-top: 0.15em; font-size: 1.25em; font-weight: 720; color: var(--vk-vurgu-metin); font-variant-numeric: tabular-nums; white-space: nowrap; } .vk .vk-bilgi-listesi { display: grid; gap: 0.35em; min-width: 0; } .vk .vk-bilgi-listesi > div { display: flex; justify-content: space-between; gap: 1em; font-size: 0.88em; border-bottom: 1px dashed var(--vk-kenar); padding-bottom: 0.3em; } .vk .vk-bilgi-listesi > div:last-child { border-bottom: none; padding-bottom: 0; } .vk .vk-bilgi-listesi dt { color: var(--vk-metin-3); font-weight: 500; } .vk .vk-bilgi-listesi dt .vk-en { opacity: 0.85; } .vk .vk-bilgi-listesi dd { font-weight: 650; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .vk .vk-tutar { color: var(--vk-vurgu-metin); } /* ------------------------------------------------------------ KOŞULLAR VE ALT BİLGİ */ .vk .vk-dip { margin-top: 1.2em; padding-top: 0.9em; border-top: 1px solid var(--vk-kenar); break-inside: avoid; page-break-inside: avoid; } .vk .vk-kosullar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.8em 1.8em; font-size: 0.8em; color: var(--vk-metin-2); line-height: 1.5; } .vk .vk-kosullar.iki { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .vk .vk-kosul h4 { font-size: 0.92em; font-weight: 700; color: var(--vk-metin); margin: 0 0 0.3em; letter-spacing: 0.01em; } .vk .vk-kosul h4 + ul, .vk .vk-kosul h4 + p { margin-bottom: 0.7em; } .vk .vk-kosul ul { list-style: none; } .vk .vk-kosul li { position: relative; padding-left: 0.95em; margin-bottom: 0.2em; } .vk .vk-kosul li::before { content: ""; position: absolute; left: 0.1em; top: 0.62em; width: 0.32em; height: 0.32em; border-radius: 50%; background: var(--vk-vurgu); } .vk .vk-kosul p { white-space: pre-line; overflow-wrap: anywhere; } .vk .vk-kosul[lang="en"] { color: var(--vk-metin-3); } .vk.vk-dil-en .vk-kosul[lang="en"] { color: var(--vk-metin-2); } .vk .vk-imza { margin-top: 0.8em; text-align: center; font-size: 0.7em; color: var(--vk-metin-3); letter-spacing: 0.04em; } /* ------------------------------------------------------------ DAR EKRAN (telefon) — baskı ve A4 önizleme hariç */ @container (max-width: 600px) { .vk:not(.vk-a4):not(.vk-baski) .vk-bas { flex-direction: column; gap: 1em; } .vk:not(.vk-a4):not(.vk-baski) .vk-belge { text-align: left; } .vk:not(.vk-a4):not(.vk-baski) .vk-ozet { grid-template-columns: minmax(0, 1fr); } .vk:not(.vk-a4):not(.vk-baski) .vk-rota { padding: 0.3em 0.2em 0; } .vk:not(.vk-a4):not(.vk-baski) .vk-yolcu-sutunlar.iki, .vk:not(.vk-a4):not(.vk-baski) .vk-bilgiler.iki, .vk:not(.vk-a4):not(.vk-baski) .vk-kosullar.iki { grid-template-columns: minmax(0, 1fr); } .vk:not(.vk-a4):not(.vk-baski) .vk-alt-satir { grid-template-columns: minmax(0, 1fr); } .vk:not(.vk-a4):not(.vk-baski) .vk-referanslar { grid-template-columns: minmax(0, 1fr); } .vk:not(.vk-a4):not(.vk-baski) .vk-tablo .vk-uyruk, .vk:not(.vk-a4):not(.vk-baski) .vk-tablo .vk-kimlik { display: none; } .vk:not(.vk-a4):not(.vk-baski) .vk-tablo .vk-ad-alt { display: block; } } @media (max-width: 640px) { .vk:not(.vk-a4):not(.vk-baski) { padding: 2.2em 1.25em 1.5em; border-radius: 12px; font-size: 14px; } } /* ------------------------------------------------------------ BASKI KOPYASI (#etds-yazdir-kok > .etds-yazdir-ic > .vk.vk-baski) */ .vk.vk-baski { max-width: none; width: 100%; padding: 1.2em 0 0; border-radius: 0; box-shadow: none; font-size: 12.5px; } .vk.vk-baski .vk-tablo td, .vk.vk-a4 .vk-tablo td { padding-top: 0.32em; padding-bottom: 0.32em; } .vk.vk-baski .vk-yolcu-sutunlar.iki .vk-tablo, .vk.vk-a4 .vk-yolcu-sutunlar.iki .vk-tablo { font-size: 0.9em; } #etds-yazdir-kok { display: none; } /* Ölçüm: ekranın dışında, baskı genişliğinde (190 mm) görünmez olarak yerleşir */ #etds-yazdir-kok.etds-yazdir-olcum { display: block; position: absolute; left: -30000px; top: 0; width: 190mm; visibility: hidden; pointer-events: none; } @media print { @page { size: A4 portrait; /* Kenar boşluğu kopyanın içinde (10 mm). Sayfa kenarı 0 olunca Windows/Edge yazdırma penceresi adres ve tarih üst/alt bilgisini eklemez; içerik yine de 250 mm'yi aşmadığı için 10 mm kenarlı sayfaya da sığar. */ margin: 0; } html.etds-voucher-yazdir, html.etds-voucher-yazdir body { width: auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; } /* Uygulama kabuğu, pencereler, bildirim balonları, alt menüler... hiçbiri yer kaplamaz */ html.etds-voucher-yazdir body > *:not(#etds-yazdir-kok) { display: none !important; } html.etds-voucher-yazdir #etds-yazdir-kok { display: block !important; position: static !important; box-sizing: border-box; width: 100%; max-width: 210mm; margin: 0 auto; padding: 10mm; overflow: hidden; break-inside: avoid; page-break-inside: avoid; break-after: avoid; page-break-after: avoid; } html.etds-voucher-yazdir #etds-yazdir-kok .etds-yazdir-ic { height: var(--etds-yukseklik, auto); max-height: 250mm; overflow: hidden; } html.etds-voucher-yazdir #etds-yazdir-kok .vk { transform: scale(var(--etds-olcek, 1)); transform-origin: top center; } html.etds-voucher-yazdir #etds-yazdir-kok a { color: inherit !important; text-decoration: none !important; } }