/* ==========================================================================
   osp-shop-pages.css: magaza ALT sayfalari · kp34/Z, 2026-10-30
   --------------------------------------------------------------------------
   Kapsam (hepsi kendi sinifinin altinda; baska sayfaya sizmaz):
     1. Kimlik bandi   section.user_home_banner  (common_layouts/user_banner.php:
        hakkimizda, kategori sayfasi, paket/ozel/siparis-basarili sayfalari)
     2. Hakkimizda     section.osp-about-page    (themeN/about.php)
     3. Siparis takip  .track_order_section.osp-track (themeN/track_order*.php,
        layouts/track_order_form.php, layouts/ajax_track_order_list.php)
     4. Musteri girisi .osp-auth__toggle         ("Telefon yerine e-posta kullan")

   Dil: rezervasyon sayfasi (osp-reservation.css, omer onayli) -- ortali baslik
   blogu (magaza hapi + h1 + alt satir), 20px koseli yuzey karti, 14px koseli
   alanlar, tam genislik 52px dugme. Renk / aralik / kose / golge osp-theme.css
   --osp-* token'lari; acik + koyu tema eslemesi (body.theme-dark) oradan gelir.
   osp-theme.css'e DOKUNULMADI; token'a bagli her deger yedeklidir.

   Eski tarayici (Edge 16 / iOS 12 Safari / Chrome 58 / Firefox 60):
   flex `gap`, `inset`, `aspect-ratio`, `:is/:where/:has` YOK. clamp() yalniz
   onunde duz deger yedegiyle (+ @supports yedegi en altta). Odak halkasi `:focus`
   ile gorunur; `:focus:not(:focus-visible)` ayri kuralda fareyi susturur
   (:focus-visible'i bilmeyen tarayici o kurali tumden atar, halka kalir).

   !important yalniz satici CSS'inin !important'ina karsi; her birinin yaninda
   gerekcesi var.
   ========================================================================== */

/* ==========================================================================
   1. KIMLIK BANDI  (section.user_home_banner)
   --------------------------------------------------------------------------
   Eski: kapak fotografi + %35 siyah ortu, solda 120px logo, magaza adi
   #0f1b33 (koyu lacivert) YAZI, UZERINDE satici golgesi; fotograf mavisi
   (#0067a5 civari) uzerinde ad okunmuyordu, ana menu bandi ise koyu laciverttir
   (iki ayri site gibi). Yeni: rezervasyon sayfasinin baslik dili, ortali yigin:
   logo, ad, iletisim hapları. Kapak fotografi yalniz ana menu bandinda kalir
   (veri/ayar silinmedi; band eski haline CSS satirlarinin kaldirilmasiyla doner).
   ========================================================================== */
