/* =========================================================
   SEGURO SİGORTA — CMS katmanı (nopCommerce / e-Alora · a9)
   style.css (tasarım) a4 ile BİREBİR aynıdır ve değiştirilmez.
   Bu dosya yalnız CMS'e özgü olanı tutar:
     1) Eski tema sızıntıları
     2) Modül markup'ının tasarımdan farkları (DB içeriği, ASP.NET kontrolleri)

   Tema CSS'leri (App_Themes/segurosigorta) Root.Master'da "@layer tema" içine alınır;
   katmansız tasarım kuralları onları özgüllükten bağımsız olarak her zaman yener.
   Sızan, yalnız tasarımın HİÇ tanımlamadığı özelliklerdir. Bunlar :where() ile (özgüllük 0)
   sıfırlanır: tema kuralını yener, tasarımın hiçbir kuralını ezmez. "revert" değeri, a4'teki
   gibi tarayıcı varsayılanına döner.
   ========================================================= */

/* ---------- 1. Tema sızıntıları ---------- */

/* Bootstrap 3: html{font-size:62.5%} → tasarımdaki rem ölçüleri %37 küçülüyordu */
:where(html) { font-size: revert; height: revert; }

/* Tema: p{font-family:Roboto;font-weight:400} · mobil p{padding-bottom:10px} */
:where(p) { font-family: revert; font-weight: revert; padding-bottom: 0; }

/* Tema/Bootstrap başlık boyutları (mobilde h1 50px, h2 40px, h3 30px), h5/h6 yazı tipi, footer h4 capitalize */
:where(h1, h2, h3, h4, h5, h6) { font-size: revert; text-transform: revert; }
:where(h5, h6) { font-family: revert; font-weight: revert; line-height: revert; margin: revert; }
:where(strong, b) { font-weight: revert; }
:where(small) { font-size: revert; }
:where(cite) { font-style: revert; }
:where(ol) { margin: revert; padding: revert; }
:where(blockquote) { margin: revert; padding: revert; border: revert; font-size: revert; }
:where(blockquote p) { font-size: revert; font-weight: revert; line-height: revert; }

/* Tema: header{position:absolute;background:#fff} · header *{transition:all .5s linear} */
:where(header *) { transition: none; }

/* Tema: footer{background:#3d3d3d;color:#fff;font-size:14px} · footer img{width:220px} */
:where(footer) { color: revert; font-size: revert; }
:where(footer img) { width: revert; }

/* Bootstrap: .container / .nav :before/:after{display:table} — tasarımda bunlar flex/grid kabı,
   sözde öğeler fazladan hücre/boşluk oluşturuyordu */
:where(.container)::before, :where(.container)::after,
:where(.nav)::before, :where(.nav)::after { content: none; }

/* Bootstrap .btn: 1px saydam kenar, vertical-align:middle, user-select:none */
:where(.btn) { border: 0; vertical-align: revert; user-select: revert; -webkit-user-select: revert; }

/* Bootstrap label{display:inline-block;margin-bottom:5px;font-weight:bold} */
:where(label) { margin-bottom: revert; }

/* Tema: select/input{float:left;margin:0 0 5px} · mobil select{width:108px} */
:where(input, select, textarea) { float: none; margin: revert; }

/* Tema: select ve dosya alanına ../images/custom-select.png (sunucuda yok → 404). Eski modüllerdeki
   select'lere tasarımın ok simgesi, dosya alanına hiçbir şey */
:where(select) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='%23202868'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; }
:where(input[type="file"])::after { background: none; }

/* Tema: .team{margin-top:16px} */
:where(.team) { margin-top: revert; }

/* Bootstrap: a:focus{outline:thin dotted} — fareyle tıklamada odak çerçevesi; klavye odağı (focus-visible) tasarımda */
:where(a, button, .btn):focus:not(:focus-visible) { outline: none; }


/* ---------- 2. CMS'e özgü ---------- */

