/* ============================================================================= PIAR MEDYA — TEKLİF FORMU VE MODAL ----------------------------------------------------------------------------- TASARIM İLKELERİ 1. KESKİN KÖŞE. Hiçbir yerde yuvarlatma yok (radius: 0). Tek istisna radyo düğmesi: "birini seç" anlamını taşıyan tek biçim odur. 2. TEK RENK. Lacivert taşıyıcı renktir. Amber YALNIZ ilerleme çubuğunda ve adım numarasında kullanılır. 3. SAKİN TİPOGRAFİ. Ağırlık tavanı 600. Alan etiketleri küçük, büyük harf ve harf aralıklı — kurumsal form dili. 4. GÖLGE DEĞİL ÇİZGİ. Derinlik 1px kenarlıkla kurulur. 5. TEK BOŞLUK ÖLÇEĞİ. Bütün aralıklar 4px tabanlı `--pt-b*` değişkenlerinden gelir; hiçbir yerde serbest piksel yazılmaz. Dikey ritim böyle tutar. ⚠ KATMAN HARİTASI (main.css ile birlikte) 2.000.000.000 teklif modali ← engelleyici diyalog, en üstte 99.999.999 .sticky (yapışkan header, JS ile eklenir) 99.999 header 99.990 çerez şeridi Modal 9.999'da kaldığı sürece yapışkan header'ın ALTINDA kalıyordu. Bu değer .sticky'den büyük tutulmalıdır. ⚠ RENK KALITIMI: `main.css` içinde `body { color: #FFFFFF }` var ve modal ``nin doğrudan çocuğudur; `.wrapper-content` kapsamına GİRMEZ. Her metin kuralı rengini AÇIKÇA verir. ⚠ ÖZGÜLLÜK: `.piar-teklif-nav button` (0,0,1,1) tek sınıflı varyanttan (0,0,1,0) güçlüdür. Buton varyantları `.piar-teklif-nav` altında yazılır. ========================================================================== */ .piar-teklif, .piar-modal { --pt-lacivert: #0b1730; --pt-lacivert-2: #16264a; --pt-amber: #ffbf00; --pt-zemin: #ffffff; --pt-zemin-soft: #f4f6fa; --pt-cizgi: #dde2ea; --pt-cizgi-koyu: #a8b2c4; --pt-metin: #16203a; --pt-metin-soluk: #5d6779; --pt-metin-ters: #ffffff; --pt-metin-ters-s: rgba(255, 255, 255, .68); --pt-hata: #c0392b; --pt-hata-zemin: #fbeceb; --pt-basari: #14664c; /* Boşluk ölçeği — 4px tabanlı */ --pt-b1: 4px; --pt-b2: 8px; --pt-b3: 12px; --pt-b4: 16px; --pt-b5: 20px; --pt-b6: 24px; --pt-b7: 28px; color-scheme: light; } .piar-teklif { max-width: 720px; margin: 0 auto; color: var(--pt-metin); font-family: inherit; font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; } /* ----------------------------------------------------------------------------- ÜST BANT -------------------------------------------------------------------------- */ .piar-teklif-ust { margin-bottom: var(--pt-b7); padding: var(--pt-b6) var(--pt-b6) var(--pt-b5); border-radius: 0; background-color: var(--pt-lacivert); color: var(--pt-metin-ters); } .piar-teklif-basliklar { margin-bottom: var(--pt-b5); padding-right: 48px; /* kapatma butonuna yer */ } .piar-teklif-h { margin: 0 0 var(--pt-b1); font-size: 20px; font-weight: 600; line-height: 1.35; letter-spacing: -.1px; color: var(--pt-metin-ters); } .piar-teklif-p { margin: 0; font-size: 13.5px; font-weight: 400; line-height: 1.6; color: var(--pt-metin-ters-s); } .piar-teklif-ilerleme { display: flex; align-items: center; gap: var(--pt-b4); } .piar-teklif-cubuk { flex: 1 1 auto; height: 3px; border-radius: 0; background-color: rgba(255, 255, 255, .16); overflow: hidden; } .piar-teklif-cubuk span { display: block; height: 100%; border-radius: 0; background-color: var(--pt-amber); transition: width .3s ease; } .piar-teklif-sayac { flex: 0 0 auto; font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; color: var(--pt-metin-ters-s); } .piar-teklif-sayac b { color: var(--pt-amber); font-weight: 600; } /* ----------------------------------------------------------------------------- ADIM -------------------------------------------------------------------------- */ .piar-teklif-adim { border: 0; padding: 0; margin: 0; min-width: 0; color: var(--pt-metin); } .piar-teklif-legend { display: block; width: auto; float: none; padding: 0; margin-bottom: var(--pt-b1); font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--pt-metin); } .piar-teklif-yardim { margin: 0 0 var(--pt-b4); font-size: 13px; line-height: 1.55; color: var(--pt-metin-soluk); } /* Yardım metni yoksa başlık ile kartlar arası aynı ritmi korur. */ .piar-teklif-legend + .piar-teklif-secenekler, .piar-teklif-legend + .piar-teklif-izgara { margin-top: var(--pt-b4); } /* ----------------------------------------------------------------------------- SEÇENEK KARTLARI -------------------------------------------------------------------------- */ .piar-teklif-secenekler { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 1px; /* bitişik ızgara: tek çizgi hissi */ background-color: var(--pt-cizgi); border: 1px solid var(--pt-cizgi); } .piar-teklif-secenek { position: relative; display: flex; align-items: center; gap: var(--pt-b3); min-height: 54px; margin: 0; padding: var(--pt-b3) var(--pt-b4); border: 0; border-radius: 0; background-color: var(--pt-zemin); color: var(--pt-metin); font-size: 14.5px; font-weight: 400; line-height: 1.45; cursor: pointer; transition: background-color .12s ease; } .piar-teklif-secenek span { flex: 1 1 auto; color: var(--pt-metin); } .piar-teklif-secenek:hover { background-color: var(--pt-zemin-soft); } .piar-teklif-secenek:has(input:checked) { background-color: var(--pt-zemin-soft); box-shadow: inset 0 0 0 1.5px var(--pt-lacivert); } .piar-teklif-secenek input:checked + span { font-weight: 600; color: var(--pt-metin); } .piar-teklif-secenek:focus-within { outline: 2px solid var(--pt-lacivert); outline-offset: -1px; z-index: 1; } .piar-teklif-secenek input { flex: 0 0 auto; width: 17px; height: 17px; margin: 0; border: 1px solid var(--pt-cizgi-koyu); border-radius: 0; background-color: var(--pt-zemin); background-repeat: no-repeat; background-position: center; background-size: 0 0; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background-color .12s ease, border-color .12s ease; } .piar-teklif-secenek input[type="radio"] { border-radius: 50%; } .piar-teklif-secenek input:checked { border-color: var(--pt-lacivert); background-color: var(--pt-lacivert); } .piar-teklif-secenek input[type="radio"]:checked { background-image: radial-gradient(circle, #ffffff 34%, transparent 36%); background-size: 100% 100%; } .piar-teklif-secenek input[type="checkbox"]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.4 8.4l3 3L12.6 5' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='square'/%3E%3C/svg%3E"); background-size: 11px 11px; } /* ----------------------------------------------------------------------------- ALANLAR -------------------------------------------------------------------------- */ .piar-teklif-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pt-b5); } .piar-teklif-izgara > .piar-teklif-alan { margin-top: 0; grid-column: 1 / -1; } .piar-teklif-izgara > .piar-teklif-alan--yarim { grid-column: span 1; } .piar-teklif-alan { margin-top: var(--pt-b5); } .piar-teklif-alan label { display: block; margin-bottom: var(--pt-b2); font-size: 11.5px; font-weight: 600; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--pt-metin-soluk); } .piar-teklif-alan .form-control { display: block; width: 100%; min-height: 46px; padding: var(--pt-b3); border: 1px solid var(--pt-cizgi); border-radius: 0; background-color: var(--pt-zemin); color: var(--pt-metin); font-family: inherit; font-size: 15px; font-weight: 400; line-height: 1.5; transition: border-color .12s ease; -webkit-appearance: none; appearance: none; } .piar-teklif-alan textarea.form-control { min-height: 104px; resize: vertical; } .piar-teklif-alan .form-control::placeholder { color: #939cad; opacity: 1; } .piar-teklif-alan .form-control:hover { border-color: var(--pt-cizgi-koyu); } .piar-teklif-alan .form-control:focus { border-color: var(--pt-lacivert); outline: 1px solid var(--pt-lacivert); outline-offset: -2px; } .piar-teklif-alan input[type="file"].form-control { padding: var(--pt-b2); font-size: 13px; cursor: pointer; } .piar-teklif-alan input[type="file"]::file-selector-button { margin-right: var(--pt-b3); padding: var(--pt-b2) var(--pt-b4); border: 0; border-radius: 0; background-color: var(--pt-lacivert); color: var(--pt-metin-ters); font-family: inherit; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; } /* KVKK aydınlatma satırı — son adımda, gönder butonunun üstünde. ⚠ Rengi açıkça verilir: modal `body { color:#FFF }` mirasını alır. */ .piar-teklif-kvkk { grid-column: 1 / -1; margin: 0; padding-top: var(--pt-b4); border-top: 1px solid var(--pt-cizgi); font-size: 12px; line-height: 1.6; color: var(--pt-metin-soluk); } .piar-teklif-kvkk a { color: var(--pt-metin); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .piar-teklif-kvkk a:hover { color: var(--pt-lacivert); } .piar-teklif-kvkk a:focus-visible { outline: 2px solid var(--pt-lacivert); outline-offset: 2px; } /* İletişim ve kariyer formlarındaki aynı bilgilendirme satırı. O sayfalar `.wrapper-content` KAPSAMI DIŞINDA (inner-bg/inner-pages) ve `body { color:#FFF }` mirasını alıyor; rengi burada açıkça veriliyor. Bu dosya `_teklif-modal.php` üzerinden her sayfada yüklendiği için stil site geneline ulaşır. */ .piar-form-kvkk { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid #dde2ea; font-size: 12px; line-height: 1.6; color: #5d6779; } .piar-form-kvkk a { color: #16203a; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .piar-form-kvkk a:hover { color: #0b1730; } .piar-form-kvkk a:focus-visible { outline: 2px solid #0b1730; outline-offset: 2px; } .piar-teklif-bos { border-color: var(--pt-hata) !important; } /* Basit formlarda (iletisim, kariyer) gecersiz alan isareti — piar-form.js */ .piar-alan-hata { border-color: #c0392b !important; box-shadow: 0 0 0 3px rgba(192, 57, 43, .14) !important; } .piar-teklif-yildiz { color: var(--pt-hata); font-weight: 600; } .piar-teklif-not { display: block; margin-top: var(--pt-b2); font-size: 12px; line-height: 1.5; color: var(--pt-metin-soluk); } /* ----------------------------------------------------------------------------- HATA VE SONUÇ -------------------------------------------------------------------------- */ .piar-teklif-hata { margin: var(--pt-b4) 0 0; padding: var(--pt-b3); border: 0; border-left: 2px solid var(--pt-hata); border-radius: 0; background-color: var(--pt-hata-zemin); color: var(--pt-hata); font-size: 13px; font-weight: 500; line-height: 1.5; } .piar-teklif-sonuc { color: var(--pt-metin); font-size: 14.5px; } .piar-teklif-sonuc:not(:empty) { margin-top: var(--pt-b5); } .piar-teklif-sonuc .alert { margin: 0; padding: var(--pt-b4); border: 1px solid transparent; border-radius: 0; line-height: 1.55; } .piar-teklif-sonuc .alert-success { background-color: #eef5f2; border-color: #c3ded3; color: var(--pt-basari); } .piar-teklif-sonuc .alert-danger, .piar-teklif-sonuc .alert-warning { background-color: var(--pt-hata-zemin); border-color: #eec9c5; color: var(--pt-hata); } /* ----------------------------------------------------------------------------- GEZİNME -------------------------------------------------------------------------- */ .piar-teklif-nav { display: flex; align-items: center; gap: var(--pt-b2); margin-top: var(--pt-b6); padding-top: var(--pt-b5); border-top: 1px solid var(--pt-cizgi); } .piar-teklif-nav button { min-height: 46px; padding: 0 var(--pt-b6); border: 1px solid transparent; border-radius: 0; font-family: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1; color: var(--pt-metin); cursor: pointer; transition: background-color .12s ease, border-color .12s ease; } .piar-teklif-nav button:focus-visible { outline: 2px solid var(--pt-lacivert); outline-offset: 2px; } .piar-teklif-nav button:disabled { opacity: .5; cursor: default; } .piar-teklif-nav .piar-teklif-geri { background-color: transparent; color: var(--pt-metin-soluk); border-color: var(--pt-cizgi); } .piar-teklif-nav .piar-teklif-geri:hover { background-color: var(--pt-zemin-soft); border-color: var(--pt-cizgi-koyu); color: var(--pt-metin); } .piar-teklif-nav .piar-teklif-ileri, .piar-teklif-nav .piar-teklif-gonder { margin-left: auto; background-color: var(--pt-lacivert); border-color: var(--pt-lacivert); color: var(--pt-metin-ters); } .piar-teklif-nav .piar-teklif-ileri:hover, .piar-teklif-nav .piar-teklif-gonder:hover { background-color: var(--pt-lacivert-2); border-color: var(--pt-lacivert-2); } /* ----------------------------------------------------------------------------- MODAL -------------------------------------------------------------------------- */ .piar-modal[hidden] { display: none; } .piar-modal { position: fixed; inset: 0; /* main.css: .sticky = 99999999. Modal onun ÜSTÜNDE olmalı. */ z-index: 2000000000; display: flex; align-items: center; justify-content: center; padding: var(--pt-b6); color: var(--pt-metin); } .piar-modal-perde { position: absolute; inset: 0; background-color: rgba(11, 23, 48, .74); } .piar-modal-kutu { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 720px; max-height: 92vh; border-radius: 0; background-color: var(--pt-zemin); color: var(--pt-metin); box-shadow: 0 20px 50px -20px rgba(11, 23, 48, .55); overflow: hidden; } .piar-modal-govde { --pt-gx: var(--pt-b7); --pt-gt: var(--pt-b7); --pt-gb: var(--pt-b6); padding: var(--pt-gt) var(--pt-gx) var(--pt-gb); overflow-y: auto; overscroll-behavior: contain; color: var(--pt-metin); /* Kaydırma çubuğu ince ve nötr: bant kenardan kenara giderken çubuğun kapladığı şerit göze batmasın. Mobilde çubuk zaten bindirmeli (0px). */ scrollbar-width: thin; scrollbar-color: var(--pt-cizgi-koyu) transparent; } .piar-modal-govde::-webkit-scrollbar { width: 8px; } .piar-modal-govde::-webkit-scrollbar-track { background: transparent; } .piar-modal-govde::-webkit-scrollbar-thumb { background: var(--pt-cizgi-koyu); } .piar-modal .piar-teklif-ust { position: sticky; top: calc(var(--pt-gt) * -1); z-index: 3; margin: calc(var(--pt-gt) * -1) calc(var(--pt-gx) * -1) var(--pt-b7); padding: var(--pt-b6) var(--pt-gx) var(--pt-b5); } .piar-modal .piar-teklif-nav { position: sticky; bottom: calc(var(--pt-gb) * -1); z-index: 2; margin: var(--pt-b6) calc(var(--pt-gx) * -1) calc(var(--pt-gb) * -1); padding: var(--pt-b4) var(--pt-gx) var(--pt-gb); background-color: var(--pt-zemin); } .piar-modal-kapat { position: absolute; top: var(--pt-b6); right: var(--pt-b6); z-index: 5; width: 30px; height: 30px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 0; background-color: transparent; color: var(--pt-metin-ters); font-size: 18px; line-height: 1; cursor: pointer; transition: background-color .12s ease, border-color .12s ease; } .piar-modal-kapat:hover { background-color: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .6); } .piar-modal-kapat:focus-visible { outline: 2px solid var(--pt-amber); outline-offset: 2px; } body.piar-modal-acik { overflow: hidden; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ----------------------------------------------------------------------------- DUYARLI -------------------------------------------------------------------------- */ @media (max-width: 700px) { .piar-teklif-izgara { grid-template-columns: 1fr; gap: var(--pt-b5); } .piar-teklif-izgara > .piar-teklif-alan--yarim { grid-column: 1 / -1; } } @media (max-width: 600px) { .piar-modal { padding: 0; align-items: stretch; } .piar-modal-kutu { max-width: none; max-height: 100vh; max-height: 100dvh; } .piar-modal-govde { --pt-gx: var(--pt-b4); --pt-gt: var(--pt-b4); --pt-gb: var(--pt-b3); } .piar-modal .piar-teklif-ust { padding: var(--pt-b5) var(--pt-gx) var(--pt-b4); margin-bottom: var(--pt-b6); } .piar-modal .piar-teklif-nav { padding-bottom: max(var(--pt-gb), env(safe-area-inset-bottom)); } .piar-teklif-h { font-size: 18px; } .piar-teklif-p { font-size: 13px; } .piar-teklif-legend { font-size: 15.5px; } .piar-teklif-basliklar { margin-bottom: var(--pt-b4); padding-right: 44px; } .piar-teklif-secenekler { grid-template-columns: 1fr; } .piar-teklif-secenek { min-height: 52px; } /* 16px yazı iOS'ta odaklanınca yakınlaştırmayı engeller. */ .piar-teklif-alan .form-control { min-height: 48px; font-size: 16px; } .piar-teklif-alan textarea.form-control { min-height: 100px; } .piar-teklif-nav { flex-wrap: wrap; gap: var(--pt-b2); } .piar-teklif-nav button { flex: 1 1 100%; min-height: 48px; padding: 0 var(--pt-b4); } .piar-teklif-nav .piar-teklif-ileri, .piar-teklif-nav .piar-teklif-gonder { margin-left: 0; order: -1; } .piar-modal-kapat { top: var(--pt-b4); right: var(--pt-b4); width: 28px; height: 28px; font-size: 17px; } } @media (prefers-reduced-motion: reduce) { .piar-teklif-secenek, .piar-teklif-secenek input, .piar-teklif-nav button, .piar-modal-kapat, .piar-teklif-cubuk span { transition: none; } }