body section.user_home_banner {
  position: relative;
  display: block;
  min-height: 0;
  padding: 36px 0 12px;
  /* !important GEREKCE: bandin kapak resmi `style="background:url(...)"` satir ici
     stil + bg_loader.js ile veriliyor; satir ici stili yalniz !important gecer. */
  background-color: transparent !important;
  background-image: none !important;
  color: #0f1b33;
  color: var(--osp-ink, #0f1b33);
}

/* style.css `::before{background:rgba(0,0,0,.35)}` ortusu yerine rezervasyon
   sayfasindaki tek dekoratif ogeyi koyar: marka isimasi. */
body section.user_home_banner::before {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: transparent;
  background-image: radial-gradient(110% 100% at 50% 0, rgba(47, 107, 255, .10), transparent 70%);
  background-image: radial-gradient(110% 100% at 50% 0, var(--osp-brand-tint, rgba(47, 107, 255, .10)), transparent 70%);
  pointer-events: none;
}

body section.user_home_banner .single_banner {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: center;
  align-items: center;
  padding: 0;
  color: #0f1b33;
  color: var(--osp-ink, #0f1b33);
  text-align: center;
}

body section.user_home_banner .single_banner img {
  display: block;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 80px;
  height: 80px;
  margin: 0 0 14px;
  padding: 4px;
  border: 1px solid rgba(15, 23, 42, .10);
  border: 1px solid var(--osp-line, rgba(15, 23, 42, .10));
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 26px -20px rgba(15, 23, 42, .30);
  box-shadow: var(--osp-shadow-1, 0 1px 2px rgba(15, 23, 42, .05), 0 10px 26px -20px rgba(15, 23, 42, .30));
  -o-object-fit: contain;
  object-fit: contain;
}

body section.user_home_banner .userbanner_right {
  max-width: 100%;
}

/* !important GEREKCE: style.css `.userbanner_right *{text-shadow:...}` ve
   `.userbanner_right a{color:#fff !important}` (acik zeminde beyaz yazi). */
body section.user_home_banner .userbanner_right,
body section.user_home_banner .userbanner_right * {
  text-shadow: none !important;
}

body section.user_home_banner .userbanner_top {
  margin: 0 0 12px;
}

/* Magaza adi: bandin tek buyuk metni. #0f1b33 (acik) / #e6ecf7 (koyu) kendi
   zemininde 14:1 / 13:1 (olculdu, kanit/kontrast.txt). */
body section.user_home_banner .userbanner_name {
  margin: 0;
  color: #0f1b33;
  color: var(--osp-ink, #0f1b33);
  font-family: inherit;
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-wrap: balance;
}

/* Iletisim satiri: adres + telefon + WhatsApp, esit hapla (gap yok: kenar boslugu). */
body section.user_home_banner .userbanner_bottpm {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0 -4px;
}

body section.user_home_banner .userbanner_bottpm .social_icon_section {
  margin: 0;
}

body section.user_home_banner .home_social.list.style_1 ul {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

body section.user_home_banner .home_social.list.style_1 ul li {
  margin: 0;
  padding: 0;
}

/* Hap: adres <p>'nin kendisi (baglanti ::after ile tum hapi kaplar), telefon /
   WhatsApp <a>'nin kendisi. */
body section.user_home_banner p.address,
body section.user_home_banner .home_social.list.style_1 ul li a {
  position: relative;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
  align-items: center;
  box-sizing: border-box;
  max-width: 100%;
  min-height: 40px;
  margin: 4px;
  padding: 8px 16px;
  border: 1px solid rgba(15, 23, 42, .10);
  border: 1px solid var(--osp-line, rgba(15, 23, 42, .10));
  border-radius: 999px;
  background-color: #fff;
  background-color: var(--osp-surface, #fff);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
}

/* Odak/hover halkasi her ikisinde de ayni ogede: adres hapinda <a> degil <p>
   cizilir (odak halkasi asagida ::after uzerinde). */
body section.user_home_banner p.address {
  padding: 0;
}

body section.user_home_banner p.address a,
body section.user_home_banner .home_social.list.style_1 ul li a {
  color: #0f1b33 !important;
  color: var(--osp-ink, #0f1b33) !important;
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
}

body section.user_home_banner p.address a {
  display: block;
  padding: 8px 16px 8px 0;
}

body section.user_home_banner p.address i {
  margin: 0 8px 0 16px;
  color: #2a5fe6;
  color: var(--osp-brand-600, #2a5fe6);
  font-size: 1rem;
}

body section.user_home_banner p.address a::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 999px;
}

body section.user_home_banner .home_social.list.style_1 ul li a i {
  margin: 0 8px 0 0;
  font-size: 1rem;
  text-shadow: none;
}

/* Simge renkleri: telefon + adres marka rengi, WhatsApp koyu yesil
   (#128c4a beyazda 4,3:1 / #1f8f55; simge 3:1 esigini asar, yanindaki metin
   zaten adi tasiyor). Koyu temada token acilir. */
body section.user_home_banner .home_social.list.style_1 ul li a i.phone {
  color: #2a5fe6;
  color: var(--osp-brand-600, #2a5fe6);
}

body section.user_home_banner .home_social.list.style_1 ul li a i.whatsapp {
  color: #128c4a;
  color: var(--osp-ok, #128c4a);
}

body section.user_home_banner p.address:hover,
body section.user_home_banner .home_social.list.style_1 ul li a:hover {
  border-color: rgba(47, 107, 255, .18);
  border-color: var(--osp-brand-tint-2, rgba(47, 107, 255, .18));
  background-color: rgba(47, 107, 255, .10);
  background-color: var(--osp-brand-tint, rgba(47, 107, 255, .10));
}

/* Klavye odagi: style.css `a,button{outline:none}`. Telefon / WhatsApp: <a>'nin
   kendisi hap. Adres: <a>'nin ::after'i tum hapi kapladigi icin halka onun
   uzerinde (hap sekli). odak-icindeki-kapsayici sozde sinifi KULLANILMADI: Edge 16 / Chrome 58 bilmez ve
   secici listesindeki tek bilinmeyen secici kurali tumden atar. Fare odagi
   ayri kuralda susar (:focus-visible'i bilmeyen tarayicida o kural atilir, halka kalir). */
body section.user_home_banner .home_social.list.style_1 ul li a:focus,
body section.user_home_banner p.address a:focus::after {
  outline: 3px solid #2f6bff;
  outline: 3px solid var(--osp-brand, #2f6bff);
  outline-offset: 2px;
}

body section.user_home_banner .home_social.list.style_1 ul li a:focus:not(:focus-visible),
body section.user_home_banner p.address a:focus:not(:focus-visible)::after {
  outline: 0;
}

@media (min-width: 768px) {
  body section.user_home_banner {
    padding: 44px 0 16px;
  }

  body section.user_home_banner .single_banner img {
    width: 88px;
    height: 88px;
  }

  body section.user_home_banner .userbanner_name {
    font-size: 1.5rem;
  }
}

/* Mobilde ust menu position:fixed (63px); satici margin-top:4rem verir, ama
   `.menu_style_3` icin `margin-top:0 !important` yazar: o durumda yazi menunun
   altinda kalirdi. Pay padding ile verilir (yalniz menu_style_3). */
@media (max-width: 991px) {
  body section.user_home_banner.menu_style_3 {
    padding-top: 88px;
  }
}

/* ==========================================================================
   2. HAKKIMIZDA  (section.osp-about-page)
   --------------------------------------------------------------------------
   Eski: 1270px genis kart, metin sol kosede 680px, sag taraf bos; baslik
   kartin icinde, altinda mavi cizgi; altta 100vh min-height + 120px dolgu.
   Yeni (omer: statik icerik ortalanir + baslik + telefon kontrolu): ortali
   baslik, ortada ~720px okuma sutunu (legal sayfalari gibi), kart.
   ========================================================================== */
body section.sectionDefault.osp-about-page {
  min-height: 0;
  padding-bottom: 0;
}

body .osp-about-page .section_items {
  min-height: 0;
  margin: 0;
  padding: 8px 0 56px;
  background-color: transparent;
}

body .osp-about {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 4px;
}

body .osp-about .osp-about__head {
  margin: 0 0 24px;
  padding: 0;
  text-align: center;
}

body .osp-about .osp-about__head::before,
body .osp-about .osp-about__head::after {
  display: none;
}

body .osp-about .osp-about__title {
  margin: 0;
  padding: 0;
  color: #0f1b33;
  color: var(--osp-ink, #0f1b33);
  font-family: inherit;
  font-size: 1.875rem;
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-transform: none;
  text-wrap: balance;
}

body .osp-about .osp-about__title::before,
body .osp-about .osp-about__title::after {
  display: none;
}

body .osp-about .contact_content.osp-about__card {
  max-width: none;
  margin: 0;
  padding: 24px 20px;
  border: 1px solid rgba(15, 23, 42, .10);
  border: 1px solid var(--osp-line, rgba(15, 23, 42, .10));
  border-radius: 20px;
  border-radius: var(--osp-r-lg, 20px);
  background-color: #fff;
  background-color: var(--osp-surface, #fff);
  box-shadow: 0 20px 50px -24px rgba(15, 23, 42, .22);
  box-shadow: var(--osp-shadow-2, 0 20px 50px -24px rgba(15, 23, 42, .22));
  color: #0f1b33;
  color: var(--osp-ink, #0f1b33);
  font-size: 1.0625rem;
  line-height: 1.75;
  text-align: left;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Metin zengin duzenleyiciden (<p>, <br>, bazen gorsel/liste) gelir. */
body .osp-about .osp-about__card p,
body .osp-about .osp-about__card li {
  max-width: none;
  color: #0f1b33;
  color: var(--osp-ink, #0f1b33);
  text-wrap: pretty;
}

body .osp-about .osp-about__card p {
  margin: 0 0 .6em;
}

body .osp-about .osp-about__card > :last-child {
  margin-bottom: 0;
}

body .osp-about .osp-about__card img,
body .osp-about .osp-about__card iframe,
body .osp-about .osp-about__card video {
  max-width: 100%;
  height: auto;
}

body .osp-about .osp-about__card a {
  text-decoration: underline;
}

body .osp-about .osp-about__card ul,
body .osp-about .osp-about__card ol {
  margin: 0 0 1em;
  padding-left: 1.4em;
}

body .osp-about .osp-about__card ul {
  list-style: disc;
}

@media (min-width: 768px) {
  body section.user_home_banner + .section_items,
  body .osp-about-page .section_items {
    padding-top: 16px;
  }

  body .osp-about .osp-about__head {
    margin-bottom: 32px;
  }

  body .osp-about .contact_content.osp-about__card {
    padding: 40px 44px;
  }
}

/* Bant kapali magazalarda (CafeDem, Cyprus Cajun: user_banner.php `is_banner=1`
   -> yalniz <div class="mt-50">) mobilde ust menu position:fixed (63px) ve
   mt-50 yalniz 50px verdigi icin baslik menunun altina yapisiyordu (olculdu 390px). */
@media (max-width: 991px) {
  body .osp-about-page > .mt-50 + .section_items {
    padding-top: 48px;
  }
}

/* ==========================================================================
   3. SIPARIS TAKIP  (.track_order_section.osp-track)
   --------------------------------------------------------------------------
   Eski: style.css `.track_order_section{min-height:90vh; display:flex;
   align-items:center; justify-content:center}` .container'i icerigine buzdurup
   (shrink-to-fit) sola yasliyordu; 6/12 sutunlu bootstrap karti; alt bilgi yok
   (controller is_footer=false). Yeni: rezervasyon sayfasi gibi ortali baslik +
   alt satir + 520px form karti; sonuc listesi ayni dilde.
   ========================================================================== */
body .track_order_section.osp-track {
  position: relative;
  display: block;
  min-height: 0;
  padding: 48px 0 72px;
  background-color: transparent;
  color: #0f1b33;
  color: var(--osp-ink, #0f1b33);
}

body .track_order_section.osp-track::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 360px;
  background-image: radial-gradient(110% 100% at 50% 0, rgba(47, 107, 255, .10), transparent 70%);
  background-image: radial-gradient(110% 100% at 50% 0, var(--osp-brand-tint, rgba(47, 107, 255, .10)), transparent 70%);
  pointer-events: none;
}

body .track_order_section.osp-track .osp-track__wrap {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

body .track_order_section.osp-track .osp-track__wrap > .row {
  margin-left: 0;
  margin-right: 0;
}

body .track_order_section.osp-track .osp-track__wrap > .row > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

/* --- baslik blogu (rezervasyon: .osp-rez__head) ------------------------ */
body .osp-track .osp-track__head {
  max-width: 680px;
  margin: 0 auto 28px;
  text-align: center;
}

body .osp-track .osp-track__shop {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
  align-items: center;
  max-width: 100%;
  margin: 0 0 16px;
  padding: 4px 14px 4px 4px;
  border: 1px solid rgba(15, 23, 42, .10);
  border: 1px solid var(--osp-line, rgba(15, 23, 42, .10));
  border-radius: 999px;
  background-color: #fff;
  background-color: var(--osp-surface, #fff);
  color: #0f1b33;
  color: var(--osp-ink, #0f1b33);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.3;
}

body .osp-track .osp-track__shop span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .osp-track .osp-track__shop span:first-child {
  padding-left: 10px;
}

body .osp-track .osp-track__logo {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin: 0 10px 0 0;
  border: 1px solid rgba(15, 23, 42, .10);
  border: 1px solid var(--osp-line, rgba(15, 23, 42, .10));
  border-radius: 999px;
  background-color: #fff;
  -o-object-fit: contain;
  object-fit: contain;
}

body .osp-track .osp-track__title {
  margin: 0 0 12px;
  color: #0f1b33;
  color: var(--osp-ink, #0f1b33);
  font-family: inherit;
  font-size: 1.875rem;
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-transform: none;
  text-wrap: balance;
}

body .osp-track .osp-track__lede {
  max-width: 62ch;
  margin: 0 auto;
  color: #5a6a89;
  color: var(--osp-muted, #5a6a89);
  font-size: 1.0625rem;
  line-height: 1.65;
  text-wrap: pretty;
}

/* --- form karti --------------------------------------------------------- */
body .osp-track .single_track.osp-track__card {
  max-width: 520px;
  margin: 0 auto;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, .10);
  border: 1px solid var(--osp-line, rgba(15, 23, 42, .10));
  border-radius: 20px;
  border-radius: var(--osp-r-lg, 20px);
  background-color: #fff;
  background-color: var(--osp-surface, #fff);
  box-shadow: 0 20px 50px -24px rgba(15, 23, 42, .22);
  box-shadow: var(--osp-shadow-2, 0 20px 50px -24px rgba(15, 23, 42, .22));
  color: #0f1b33;
  color: var(--osp-ink, #0f1b33);
}

/* style.css `.single_track.bg-gray .card{background:var(--card-color)}` ve
   bootstrap `.card` kendi kenarligini cizerdi: ic kart yuzeyi karta birakir. */
body .osp-track .single_track.osp-track__card .card {
  border: 0;
  border-radius: 20px;
  border-radius: var(--osp-r-lg, 20px);
  background-color: transparent;
}

body .osp-track .single_track.osp-track__card .card-body {
  padding: 24px 20px;
}

body .osp-track .osp-track__card .reg_msg {
  display: block;
}

body .osp-track .osp-track__card .reg_msg:empty {
  display: none;
}

body .osp-track .osp-track__card .form-group {
  margin-bottom: 20px;
}

body .osp-track .osp-track__card .form-group > label {
  display: block;
  margin-bottom: 8px;
  color: #0f1b33;
  color: var(--osp-ink, #0f1b33);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

/* !important GEREKCE: style.css:221 `.error{color:red !important}` (beyaz kartta
   4,0:1). --osp-danger acikta #b91c1c 6,47:1, koyuda #fca5a5. */
body .osp-track .osp-track__card .error {
  color: #b91c1c !important;
  color: var(--osp-danger, #b91c1c) !important;
}

/* style.css `.track_form input{height:47px; border-radius:0; background:#fff}`. */
body .osp-track .osp-track__card .track_form .form-control[class] {
  height: auto;
  min-height: 48px;
  border-radius: 14px;
  border-radius: var(--osp-r, 14px);
  /* iOS Safari 16px altindaki alana odaklaninca sayfayi yakinlastiriyor. */
  font-size: 16px;
}

body .osp-track .osp-track__card .track-footer {
  margin-top: 8px;
  text-align: center;
}

body .osp-track .osp-track__submit[class] {
  position: relative;
  display: block;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 12px 24px;
  border-radius: 14px;
  border-radius: var(--osp-r, 14px);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  -webkit-transition: -webkit-transform 200ms cubic-bezier(.16, .84, .44, 1), box-shadow 200ms cubic-bezier(.16, .84, .44, 1);
  transition: transform 200ms cubic-bezier(.16, .84, .44, 1), box-shadow 200ms cubic-bezier(.16, .84, .44, 1);
}

body .osp-track .osp-track__submit[class]:hover {
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -12px rgba(47, 107, 255, .45);
  box-shadow: var(--osp-shadow-brand, 0 12px 30px -12px rgba(47, 107, 255, .45));
}

body .osp-track .osp-track__submit[class]:active,
body .osp-track .osp-track__submit[class]:disabled {
  -webkit-transform: none;
  transform: none;
}

/* !important GEREKCE: style.css `button.btn{color:#fff !important}`. Koyu temada
   dolgu --osp-brand-600 #7aa2ff, ustunde beyaz 2,49:1 (AA alti).
   --osp-on-brand koyu temada #061024 (7,62:1), acikta #fff (5,42:1). */
body .osp-track .osp-track__submit[class] {
  color: #fff !important;
  color: var(--osp-on-brand, #fff) !important;
}

/* Klavye odagi: style.css `.btn{outline:none !important}` +
   `.btn:focus{box-shadow:none !important}`. Halka ::after ile. */
body .osp-track .osp-track__submit[class]::after {
  content: "";
  position: absolute;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  border: 3px solid #2f6bff;
  border: 3px solid var(--osp-brand, #2f6bff);
  border-radius: 19px;
  opacity: 0;
  pointer-events: none;
}

body .osp-track .osp-track__submit[class]:focus::after {
  opacity: 1;
}

body .osp-track .osp-track__submit[class]:focus:not(:focus-visible)::after {
  opacity: 0;
}

/* --- sonuc listesi (AJAX .track_list ve /my-orders sayfasi) ------------- */
body .track_order_section.osp-track .single_track_page {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

body .osp-track .track_list .single_track,
body .osp-track .single_track_page .single_track {
  max-width: none;
  margin: 0;
  border: 1px solid rgba(15, 23, 42, .10);
  border: 1px solid var(--osp-line, rgba(15, 23, 42, .10));
  border-radius: 20px;
  border-radius: var(--osp-r-lg, 20px);
  background-color: #fff;
  background-color: var(--osp-surface, #fff);
  box-shadow: 0 20px 50px -24px rgba(15, 23, 42, .22);
  box-shadow: var(--osp-shadow-2, 0 20px 50px -24px rgba(15, 23, 42, .22));
  color: #0f1b33;
  color: var(--osp-ink, #0f1b33);
}

body .osp-track .track_list .single_track .card,
body .osp-track .single_track_page .single_track .card {
  border: 0;
  border-radius: 20px;
  border-radius: var(--osp-r-lg, 20px);
  background-color: transparent;
}

body .osp-track .single_track .card-header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(15, 23, 42, .10);
  border-bottom: 1px solid var(--osp-line, rgba(15, 23, 42, .10));
  border-radius: 20px 20px 0 0;
  background-color: transparent;
  color: #0f1b33;
  color: var(--osp-ink, #0f1b33);
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}

body .osp-track .single_track .card-body {
  padding: 8px 12px 16px;
}

/* Geri oku: 25px bos baglantiydi (isim yok, hedef 25px). 44px dugme. */
body .osp-track .single_track .back_icon {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin-right: 8px;
  border: 1px solid rgba(15, 23, 42, .10);
  border: 1px solid var(--osp-line, rgba(15, 23, 42, .10));
  border-radius: 50%;
  background-color: #fff;
  background-color: var(--osp-surface, #fff);
  color: #0f1b33;
  color: var(--osp-ink, #0f1b33);
  font-size: 1.125rem;
  text-decoration: none;
}

body .osp-track .single_track .back_icon:hover {
  background-color: rgba(47, 107, 255, .10);
  background-color: var(--osp-brand-tint, rgba(47, 107, 255, .10));
}

body .osp-track .single_track .back_icon:focus {
  outline: 3px solid #2f6bff;
  outline: 3px solid var(--osp-brand, #2f6bff);
  outline-offset: 2px;
}

body .osp-track .single_track .back_icon:focus:not(:focus-visible) {
  outline: 0;
}

/* Tablo: dikey cizgi yok, satir ayraci ince; zebra yerine sade zemin. */
body .osp-track .single_track .table {
  margin-bottom: 0;
  border: 0;
  color: #0f1b33;
  color: var(--osp-ink, #0f1b33);
}

body .osp-track .single_track .table th,
body .osp-track .single_track .table td {
  border-right: 0;
  border-left: 0;
  vertical-align: middle;
}

/* 601px ve ustu: gercek tablo. (<=600px'te public/reset.css td'yi kart satirina
   cevirir: `td{position:relative; padding-left:50%}` + `td::before{content:
   attr(data-label)}` etiket olarak soldaki %50'ye oturur. Burada `padding`
   kisaltmasi yazmak o %50'yi siliyordu -> etiket degerin ustune biniyordu;
   olculdu 390px. Mobilde yalniz ust/alt/sag pay verilir, sol pay saticida kalir.) */
@media (min-width: 601px) {
  body .osp-track .single_track .table th,
  body .osp-track .single_track .table td {
    padding: 14px 12px;
    border-top: 1px solid rgba(15, 23, 42, .10);
    border-top: 1px solid var(--osp-line, rgba(15, 23, 42, .10));
  }
}

@media (max-width: 600px) {
  body .osp-track .single_track .responsiveTable .table td {
    padding-top: 12px;
    padding-right: 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(15, 23, 42, .10);
    border-bottom: 1px solid var(--osp-line, rgba(15, 23, 42, .10));
  }

  body .osp-track .single_track .responsiveTable .table td:last-child {
    border-bottom: 0;
  }

  body .osp-track .single_track .responsiveTable .table tbody tr {
    margin-bottom: 12px;
    border: 1px solid rgba(15, 23, 42, .10);
    border: 1px solid var(--osp-line, rgba(15, 23, 42, .10));
    border-radius: 14px;
    border-radius: var(--osp-r, 14px);
    padding: 4px 12px;
  }
}

body .osp-track .single_track .table thead th {
  border-top: 0;
  border-bottom: 1px solid rgba(15, 23, 42, .18);
  border-bottom: 1px solid var(--osp-line-strong, rgba(15, 23, 42, .18));
  color: #5a6a89;
  color: var(--osp-muted, #5a6a89);
  font-size: .8125rem;
  font-weight: 600;
}

body .osp-track .single_track .table-striped tbody tr:nth-of-type(odd),
body .osp-track .single_track .table-striped tbody tr:nth-of-type(even) {
  background-color: transparent;
}

/* !important GEREKCE: style.css `a.viewItems{color:brown}` (beyazda 7,5:1 ama
   kahverengi marka disi; koyu temada #a52a2a koyu zeminde 2:1). */
body .osp-track a.viewItems {
  color: #2a5fe6 !important;
  color: var(--osp-brand-600, #2a5fe6) !important;
  font-size: .875rem;
  font-weight: 600;
}

body .osp-track a.viewItems:hover {
  color: #1e4fd8 !important;
  color: var(--osp-brand-700, #1e4fd8) !important;
}

body .osp-track .status-badge {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: normal;
}

body .osp-track .seemore_order {
  padding: 12px 0 0;
}

@media (min-width: 768px) {
  body .track_order_section.osp-track {
    padding: 56px 0 96px;
  }

  body .osp-track .osp-track__wrap {
    padding-left: 20px;
    padding-right: 20px;
  }

  body .osp-track .osp-track__head {
    margin-bottom: 40px;
  }

  body .osp-track .osp-track__lede {
    font-size: 1.125rem;
  }

  body .osp-track .single_track.osp-track__card .card-body {
    padding: 36px 40px 40px;
  }

  body .osp-track .single_track .card-body {
    padding: 12px 20px 24px;
  }
}

/* style.css (responsive) mobilde `.container{padding-left/right:5px !important}`:
   kartlar ekran kenarina 5px yaklasiyordu (olculdu 390px). Yan pay, !important'a
   girmeden, bir ic kapsayicida (.row) verilir: 5px + 11px = 16px. */
@media (max-width: 767px) {
  body .track_order_section.osp-track .osp-track__wrap > .row,
  body .track_order_section.osp-track .single_track_page > .row {
    padding-left: 11px;
    padding-right: 11px;
  }

  body .osp-about {
    padding-left: 11px;
    padding-right: 11px;
  }
}

/* Mobilde ust menu position:fixed (63px). Satici `.responsiveTable` kart
   gorunumunu ve data-label'lari kendi veriyor; yalniz bosluk. */
@media (max-width: 991px) {
  body .track_order_section.osp-track {
    padding-top: 96px;
  }
}

/* ==========================================================================
   4. MUSTERI GIRISI  (.osp-auth__toggle)
   --------------------------------------------------------------------------
   "Telefon yerine e-posta kullan" <button type="button" class="osp-auth__toggle">
   (frontend/login/staff_login.php). KOK SEBEP: bu sinif icin projede HICBIR
   CSS kurali yoktu (grep: osp-*.css, style.css, frontend.css); duz <button>
   tarayici varsayilanini aldi: 2px outset siyah kenarlik + #efefef zemin +
   siyah yazi (computed: border 2px outset rgb(0,0,0)). Yani odak halkasi ya da
   eski bir kural degil. Eski surum (layouts/inc/userLogin.php) ayni sinifa
   bootstrap `btn btn-link p-0` ekledigi icin bozuk gorunmuyordu.
   Duzeltme: baglanti dili (.osp-field__link ile ayni: marka rengi, 14px/600).
   ========================================================================== */
body .osp-auth__toggle {
  display: inline-block;
  margin: 0;
  padding: 6px 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  color: #2a5fe6;
  color: var(--osp-brand-600, #2a5fe6);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

body .osp-auth__toggle:hover {
  color: #1e4fd8;
  color: var(--osp-brand-700, #1e4fd8);
  text-decoration: underline;
}

/* Odak: style.css `a,button{outline:none}` halkayi siliyordu; :focus ile geri,
   fare odagi ayri kuralda susar (WCAG 2.4.7 / 2.4.11: 3px, zemine 3:1). */
body .osp-auth__toggle:focus {
  outline: 3px solid #2f6bff;
  outline: 3px solid var(--osp-brand, #2f6bff);
  outline-offset: 2px;
}

body .osp-auth__toggle:focus:not(:focus-visible) {
  outline: 0;
}

/* ==========================================================================
   Kirilimlar / eski tarayici yedekleri
   ========================================================================== */
/* clamp() yedegi (Edge 16 / Chrome 58 / Firefox 60 / Safari 12 clamp bilmez). */
@supports not (font-size: clamp(1px, 1vw, 2px)) {
  @media (min-width: 750px) {
    body .osp-about .osp-about__title,
    body .osp-track .osp-track__title {
      font-size: 4vw;
    }
  }

  @media (min-width: 1100px) {
    body .osp-about .osp-about__title,
    body .osp-track .osp-track__title {
      font-size: 2.75rem;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  body .osp-track .osp-track__submit[class],
  body .osp-track .osp-track__submit[class]:hover {
    -webkit-transform: none;
    transform: none;
    -webkit-transition: none;
    transition: none;
  }
}