/* İletişim formu (ContactUs.ascx — DLL gönderir): doğrulama mesajları, sonuç paneli, KVKK notu */
.field__err { font-size: .74rem; font-weight: 700; color: #c0392b; }
.form-result { display: block; margin-bottom: 16px; padding: 14px 16px; border-radius: 12px; background: var(--sky-soft); color: var(--navy); font-weight: 700; }
.form-card .form-note { margin-top: 14px; font-size: .78rem; font-weight: 600; color: var(--muted); }
.form-card .form-note a { text-decoration: underline; }
.form-card input.btn { margin-top: 18px; border: 0; cursor: pointer; font-family: inherit; }

/* İK başvuru formu (basvuruform.ascx — DLL gönderir; Bootstrap işaretlemesi) tasarımın alan görünümüyle */
.form-card--cms .col-md-6 { width: auto; float: none; padding: 0; min-height: 0; }
.form-card--cms .well2 > h4 { display: none; }               /* başlık kartın kendi h3'ünde */
.form-card--cms .form-group { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; font-size: 0; }   /*   artıkları */
.form-card--cms .form-group label { margin: 0; font-size: .76rem; font-weight: 800; letter-spacing: .04em; color: var(--navy-ink); text-transform: uppercase; }
.form-card--cms .form-control {
  width: 100%; height: auto; min-height: 48px; border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 14px;
  font: inherit; font-size: 1rem; font-weight: 600; color: var(--text); background: #fff; box-shadow: none;
  transition: border-color var(--dur), box-shadow var(--dur);
}
.form-card--cms .form-control:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 4px rgba(88, 192, 232, .22); }
.form-card--cms input[type=file].form-control { padding: 7px 10px; font-size: .9rem; font-weight: 500; }
/* tema dosya alanının düğmesini gizleyip ::after ile sahte "Dosya Seç" çiziyor (metnin üstüne biniyordu) */
.form-card--cms input[type=file]::after { content: none; }
.form-card--cms input[type=file]::-webkit-file-upload-button {
  width: auto; margin: 0 12px 0 0; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--navy); font: inherit; font-weight: 700; cursor: pointer;
}
.form-card--cms input[type=file]::file-selector-button {
  width: auto; margin: 0 12px 0 0; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--navy); font: inherit; font-weight: 700; cursor: pointer;
}

/* Başlıklar panelden geliyor (slayt, kategori adı): uzun kelime/büyük harf metin kutudan taşmasın.
   Asıl çözüm seguro-cms.js'te (sığmayan kelimede yazı boyutu küçülür); bu, JS çalışmazsa son çare. */
.hero__title, .phero__title { overflow-wrap: anywhere; }

/* İK formu doğrulama mesajları (sunucuda "*" yerine metin yazılır): tema bunları alanın içine mutlak
   konumluyordu; ASP.NET "visibility:hidden" ile gizlerken yer kaplamasın */
