:root{--primary-button-color: #001C3D; --main-third-color: #CEA25C; --main-fourth-color: #38B16A; --main-second-color: #F9FAFB; --product-card-bg: #fff; --product-card-border: #D7DFE9; --product-card-color: #001C3D; --border-radius: 0px;} /* ===========================================================================
   KOSKERX-SURUM CHECKOUT-CSS 2026-09-23-6
   Ticimax panel > Checkout Editor > CSS sekmesi > "Ozel CSS Alani"
   ---------------------------------------------------------------------------
   NEDEN BU DOSYA VAR: Checkout sayfasi ayri bir Vue/Vuetify uygulamasi ve
   sitenin WEBCSS'i ile WEBJS'i orada HIC YUKLENMIYOR (canlida dogrulandi:
   "style.css" yok, window.KOSKERX_SURUM yok). Yani sitenin tasarim dili
   (lacivert/altin, Cormorant+Manrope, kose yuvarlamasi yok) bu sayfada
   gecersizdi. Bu alan o bosluğu kapatan TEK yol.

   FONT NOTU: "Tum Sayfa Script" checkout'ta CALISIYOR (kur sayaci orada ve
   <link id="ngFontCss"> yuklu) - yani Cormorant Garamond + Manrope zaten
   indiriliyor, burada @import'a gerek yok. Tum Sayfa Script kaldirilirsa
   fontlar yedege duser, duzen bozulmaz.

   SECICI DISIPLINI: Vuetify'nin kendi siniflari (v-btn, v-col, v-card)
   tema guncellemesinde degisebilir; bu yuzden oncelik Ticimax'in ANLAMLI
   siniflarinda (basket-inner, btn-success, basket-item, content-header).
   Vuetify sinifi ancak baska yolu olmayan yerde kullanildi.

   RENKLER (WEBCSS :root ile ayni):
     lacivert  #001C3D   ikincil metin #5E718D
     altin     #CEA25C   acik altin #E8D1B0   koyu altin #A8823F
     cizgi     #D7DFE9   yumusak zemin #F9FAFB
     yesil     #1E7B45 / zemin #E8F5EC  (havale + "Ucretsiz" vurgusu)
   =========================================================================== */

/* --- 0. DEGISKENLER ------------------------------------------------------ */
:root{
  --kx-lacivert: #001C3D;
  --kx-lacivert-500: #5E718D;
  --kx-altin: #CEA25C;
  --kx-altin-acik: #E8D1B0;
  --kx-altin-koyu: #A8823F;
  --kx-cizgi: #D7DFE9;
  --kx-zemin: #F9FAFB;
  --kx-yesil: #1E7B45;
  --kx-yesil-zemin: #E8F5EC;
}

/* --- 1. TIPOGRAFI -------------------------------------------------------- */
/* Govde Vuetify varsayilani "Inter" ile geliyordu; sitenin govde fontu
   Manrope. Baslikar (Sepet, Siparis Ozeti, Teslimat Adresi, Odeme
   Yontemleri) Cormorant Garamond - sitedeki tum bolum basliklariyla ayni. */
.v-application,
.v-application .v-btn,
.v-application input,
.v-application textarea,
.v-application select{
  font-family: 'Manrope', 'Manrope Yedek', Arial, sans-serif !important;
  letter-spacing: normal !important;
}
.v-application .title,
.v-application .title-properties,
.v-application .content-header .title,
/* "Siparis Ozeti" basligi: sarmalayicida IKI sinif birden var
   (.order-summary-card.order-summary-card-title). "Toplam Tutar" etiketinde
   ise yalniz ikincisi var - bu yuzden asagidaki secici onu KAPSAMAZ,
   toplam satiri Manrope kalir (bilerek). */
