/* Türkbil — "Sizi arayalım": sol kenar sekmesi + sağ panel. Karanlık kip varsayılan, aydınlık kip ELLE-AYDINLIK bloğunda. */

/* ---- Sekme (sol kenar, dikey ortada) ---- */
.tb-ara-sekme{position:fixed;inset-inline-start:0;inset-block-start:50%;z-index:1035;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.85rem .5rem .95rem;border:1px solid rgba(159,211,255,.2);border-inline-start:0;border-radius:0 .7rem .7rem 0;background:linear-gradient(180deg,#071B36 0%,#0F2C51 70%,#1B3F6B 100%);color:rgba(255,255,255,.9);box-shadow:0 10px 24px -12px rgba(0,0,0,.6);cursor:pointer;transition:transform .2s ease,color .2s ease}
.tb-ara-sekme:hover,.tb-ara-sekme:focus-visible{transform:translateY(-50%) translateX(3px);color:#fff;outline:0}
.tb-ara-sekme:focus-visible{box-shadow:0 0 0 3px rgba(159,211,255,.55)}
.tb-ara-sekme-ikon{display:grid;place-items:center;inline-size:1.6rem;block-size:1.6rem;color:inherit;font-size:1.05rem}
.tb-ara-sekme-ikon i{display:inline-block;transform:rotate(-45deg) scaleX(-1)} /* ahize dik, yüzü (uçları) sol duvara bakar */
/* "Ben buradayım": 10 saniyede bir ~1 saniyelik zil titreşimi (3 salınım, ±14°, hafif büyüme); üzerine gelince durur, hareket azaltma tercihinde yok */
@media (prefers-reduced-motion:no-preference){
  .tb-ara-sekme-ikon{animation:tb-ara-zil 10s ease-in-out infinite;transform-origin:50% 60%}
  .tb-ara-sekme:hover .tb-ara-sekme-ikon{animation-play-state:paused}
}
@keyframes tb-ara-zil{0%,89%,100%{transform:rotate(0) scale(1)}90%{transform:rotate(-14deg) scale(1.12)}91.5%{transform:rotate(14deg) scale(1.12)}93%{transform:rotate(-12deg) scale(1.1)}94.5%{transform:rotate(12deg) scale(1.08)}96%{transform:rotate(-7deg) scale(1.04)}97.5%{transform:rotate(4deg) scale(1.02)}99%{transform:rotate(-1deg) scale(1)}}
.tb-ara-sekme-metin{writing-mode:vertical-rl;font-size:.78rem;font-weight:600;letter-spacing:.05em;white-space:nowrap}

/* ---- Panel ---- */
.tb-ara-panel{--tb-ara-bg:#0B1A33;--tb-ara-bg2:#10233F;--tb-ara-cizgi:rgba(159,211,255,.16);--tb-ara-metin:#fff;--tb-ara-soluk:rgba(255,255,255,.68);--tb-ara-alan:#0A1526;--tb-ara-odak:#9FD3FF;--bs-offcanvas-width:min(100vw,30rem);inline-size:var(--bs-offcanvas-width);border:0;background:var(--tb-ara-bg);color:var(--tb-ara-metin);box-shadow:-24px 0 60px -30px rgba(0,0,0,.8)}
.tb-ara-ust{position:relative;padding:1.35rem 1.5rem 1.1rem;background:var(--tb-ara-bg);border-block-end:1px solid var(--tb-ara-cizgi)}
.tb-ara-ust-ic{padding-inline-end:2.6rem}
.tb-ara-rozet{flex:0 0 auto;display:grid;place-items:center;inline-size:2.6rem;block-size:2.6rem;border-radius:.8rem;background:#C4162B;color:#fff;font-size:1.15rem;box-shadow:0 10px 22px -10px rgba(196,22,43,.9)}
.tb-ara-baslik{margin:0 0 .3rem;font-size:1.2rem;font-weight:700;letter-spacing:-.01em;color:var(--tb-ara-metin)}
.tb-ara-lead{margin:0;font-size:.86rem;line-height:1.45;color:var(--tb-ara-soluk)}
.tb-ara-kapat{position:absolute;inset-inline-end:1.1rem;inset-block-start:1.1rem;inline-size:2.1rem;block-size:2.1rem;border:1px solid var(--tb-ara-cizgi);border-radius:.55rem;background:var(--tb-ara-alan);color:var(--tb-ara-metin);display:grid;place-items:center;cursor:pointer}
.tb-ara-kapat:hover,.tb-ara-kapat:focus-visible{border-color:var(--tb-ara-metin);outline:0}
.tb-ara-hemen{display:flex;align-items:center;gap:.6rem;margin:.9rem 0 0;padding:.6rem .85rem;border:1px solid rgba(159,211,255,.28);border-radius:.6rem;background:rgba(255,255,255,.05);color:#fff;text-decoration:none;font-size:.82rem;white-space:nowrap}
.tb-ara-hemen span{color:rgba(255,255,255,.7)}
.tb-ara-hemen strong{font-weight:700;letter-spacing:.01em}
.tb-ara-hemen i{margin-inline-start:auto;color:#9FD3FF}
.tb-ara-hemen:hover{border-style:solid;color:#fff}

.tb-ara-govde{padding:1.25rem 1.5rem 1.5rem;overflow-y:auto}
.tb-ara-form{display:flex;flex-direction:column;gap:.8rem}
.tb-ara-satir{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.tb-ara-alan label{display:block;margin-block-end:.3rem;font-size:.78rem;font-weight:600;letter-spacing:.02em;color:var(--tb-ara-soluk)}
.tb-ara-alan label b{color:#D04555;margin-inline-start:.15rem;font-weight:700}
.tb-ara-alan input,.tb-ara-alan textarea{display:block;inline-size:100%;padding:.68rem .85rem;border:1px solid var(--tb-ara-cizgi);border-radius:.6rem;background:var(--tb-ara-alan);color:var(--tb-ara-metin);font:inherit;font-size:.92rem;transition:border-color .15s,box-shadow .15s}
.tb-ara-alan input::placeholder,.tb-ara-alan textarea::placeholder{color:rgba(255,255,255,.35)}
.tb-ara-alan input:focus,.tb-ara-alan textarea:focus{outline:0;border-color:var(--tb-ara-odak);box-shadow:0 0 0 3px color-mix(in srgb,var(--tb-ara-odak) 25%,transparent)}
.tb-ara-alan input.is-invalid,.tb-ara-alan textarea.is-invalid{border-color:#D04555;box-shadow:0 0 0 3px rgba(208,69,85,.22)}
.tb-ara-alan textarea{resize:vertical;min-block-size:3.6rem}
.tb-ara-secim{margin:0;padding:0;border:0;min-inline-size:0}
.tb-ara-secim legend{padding:0;margin-block-end:.4rem;font-size:.78rem;font-weight:600;letter-spacing:.02em;color:var(--tb-ara-soluk)}
.tb-ara-cipler{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}
.tb-ara-cipler-2{grid-template-columns:repeat(2,1fr)}
.tb-ara-cipler label{min-inline-size:0}
.tb-ara-cipler label{margin:0;cursor:pointer}
.tb-ara-cipler input{position:absolute;opacity:0;pointer-events:none}
.tb-ara-cipler span{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;inline-size:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:.48rem .75rem;border:1px solid var(--tb-ara-cizgi);border-radius:999px;background:var(--tb-ara-alan);font-size:.8rem;font-weight:600;color:var(--tb-ara-metin);transition:background .15s,border-color .15s,color .15s}
.tb-ara-cipler span i{font-size:.9rem;color:#9FD3FF}
.tb-ara-cipler input:checked+span{background:#fff;border-color:#fff;color:#13213A}
.tb-ara-cipler input:checked+span i{color:#C4162B}
.tb-ara-cipler input:focus-visible+span{box-shadow:0 0 0 3px color-mix(in srgb,var(--tb-ara-odak) 35%,transparent)}
.tb-ara-hata{margin:0;padding:.6rem .8rem;border-radius:.55rem;font-size:.82rem;line-height:1.45;background:rgba(208,69,85,.14);border:1px solid rgba(208,69,85,.45);color:#FFB3BC}
.tb-ara-hata a{color:#fff;text-decoration:underline}
.tb-ara-alt{display:flex;flex-direction:column;gap:.8rem;margin-block-start:.2rem}
.tb-ara-kvkk{margin:0;font-size:.74rem;line-height:1.45;color:var(--tb-ara-soluk)}
.tb-ara-kvkk i{margin-inline-end:.3rem}
.tb-ara-kvkk a{color:#9FD3FF;text-decoration:underline;text-underline-offset:2px}
.tb-ara-dugmeler{display:flex;justify-content:flex-end;gap:.6rem}
.tb-ara-gonder{display:inline-flex;align-items:center;justify-content:center;padding:.7rem 1.3rem;border:1px solid var(--tb-ara-metin);border-radius:.6rem;background:var(--tb-ara-metin);color:var(--tb-ara-bg);font:600 .92rem/1 var(--bs-body-font-family,inherit);cursor:pointer;transition:opacity .15s}
.tb-ara-gonder:hover{opacity:.9}
.tb-ara-gonder:focus-visible{outline:2px solid var(--tb-ara-odak);outline-offset:2px}
.tb-ara-gonder:disabled{opacity:.6;cursor:progress}
.tb-ara-gonder-ikincil{background:transparent;border-color:var(--tb-ara-cizgi);color:var(--tb-ara-metin)}
.tb-ara-gonder-ikincil:hover{opacity:1;border-color:var(--tb-ara-metin)}
.tb-ara-bitti{text-align:center;padding:1.5rem .5rem .5rem}
.tb-ara-bitti-ikon{display:grid;place-items:center;inline-size:3.6rem;block-size:3.6rem;margin:0 auto 1rem;border-radius:50%;border:1.5px solid var(--tb-ara-metin);color:var(--tb-ara-metin);font-size:1.7rem}
.tb-ara-bitti h3{margin:0 0 .4rem;font-size:1.2rem;font-weight:700}
.tb-ara-bitti p{margin:0 0 1.25rem;font-size:.9rem;line-height:1.5;color:var(--tb-ara-soluk)}

/* ---- Mobil: sekme sağ altta yuvarlak düğme ---- */
@media (max-width:767.98px){
  .tb-ara-sekme{inset-inline-start:auto;inset-inline-end:1rem;inset-block-start:auto;inset-block-end:1.1rem;transform:none;padding:.45rem;border-radius:999px;gap:0}
  .tb-ara-sekme-ikon{inline-size:2.4rem;block-size:2.4rem;font-size:1.2rem}
  .tb-ara-sekme-ikon i{transform:none}
  .tb-ara-sekme-metin{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tb-ara-sekme:hover,.tb-ara-sekme:focus-visible{transform:translateY(-2px)}
  .tb-ara-satir{grid-template-columns:1fr}
  .tb-ara-ust,.tb-ara-govde{padding-inline:1.1rem}
}

/* @@ ELLE-AYDINLIK @@ — yalnız aydınlık kip: sekme üst şeritle aynı (fildişi gradyan, gri yazı); panel kâğıt paleti */
html:not([data-bs-theme="dark"]) .tb-ara-sekme{background:linear-gradient(180deg,#F3F0EA 0%,#FAF8F3 52%,#F3F0EA 100%);color:#5E6470;border-color:#E6E0D6;box-shadow:0 10px 24px -14px rgba(30,34,44,.35)}
html:not([data-bs-theme="dark"]) .tb-ara-sekme:hover,html:not([data-bs-theme="dark"]) .tb-ara-sekme:focus-visible{color:#13213A}
html:not([data-bs-theme="dark"]) .tb-ara-sekme:focus-visible{box-shadow:0 0 0 3px rgba(19,33,58,.22)}
html:not([data-bs-theme="dark"]) .tb-ara-panel{--tb-ara-bg:#FFFEFB;--tb-ara-bg2:#F3F0EA;--tb-ara-cizgi:#E6E0D6;--tb-ara-metin:#13213A;--tb-ara-soluk:#5E6470;--tb-ara-alan:#FFFFFF;--tb-ara-odak:#13213A;box-shadow:-24px 0 60px -30px rgba(30,34,44,.45)}
html:not([data-bs-theme="dark"]) .tb-ara-alan input::placeholder,html:not([data-bs-theme="dark"]) .tb-ara-alan textarea::placeholder{color:#9AA0AB}
html:not([data-bs-theme="dark"]) .tb-ara-cipler span i{color:#5E6470}
html:not([data-bs-theme="dark"]) .tb-ara-cipler input:checked+span{background:#13213A;border-color:#13213A;color:#fff}
html:not([data-bs-theme="dark"]) .tb-ara-cipler input:checked+span i{color:#E7A2AA}
html:not([data-bs-theme="dark"]) .tb-ara-hata{background:#FBE9EC;border-color:#E7A2AA;color:#8E1020}
html:not([data-bs-theme="dark"]) .tb-ara-hata a{color:#8E1020}
html:not([data-bs-theme="dark"]) .tb-ara-kvkk a{color:#13213A}
html:not([data-bs-theme="dark"]) .tb-ara-ust{background:var(--tb-surface-2,#F3F0EA)}
html:not([data-bs-theme="dark"]) .tb-ara-baslik{color:#13213A}
html:not([data-bs-theme="dark"]) .tb-ara-lead{color:#5E6470}

/* Karanlık kipte düğmeler panelin en altına yaslanır (kullanıcı isteği; aydınlık kip olduğu gibi: formun hemen altında) */
[data-bs-theme="dark"] .tb-ara-panel .offcanvas-body,[data-bs-theme="dark"] .tb-ara-govde{display:flex;flex-direction:column;flex:1 1 auto;min-block-size:0}
[data-bs-theme="dark"] .tb-ara-form{flex:1 1 auto}
[data-bs-theme="dark"] .tb-ara-alt{margin-block-start:auto;padding-block-start:1rem}

/* Karanlık kipte "Beni arayın" sitenin karanlık ana düğmesiyle aynı (hero "Web Hosting Paketleri": kırmızı gradyan, 10px köşe, kırmızı gölge); İptal çerçeveli kalır */
[data-bs-theme="dark"] .tb-ara-form .tb-ara-gonder[type="submit"]{border:1px solid rgba(159,211,255,.35);border-radius:10px;background:linear-gradient(180deg,#1B3F6B 0%,#143257 100%);color:#fff;font-weight:600;box-shadow:none}
[data-bs-theme="dark"] .tb-ara-form .tb-ara-gonder[type="submit"]:hover{opacity:1;background:linear-gradient(180deg,#24508A 0%,#1B3F6B 100%);border-color:rgba(159,211,255,.6)}
[data-bs-theme="dark"] .tb-ara-gonder-ikincil{border-radius:10px}
/* 2026-10-21: sabit "sizi arayalım" sekmesi (inline-start 0, 43px) hero metin sütununun ilk harflerini örtüyordu (TR'de sol, AR'da sağ). Geniş ekranda hero metin sütunlarına sekme kadar iç boşluk. */
@media (min-width: 992px) { .tb-hero-copy, .tb-kt-sol, .tb-h7-sol, .tb-il-sol, .tb-kh-sol, .tb-fz-sol { padding-inline-start: 3rem; }
  /* 2026-10-21: 3rem dolgu icerik genisligini 620 -> 572 px'e dusurmustu; Windows'ta "Türkiye'de güvende" 3. satira sariyor,
     dugmeler alt alta iniyor, hero uzayip kureyi asagi itiyordu. Icerik genisligi 620 px'e geri alindi. */
  /* 2026-10-22: Windows font olcumu Linux'tan genis; NL/DE gibi dillerde baslik 3. satira sariyor, kart asagi kayiyordu.
     Sutun 700 px: tum dillerde 2 satir, hero yuksekligi ve kure/kart konumu sabit. */
  .tb-hero-copy { max-width: calc(700px + 3rem); } }
/* 2026-10-22 kullanici: RTL'de sekme sagda ama koseler yine sagda yuvarlakti; duz kenar duvara (saga) yaslanmali */
html[dir="rtl"] .tb-ara-sekme { border-radius: .7rem 0 0 .7rem; }
/* 2026-10-22 kullanici: sag duvardaki sekmede yazi yonu — soldaki gibi yukaridan asagi degil, asagidan yukari okunmali (harf ustleri iceriye bakar) */
html[dir="rtl"] .tb-ara-sekme-metin { transform: rotate(180deg); }
html[dir="rtl"] .tb-ara-sekme-ikon { transform: rotate(180deg); } /* ikon da yaziyla ayni yone bakar */