.form-card--cms .well2 span.field__err { position: static; display: block; font-size: .74rem; font-weight: 700; color: #c0392b !important; }
.form-card--cms .well2 span.field__err[style*="visibility:hidden"] { display: none; }
.form-card--cms .form-note { margin-top: 14px; font-size: .78rem; font-weight: 600; color: var(--muted); }
.form-card--cms .form-note a { text-decoration: underline; }

/* Teklif Al sihirbazı (teklifal.ascx — eski Bootstrap bileşeni, a4'te karşılığı yok): tasarımın eleman
   sıfırlamaları (button, a, ul, p, h… ve .btn/.nav) içeride geri alınır; tema + Bootstrap ("@layer tema") ve
   modülün kendi #BasvuruSihirbazi kuralları eskisi gibi uygulanır. Özgüllük (0,0,1)/(0,1,0): tasarımın eleman
   kurallarını yener (sonra yüklenir), modülün kimlikli kurallarına yenilir. */
:where(#BasvuruSihirbazi) :is(button, a, ul, ol, li, p, h1, h2, h3, h4, h5, h6, img, label, input, select, textarea, span, i),
:where(#BasvuruSihirbazi) :is(.btn, .nav) { all: revert-layer; }
:where(#BasvuruSihirbazi) .btn::after { content: none; }
/* Yukarıdaki genel kural (:where(.nav)::before/::after{content:none}) sihirbazın sekme şeridinin clearfix'ini de
   kapatıyordu: yüzen <li>'ler taşınmayınca ul 1px kalıyor, adımları bağlayan çizgi dairelerin üstüne çıkıyordu */
:where(#BasvuruSihirbazi) .nav::before, :where(#BasvuruSihirbazi) .nav::after { content: " "; }
/* Tema tüm onay kutularını ekran dışına itiyor (input[type=checkbox]{position:absolute;left:-999em}) →
   sihirbazın KVKK / ileti onayı işaretlenemiyor, 1. adım tamamlanamıyordu (canlı sitede de böyle) */
#BasvuruSihirbazi input[type="checkbox"], #BasvuruSihirbazi input[type="radio"] {
  position: static; left: auto; width: 18px; height: 18px; margin: 0 8px 0 0; vertical-align: middle; accent-color: var(--navy);
}

/* a4 tasarım hatası: mobilde ".wa-float span{display:none}" ikonu ve yazıyı da gizliyordu (30×16 boş hap).
   Tasarımın amacı: ikon + "Hemen Teklif Al" kalsın, alt satır ("Sadece 1 dakika") gizlensin */
@media (max-width: 720px) {
  .wa-float .wa-float__icon { display: inline-flex; }
  .wa-float > span:not(.wa-float__icon) { display: block; }
  .wa-float > span:not(.wa-float__icon) > span { display: none; }
}
/* a4 tasarım hatası: ".sector span{font-size:.82rem;color:var(--muted)}" kart ikonunu da küçültüp griye boyuyordu
   (46px kutuda 13px ikon; Ürünler / Kurumsal / Referanslar kartları). Diğer ikon kutularıyla aynı: 24px, lacivert */
.sector .sector__icon .material-symbols-rounded { font-size: 24px; font-weight: 400; color: var(--navy); }

/* Sayfa sonunda yüzen WhatsApp düğmesi alt şeridin (KVKK / İletişim bağlantıları) üstüne binmesin: şerit görünürken düğme
   gizlenir (seguro-cms.js). Eski çözümdeki 76 px boşluk mobilde boş koyu bir bant gibi görünüyordu (müşteri revizesi 2026-10-07). */
.wa-float { transition: transform var(--dur) var(--ease), box-shadow var(--dur), opacity .25s ease, visibility .25s; }
.wa-float.is-gizli { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(16px); }

/* Esc ile kapatılan açılır menü (seguro-cms.js): :focus-within açık tutmasın */
.nav__item.esc-kapali > .dropdown { opacity: 0; visibility: hidden; transform: translateY(10px); }

/* a4 tasarım hatası: mega menü tanıtım kartı ".dropdown > a" kuralını da alıyor → koyu zeminde koyu başlık
   (1,2:1), üzerine gelince açık zemin */
.dropdown > a.mega__promo, .dropdown > a.mega__promo:hover { color: #fff; background: var(--navy); padding-left: 12px; }
.form-card--cms .text-right { text-align: left; }
.form-card--cms input[type=submit] {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: 4px; padding: 12px 24px;
  border: 0; border-radius: 10px; background: var(--navy); color: #fff; font: inherit; font-size: .95rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 8px 20px rgba(32, 40, 104, .25); transition: background-color var(--dur), transform var(--dur) var(--ease);
}
.form-card--cms input[type=submit]:hover { background: var(--navy-deep); transform: translateY(-2px); }
.form-card--cms [id$="lblmyResult"]:not(:empty) { display: block; margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--sky-soft); color: var(--navy); font-size: .9rem; font-weight: 700; }


/* =========================================================
   3. TASARIM GÜNCELLEMELERİ — 2 Ekim 2026 (Erkan Bey geri bildirimi)
   a9'a özgü; a4 kıyas için olduğu gibi kalır. Geri almak için bu bölümü silmek yeterli.
   ========================================================= */

/* Üst bilgi barı: e-posta ve WhatsApp kaldırıldı (Header.ascx); kalan öğeler ince ayraçlı ve ferah */
.topbar__inner { min-height: 42px; }
.topbar__list { gap: 0; }
.topbar__list > li + li { margin-left: 22px; padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, .16); }
.topbar__list a, .topbar__list span { gap: 8px; }
.topbar__social { gap: 6px; }

/* Hero: daha sade — kutular daralır ve hafif saydamlaşır, fotoğraf ortada açık kalır */
.hero__copies { background: rgba(241, 240, 230, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.quote-card { background: rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@media (min-width: 1081px) {
  .hero__inner { grid-template-columns: minmax(0, 540px) minmax(0, 404px); justify-content: space-between; }
  .hero__copies { padding: 30px 34px; }
  .hero__title { font-size: clamp(2.2rem, 3.2vw, 3.1rem); max-width: none; margin-bottom: 16px; }
  .hero__text { font-size: 1rem; line-height: 1.65; margin-bottom: 24px; }
  .quote-card { padding: 22px 24px; }
  .quote-card__head { margin-bottom: 16px; }
  .quote-card__icon { width: 42px; height: 42px; }
  .quote-card__head h3 { font-size: 1.2rem; }
  .quote-card .input { min-height: 44px; }
  /* fotoğrafın soldaki krem solması azalır (panel artık dar) */
  .hero__slide img {
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .35) 0%, #000 24%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, .35) 0%, #000 24%);
  }
}

/* =========================================================
   4. HIZ / DÜZEN KAYMASI — 2 Ekim 2026 (SEO çalışması)
   ========================================================= */

/* İkon yazı tipi (Material Symbols) gelene kadar ikon adı ("chevron_right" …) düz yazı olarak geniş yer kaplıyor,
   yazı tipi yüklenince daralıyordu → kırıntı / düğme satırları yeniden diziliyor, içerik kayıyordu (CLS ~0,2).
   İkon kutusu her zaman 1em × 1em; ad yazısı taşarsa görünmez. */
/* :where() → özgüllük 0: ikona kendi boyutunu veren tasarım kuralları (ör. Instagram video rozeti) her zaman üstün */
:where(.material-symbols-rounded) { width: 1em; height: 1em; overflow: hidden; flex-shrink: 0; }
/* Logo görsellerine boyut nitelikleri (width/height) eklendi (yer ayrılsın, kayma olmasın); tasarım CSS'i mobil menü ve
   footer logosunda yalnız yükseklik veriyor → genişlik orana göre hesaplansın */
.mnav__head img, .footer__brand img { width: auto; }

/* ---------- 5. Yedek yazı tipleri (2026-10-02, performans — CLS) ----------
   Fraunces / Manrope Google'dan gelene kadar metin yedek yazı tipiyle çizilir. "Fraunces Yedek" ve "Manrope Yedek"
   (Root.Master satır içi @font-face: Times New Roman / Arial ailesi, size-adjust ile web yazı tipinin genişliğine
   eşitlenmiş — W:\a9\araclar\yedek_font_olc.py) sayesinde satırlar aynı yerden kırılır, yazı tipi gelince sayfa kaymaz.
   style.css'teki değişkenlerin aynısı, yalnız araya yedek aile eklendi. */
:root {
  --font-display: 'Fraunces', 'Fraunces Yedek', Georgia, 'Times New Roman', serif;
  --font-body: 'Manrope', 'Manrope Yedek', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
/* Fraunces geniş ekranda büyük boyutta daha dar çizilir (optik boyut): sayfa başlığı (44–51 px) için ayrı ayarlı yedek */
@media (min-width: 1100px) {
  /* max-width: style.css'teki 20ch, Fraunces 600'de 44–51 px'te 13,23–13,30 em ölçüldü; ch o an çizilen yazı tipinin
     '0' genişliğine bağlı olduğundan yedek yazı tipinde kutu daralıp başlık bir satır fazla kırılıyordu */
  .phero__title { font-family: 'Fraunces', 'Fraunces Yedek B', Georgia, 'Times New Roman', serif; max-width: 13.26em; }
}

/* ---------- 6. Erişilebilirlik (2026-10-05, Erkan Bey onayı) ----------
   WhatsApp yeşili (#25d366) üstünde beyaz yazı 1,98:1 idi (WCAG AA en az 4,5:1). Aynı ton ve doygunlukta koyulaştırılmış
   yeşil: #188741 (beyazla 4,58:1); yüzen düğmede yazılar tam beyaz (style.css'teki %90 saydamlık kalktı). */
:root { --wa: #188741; --wa-deep: #136d35; }
.btn--wa { box-shadow: 0 8px 20px rgba(24, 135, 65, .35); }
.wa-float { box-shadow: 0 12px 30px rgba(24, 135, 65, .40); }
.wa-float:hover { box-shadow: 0 18px 36px rgba(24, 135, 65, .5); }
.wa-float span { opacity: 1; }
/* Menü ok düğmesi 22 → 24 px (en küçük dokunma alanı); kenar boşlukları 1'er px azaltıldı, menü yerleşimi değişmez */
.nav__chev { width: 24px; height: 24px; margin-left: -9px; margin-right: 3px; }
/* Küçük mavi etiketler: #1f9fd3 açık zeminde 2,8–3,0:1 idi → aynı tonda #17749a (beyaz 5,25:1, #f6f7fb 4,9:1).
   Koyu zemindeki .eyebrow--light değişmez. */
.eyebrow:not(.eyebrow--light), .post__cat { color: #17749a; }
/* Menü oku bağlantının sağ boşluğunun altında kalıyordu (tıklanabilir alan 15×24) → bağlantının üstünde, görünüm aynı */
.nav__chev { position: relative; z-index: 1; }
/* İhbar hattı ikonları #1f9fd3 (beyazda 3,0:1, lacivertte 4,4:1) → beyazda #17749a, lacivert kartta açık mavi;
   KVKK bilgi kutusu bağlantısı #17749a */
.hotline .material-symbols-rounded { color: #17749a; }
.hotline--primary .material-symbols-rounded { color: var(--sky); }
.legal .infobox a { color: #17749a; }
/* Teklif kartı vurgusu: "Hemen Teklif Al" / mega menü kartına tıklanınca (seguro-cms.js) — müşteri revizesi 2026-10-07 */
.quote-card.is-vurgu { animation: teklifVurgu 1.8s ease-out 1; }
@keyframes teklifVurgu {
  0%, 35% { outline: 3px solid rgba(88, 192, 232, .95); outline-offset: 4px; }
  100% { outline: 3px solid rgba(88, 192, 232, 0); outline-offset: 12px; }
}
@media (prefers-reduced-motion: reduce) { .quote-card.is-vurgu { animation: none; outline: 3px solid var(--sky); outline-offset: 4px; } }

/* =========================================================
   7. MÜŞTERİ REVİZESİ 2026-10-13 — ana sayfa slaytı: yazı görselin üzerinde
   "İki ayrı kutucuk ekranı kalabalık gösteriyor": soldaki krem yazı kutusu kalktı, yazı fotoğrafın üzerinde;
   okunurluk için fotoğrafın solunda lacivert geçiş (sağa doğru açılır). Ekranda yalnız teklif kartı kutu olarak kalır.
   ========================================================= */
.hero { background: var(--navy-deep); color: #fff; }
.hero__slide img { -webkit-mask-image: none; mask-image: none; }
.hero__slide::after {
  background: linear-gradient(90deg, rgba(20, 26, 69, .88) 0%, rgba(20, 26, 69, .72) 30%, rgba(20, 26, 69, .30) 55%, rgba(20, 26, 69, 0) 75%);
}
.hero__copies {
  background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.hero__title { color: #fff; text-shadow: 0 2px 18px rgba(10, 14, 40, .35); }
.hero__title em { color: var(--sky); }
.hero__text { color: rgba(255, 255, 255, .9); }
.hero .eyebrow--light { color: #fff; }
.hero .btn--accent { background: #fff; color: var(--navy); box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }
.hero .btn--accent:hover { background: var(--sky); color: var(--navy-deep); }
.hero .btn--ghost { border-color: rgba(255, 255, 255, .7); color: #fff; background: rgba(255, 255, 255, .08); }
.hero .btn--ghost:hover { background: #fff; border-color: #fff; color: var(--navy); }
.hero__counter { color: rgba(255, 255, 255, .85); }
.hero__dot { background: rgba(255, 255, 255, .35); }
.hero__dot.is-active { background: #fff; }

/* Tablet ve mobil: fotoğraf yazının arkasında (üstte açık, yazıya doğru koyulaşır); teklif kartı altta */
@media (max-width: 1080px) {
  .hero__bg { inset: 0; height: auto; }
  .hero__slide::after {
    background: linear-gradient(180deg, rgba(20, 26, 69, .25) 0%, rgba(20, 26, 69, .72) 38%, rgba(20, 26, 69, .92) 70%, var(--navy-deep) 100%);
  }
  .hero__inner { padding-top: 150px; }
  .hero__copies { padding: 0; }
}
@media (max-width: 720px) {
  .hero__inner { padding-top: 120px; }
  .hero__copies { padding: 0; }
}