.v-application .order-summary-card.order-summary-card-title,
.v-application .empty-cart--title{
  font-family: 'Cormorant Garamond', 'Cormorant Yedek', serif !important;
  font-weight: 600 !important;
  font-size: 24px !important;
  line-height: 1.2 !important;
  color: var(--kx-lacivert) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* --- 2. KOSE YUVARLAMASI YOK --------------------------------------------- */
/* Sitenin tamaminda --ng-radius: 0. Panelde "Kose Yapisi" en dusuk degere
   cekilse bile Vuetify'nin kendi 4-8 px'leri kaliyor; hepsi sifirlanir.
   ISTISNA: dairesel olmasi gereken ogeler (ikon butonlari, kullanici
   avatari) bilerek disarida - onlar daire kalmaya devam eder. */
.v-application .v-card,
.v-application .v-sheet,
.v-application .v-btn:not(.v-btn--icon),
.v-application .v-field,
.v-application .v-field__overlay,
.v-application .basket-inner,
.v-application .basket-item,
.v-application .product-item,
.v-application .total-price-card,
.v-application .feature-button,
.v-application .basket-item-image,
.v-application .basket-item-image img,
.v-application .counter,
.v-application .btn-success{
  border-radius: 0 !important;
}

/* --- 3. ZEMIN VE KARTLAR ------------------------------------------------- */
.v-application{ background: var(--kx-zemin) !important; }
.v-application .basket-main-wrapper,
.v-application .basket-inner,
.v-application .v-card{
  background: #fff !important;
  border: 1px solid var(--kx-cizgi) !important;
  box-shadow: none !important;
}
.v-application .basket-inner-line,
.v-application .cart-list--footer,
.v-application .basket-item + .basket-item{
  border-color: var(--kx-cizgi) !important;
}

/* --- 4. HEADER ----------------------------------------------------------- */
.v-application .header{
  background: #fff !important;
  border-bottom: 1px solid var(--kx-cizgi) !important;
  box-shadow: none !important;
}
.v-application .usermenu-dropdown-btn{ color: var(--kx-lacivert) !important; }

/* --- 5. BIRINCIL BUTON ("Alisverisi Tamamla" / "Odemeye Git") ------------- */
/* Sitedeki birincil CTA altin zemin + lacivert yazi ("Sepete Ekle" ile ayni
   dil). Yesil, sitede havale/"Ucretsiz" vurgusunun rengi - ayni sayfada iki
   anlamda kullanilmasin diye CTA altina cekildi.
   YESILE GERI DONMEK ISTERSEN: bu blogu silmen yeterli, panelin "Aksiyon
   Rengi" ayari tekrar gecerli olur. */
/* 2026-09-23 (kullanici): buton yazisi "ALIŞVERIŞI TAMAMLA" cikiyordu.
   Sebep buradaki "text-transform: uppercase" idi - tarayici buyuk harfe
   cevirirken ogenin DILINE bakiyor; sayfada Turkce dil isareti olmadigi
   icin "i" harfi noktasiz "I" oluyordu ("İ" degil). CSS ile dil
   atanamadigindan buyuk harfe cevirmeyi tamamen kaldirdik: Ticimax'in
   kendi yazimi ("Alisverisi Tamamla" / "Odemeye Git") zaten dogru. */
.v-application .btn-success{
  background: var(--kx-altin) !important;
  color: var(--kx-lacivert) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  min-height: 54px !important;
  box-shadow: none !important;
  transition: background .25s ease !important;
}
/* 2026-09-23: hover ACIK altina gidiyordu - hem "basildi" hissini ters
   ceviriyor hem lacivert yazinin kontrastini 7,25:1 -> 4,3:1'e dusuruyordu.
   Koyu altinda kontrast 4,8:1 kaliyor ve dokunsal olarak dogru okunuyor. */
.v-application .btn-success:hover{ background: var(--kx-altin-koyu) !important; }
/* Butonu yalniz birak: ust/alt bosluk (Von Restorff - sayfadaki tek dolu
   renk blogu o olsun). */
.v-application .btn-success{ margin-top: 6px !important; margin-bottom: 10px !important; }

/* Ikincil baglantilar (Alisverise Devam Et, Hediye Ceki) */
.v-application .continue-shopping{
  color: var(--kx-lacivert) !important;
  font-weight: 600 !important;
}
.v-application .continue-shopping:hover{ color: var(--kx-altin-koyu) !important; }
.v-application .feature-button{
  border: 1px solid var(--kx-cizgi) !important;
  transition: border-color .25s ease !important;
}
.v-application .feature-button:hover{ border-color: var(--kx-altin) !important; }
.v-application .feature-button-label{ color: var(--kx-lacivert) !important; font-weight: 600 !important; }

/* --- 5b. YIKICI EYLEMLER SAKINLESIYOR ------------------------------------ */
/* "Sepeti Temizle" ve satir silme ikonu Vuetify'nin "text-red" siniflariyla
   parlak kirmiziydi - sayfadaki EN dikkat cekici renk oydu ve gozu birincil
   butondan caliyordu (ustelik yikici bir eylemi one cikariyor). Notr hale
   geliyorlar; uzerine gelince kirmizi donuyor, yani islev kaybolmuyor. */
.v-application .basket-header-actions .v-btn,
.v-application .basket-header-actions .button,
.v-application .counter .counter-button{
  color: var(--kx-lacivert-500) !important;
  font-weight: 500 !important;
}
.v-application .basket-header-actions .v-btn:hover,
.v-application .basket-header-actions .button:hover,
.v-application .counter .counter-button:hover{ color: #C0392B !important; }
/* Hediye ceki kutusu ikincil kalsin - birincil butonla dikkat yarismasin. */
.v-application .feature-button{ background: #fff !important; }
.v-application .feature-button .icon{ opacity: .8 !important; }

/* --- 6. URUN SATIRLARI --------------------------------------------------- */
.v-application .basket-item-product-name{
  color: var(--kx-lacivert) !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
}
.v-application .basket-item-product-name:hover{ color: var(--kx-altin-koyu) !important; }
.v-application .basket-item-image img{ border: 1px solid var(--kx-cizgi) !important; }
/* Eski (ustu cizili) fiyat sonuk, guncel fiyat lacivert ve net.
   NOT: fiyatlar kur guncellemesinde Tum Sayfa Script tarafindan tazeleniyor
   (refreshCheckoutPrices) - renkleri degistirmek o akisi etkilemez. */
.v-application .basket-item-sale-price{
  color: var(--kx-lacivert-500) !important;
  font-weight: 400 !important;
}
.v-application .basket-item-basket-price,
.v-application .basket-item-price-customize{
  color: var(--kx-lacivert) !important;
  font-weight: 700 !important;
}

/* Adet sayaci */
.v-application .counter{ border: 1px solid var(--kx-cizgi) !important; }
.v-application .counter-text{ color: var(--kx-lacivert) !important; font-weight: 600 !important; }

/* --- 7. SIPARIS OZETI ---------------------------------------------------- */
.v-application .list-item-key{ color: var(--kx-lacivert-500) !important; font-size: 14px !important; }
.v-application .list-item-value{ color: var(--kx-lacivert) !important; font-weight: 600 !important; }
.v-application .free-text{ color: var(--kx-yesil) !important; font-weight: 700 !important; }
.v-application .total-price-card{
  background: var(--kx-zemin) !important;
  border-top: 1px solid var(--kx-cizgi) !important;
}
.v-application .basket-total-price{
  color: var(--kx-lacivert) !important;
  font-weight: 700 !important;
  font-size: 20px !important;
}
.v-application .total-price-card .order-summary-card-title{
  color: var(--kx-lacivert) !important;
  font-weight: 700 !important;
}

/* Ucretsiz kargo bilgi seridi - sitedeki havale kutusuyla ayni yesil dil */
.v-application .free-cargo,
.v-application .cargo-information{
  background: var(--kx-yesil-zemin) !important;
  color: var(--kx-yesil) !important;
  border: 0 !important;
  font-weight: 600 !important;
}

/* --- 8. GUVEN SATIRI ----------------------------------------------------- */
/* Ozet kutusunun altina, odeme adimina gecmeden once guvenceyi tekrar
   gosteriyoruz. Anchor olarak ".basket-actions" (Hediye Ceki satiri)
   secildi: ".basket-inner-line" MOBILDE display:none geliyor (canlida
   olculdu), bu satir ise iki genislikte de gorunur. Oge yoksa hicbir sey
   cizilmez (sessiz degrade). */
.v-application .basket-actions::after{
  content: '256-bit SSL ile güvenli ödeme  ·  Ücretsiz sigortalı kargo  ·  16:30’a kadar aynı gün kargo';
  display: block;
  padding: 14px 2px 2px;
  font-size: 11.5px;
  line-height: 1.6;
  text-align: center;
  color: var(--kx-lacivert-500);
}

/* --- 9. FORM ALANLARI (adres, siparis notu) ------------------------------ */
.v-application .v-field{
  background: #fff !important;
  border: 1px solid var(--kx-cizgi) !important;
}
.v-application .v-field--focused{ border-color: var(--kx-altin) !important; }
.v-application .v-field__outline{ display: none !important; }   /* cift cerceve olmasin */
.v-application .v-label{ color: var(--kx-lacivert-500) !important; }
.v-application textarea,
.v-application input{ color: var(--kx-lacivert) !important; }
/* Secim (radio/checkbox) rengi - panelin "Buton & Secim Rengi" ayarini
   Vuetify bazi yerlerde ezip kendi mavisine donuyordu. */
.v-application .v-selection-control--dirty .v-selection-control__input,
.v-application .v-radio--dirty .v-selection-control__input{ color: var(--kx-lacivert) !important; }

/* --- 10. BOS SEPET ------------------------------------------------------- */
.v-application .empty-cart--title{ font-size: 28px !important; }

/* --- 11. MASAUSTU: SIPARIS OZETI YAPISKAN -------------------------------- */
/* Form uzun; ozet ve CTA kaydirmada hep gorunur kalsin. */
@media (min-width: 1264px){
  .v-application .basket-inner{
    position: sticky !important;
    top: 16px !important;
    align-self: flex-start !important;
  }
}

/* --- 12. MOBIL ALT OZET CUBUGU ------------------------------------------- */
/* Ticimax mobilde ZATEN sabit bir alt cubuk cikariyor: ".mobile-order-summary"
   (84 px, beyaz, z-index 1007) - icinde "Toplam Tutar + fiyat", CTA ve
   ozeti acan bir ok var. Dolayisiyla CTA'yi kendimiz sabitlemiyoruz
   (denendi: Ticimax'in cubugunu bozuyor); yalnizca cubugu site diline
   cekiyoruz. Sol alttaki kur sayaci bu cubugun ustune alinir - sayac
   konumunu satir ici style ile yaziyor, SURUKLENMEMIS olanlara
   (style'inda "top:" yok) mudahale ediyoruz. */
@media (max-width: 767px){
  .v-application .mobile-order-summary{
    border-top: 1px solid var(--kx-cizgi) !important;
    border-radius: 0 !important;
    box-shadow: 0 -6px 24px -12px rgba(0,28,61,.28) !important;
  }
  .v-application .mobile-order-summary .total-text{ color: var(--kx-lacivert-500) !important; font-size: 12px !important; }
  .v-application .mobile-order-summary .price-text{ color: var(--kx-lacivert) !important; font-weight: 700 !important; }
  .v-application .mobile-order-summary .btn-success{ min-height: 48px !important; }
  /* cubuk 84 px + 12 px nefes */
  #koskerxFiyatWidget:not([style*="top:"]){ bottom: 96px !important; }
}


/* --- 13. MODALLAR, ACILIR LISTELER VE PERDELER --------------------------- */
/* 2026-09-23 (kullanici: "hediye ceki modali radiuslu, renkler uyumsuz").
   KOK NEDEN: Vuetify dialog/menu/select icerigini ".v-application"in ICINDEN
   ALIP <body> altindaki ".v-overlay-container"a TASIYOR (teleport). Yukaridaki
   tum kurallar ".v-application ..." ile basladigi icin modalin icine HIC
   ulasmiyordu - canlida olculdu: modal fontu Inter, form alani 12 px koseli
   ve #F3F3F3 zeminli, baslik siyahti. Bu bolumdeki seciciler bilerek
   ".v-application" ONEKSIZ yazildi. */
.v-overlay-container,
.v-overlay-container .v-btn,
.v-overlay-container input,
.v-overlay-container textarea,
.v-overlay-container .v-list-item-title{
  font-family: 'Manrope', 'Manrope Yedek', Arial, sans-serif !important;
  letter-spacing: normal !important;
}
/* Modal basligi - sayfa basliklariyla ayni dil */
.v-overlay-container .dialog-title,
.v-overlay-container .v-card-title{
  font-family: 'Cormorant Garamond', 'Cormorant Yedek', serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--kx-lacivert) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
/* Kose yuvarlamasi: kart, alan, liste, uyari - hepsi duz */
.v-overlay-container .v-card,
.v-overlay-container .v-sheet,
.v-overlay-container .v-field,
.v-overlay-container .v-field__overlay,
.v-overlay-container .v-list,
.v-overlay-container .v-list-item,
.v-overlay-container .v-btn:not(.v-btn--icon),
.v-overlay-container .v-snackbar__wrapper,
.v-overlay-container .v-overlay__content{
  border-radius: 0 !important;
}
/* Form alani: 12 px koseli + gri zemin yerine beyaz + ince cizgi */
.v-overlay-container .v-field{
  background: #fff !important;
  border: 1px solid var(--kx-cizgi) !important;
}
.v-overlay-container .v-field__overlay{ background: transparent !important; }
.v-overlay-container .v-field__outline{ display: none !important; }
.v-overlay-container .v-field--focused{ border-color: var(--kx-altin) !important; }
.v-overlay-container input,
.v-overlay-container textarea{ color: var(--kx-lacivert) !important; }
.v-overlay-container .v-label{ color: var(--kx-lacivert-500) !important; }
/* Kapat (X) ikonu */
.v-overlay-container .v-btn--icon{ color: var(--kx-lacivert) !important; }
/* Arka perde: saf siyah yerine lacivert tonu */
.v-overlay__scrim{ background: #001C3D !important; opacity: .55 !important; }

/* Acilir listeler (il/ilce secimi, kargo/odeme secenekleri...) */
.v-overlay-container .v-list{
  background: #fff !important;
  border: 1px solid var(--kx-cizgi) !important;
  padding: 0 !important;
}
.v-overlay-container .v-list-item{ min-height: 44px !important; }
.v-overlay-container .v-list-item-title{ color: var(--kx-lacivert) !important; font-size: 14px !important; }
.v-overlay-container .v-list-item:hover .v-list-item__overlay{
  background: var(--kx-lacivert) !important; opacity: .05 !important;
}
.v-overlay-container .v-list-item--active .v-list-item-title{
  color: var(--kx-altin-koyu) !important; font-weight: 600 !important;
}
.v-overlay-container .v-list-item--active .v-list-item__overlay{
  background: var(--kx-altin) !important; opacity: .10 !important;
}

/* --- 14. LISTE ACILINCA KAYMA -------------------------------------------- */
/* Vuetify bir menu/dialog acarken sayfanin kaydirmasini kilitliyor
   (html.v-overlay-scroll-blocked -> position:fixed) ve bunu yaparken
   KAYDIRMA CUBUGU kayboluyor; icerik cubuk genisligi kadar (Windows'ta
   ~15 px) yana ziplayip acilis kapanista geri geliyor. "scrollbar-gutter:
   stable" cubuk icin yeri HER ZAMAN ayirir - cubuk kaybolsa da icerik
   yerinde kalir. Kural YALNIZ "html"e verilir (bkz. asagidaki duzeltme). */
html{ scrollbar-gutter: stable !important; }
/* 2026-09-23 DUZELTME (kullanici ekran goruntusu): ayni kural MODALIN ve
   ACILIR LISTENIN kendi kutularina da verilmisti - "stable" cubuk YOKKEN de
   yer ayirdigi icin tek satirlik hediye ceki listesinin saginda bos beyaz
   bir serit kaliyordu. Kayma zaten SAYFA kaydirmasinin kilitlenmesinden
   geliyordu; yukaridaki tek satir onu cozuyor. Kutulardan kaldirildi. */


/* --- 15. MODALDA ZIPLAMA: HATA MESAJI ICIN YER AYRILIYOR ----------------- */
/* 2026-09-23 (kullanici): "Hediye Ceki Kodu Gerekli" uyarisi cikinca satirlar
   yukari kayiyordu. Olculdu: uyari yokken modal 222 px, cikinca 244 px -
   Vuetify mesaj kutusunu ("v-input__details", 22 px) ancak MESAJ VARKEN
   olusturuyor; modal da dikeyde ORTALI oldugu icin buyuyen 22 px'in yarisi
   kadar (11 px) yukari kayiyor.
   COZUM: her alanin altinda mesaj icin kalici 22 px ayrilir, mesaj o alana
   MUTLAK konumla yerlesir - gorununce hicbir sey oynamaz. */
/* Not: "padding-bottom" denendi ama ".v-field" kutusu alanin tamamini
   kapladigi icin mesaj cercevenin ICINDE kaliyordu; dogrusu DIS bosluk
   (margin) birakip mesaji kutunun hemen ALTINA (top:100%) koymak. */
.v-overlay-container .v-input{
  position: relative !important;
  margin-bottom: 22px !important;
}
.v-overlay-container .v-input__details{
  position: absolute !important;
  left: 0; right: 0; top: 100%; bottom: auto;
  min-height: 0 !important;
  padding: 3px 2px 0 !important;
}
.v-overlay-container .v-messages__message{
  color: #C0392B !important;
  font-size: 11.5px !important;
  line-height: 1.5 !important;
  opacity: 1 !important;
}

/* --- 16. ACILIR LISTE ANIMASYONU ----------------------------------------- */
/* 2026-09-23 (kullanici): "liste acilisinda asagida acilan bar saga dogru
   gecikmeli uzuyor". Vuetify menuyu/secim listesini "dialog-transition" ile
   aciyor: kutu, tetikleyen alanin uzerinden OLCEKLENEREK (scale) buyuyor -
   dar baslayip sag kenari sonradan yerine oturuyormus gibi gorunur. Yerine
   kisa ve duz bir opaklik gecisi; kutunun olcusu ilk kareden itibaren dogru.
   Not: Vuetify donusumu satir ici style ile yaziyor, bu yuzden "!important"
   sart. */
.v-menu > .v-overlay__content[class*="transition-enter-active"],
.v-menu > .v-overlay__content[class*="transition-leave-active"]{
  transition: opacity .12s linear !important;
}
.v-menu > .v-overlay__content[class*="transition-enter-from"],
.v-menu > .v-overlay__content[class*="transition-leave-to"]{
  opacity: 0 !important;
}
.v-menu > .v-overlay__content[class*="transition-"]{
  transform: none !important;
}
/* Vuetify'nin uc katmanli koyu golgesi yerine sitenin tek yumusak golgesi */
.v-menu > .v-overlay__content,
.v-select__content{
  box-shadow: 0 10px 24px -12px rgba(0,28,61,.35) !important;
}