/* ============================================================
   ARDÂME — PREMIUM KATMAN
   Tema CSS'inin USTUNE binen, SADECE GORUNUS degistiren katman.

   KURALLAR (olculerek konuldu)
   1) Animasyonlara dokunulmaz: hicbir yerde `transform` yazilmaz ve
      temanin `transition-property` listesi EZILMEZ (ezince dugmenin
      3B cevirme hareketi bozulurdu).
   2) Yerlesim olculeri (width/height/padding) degistirilmez.
   3) HIZ: genis secici yok. `[class*="border-"]` denendi ve telefonda
      en kotu kareyi 27.8 ms -> 61 ms yapti (olcum: akicilik.cjs 375x812,
      cpu 1/4). Bu yuzden yalnizca hedefli sinif secicileri kullaniliyor.
   ============================================================ */

:root {
  /* Daha derin murekkep + daha temiz kâgit: ayni sicak aile, yuksek sinif. */
  --color-black: 38 33 29;
  --color-white: 250 247 242;
  --color-gray: 138 132 125;

  /* Bronz vurgu */
  --ard-bronz: 140 106 67;
  --ard-golge: 38 33 29;
}

/* ---------- 1. Yuzey ---------- */

body {
  background-color: rgb(var(--color-white));
  color: rgb(var(--color-black));
}

/* Kose isaretleri (site dilinin imzasi) bronz olur. */
.square,
.square-dark,
.dropdown-head-square {
  background-color: rgb(var(--ard-bronz));
}

/* ---------- 2. Dugmeler ----------
   transition-property'ye DOKUNULMUYOR; tema zaten color+background-color
   +transform gecisi tanimliyor, bizim renk degisikliklerimizi de o tasiyor. */

.button:not(.button-dark):not(.bg-black),
.simple-button:not(.bg-black),
.woocommerce-button {
  border-color: rgba(var(--ard-golge) / 0.35);
  background-color: rgba(var(--ard-bronz) / 0.05);
  letter-spacing: 0.12em;
}

.button:not(.button-dark):not(.bg-black):hover,
.simple-button:not(.bg-black):hover,
.woocommerce-button:hover {
  border-color: rgb(var(--ard-bronz));
  background-color: rgba(var(--ard-bronz) / 0.12);
}

/* BIRINCIL EYLEM (Sepete ekle): dolu bronz cubuk.
   ⚠ Tema bu dugmeye `bg-black text-white` veriyordu; ilk premium
   surumde `.button` icin verdigim acik zemin onu da soldurdu ve dugme
   kayboldu. Bu yuzden koyu dugmeler ayri ele aliniyor. */
.button-dark,
.product-add-to-cart,
button.bg-black {
  background-color: rgb(var(--ard-golge));
  color: rgb(var(--color-white));
  border-color: transparent;
  letter-spacing: 0.16em;
  font-weight: 700;
}

.button-dark:hover,
.product-add-to-cart:hover,
button.bg-black:hover {
  background-color: rgb(var(--ard-bronz));
  color: rgb(var(--color-white));
}

/* Fiyat ile para birimi arasinda nefes */
.product-currency {
  margin-left: 0.25em;
}

/* Alt bilgideki dev marka yazisi: "Oakâme" 6 harfti, "Arda Mobilya" 12.
   Ayni punto ile 2596px'e cikip ekrandan 692px tasiyordu (olculdu).
   Ekrana sigacak puntoya cekiliyor. */
.footer-title {
  font-size: min(16vw, 18rem);
  letter-spacing: -0.01em;
}

/* Ustune gelince kayan panel: siyah yerine bronz. */
.button-panel-inner,
.simple-button-panel-inner {
  background-color: rgb(var(--ard-bronz));
  color: rgb(var(--color-white));
}

/* Sepet rozeti */
.header-cart-counter {
  color: rgb(var(--color-white));
}

/* ---------- 3. Baglar ---------- */

.footer a:hover,
.list-o a:hover,
.dropdown-head:hover .dropdown-head-title {
  color: rgb(var(--ard-bronz));
}

/* ---------- 4. Formlar ---------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
  background-color: transparent;
  border-color: rgba(var(--ard-golge) / 0.3);
  color: rgb(var(--color-black));
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: rgb(var(--ard-bronz));
}

::placeholder {
  color: rgba(var(--color-gray) / 0.9);
}

/* ---------- 5. MARKA KILIDI ----------
   "Ardâme" tek kelimeydi, "Arda Mobilya" iki kelime: tek satira sigmiyor.
   Ust cubuktaki kutuya iki satirlik kilit olarak yerlesiyor. */

.marka-yazi {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 1;
  font-family: BwGradual, sans-serif;
  color: currentColor;
}

.marka-yazi b {
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
}

.marka-yazi i {
  font-style: normal;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  margin-top: 0.25rem;
  color: rgb(var(--ard-bronz));
}

/* Giris ekrani (yukleyici): iki kelime 16rem'de tasardi. */
.loader-title-left,
.loader-title-right {
  font-size: 7.5rem;
  letter-spacing: 0.04em;
}

.loader-title-right {
  margin-left: 1.4rem;
  color: rgb(var(--ard-bronz));
}

/* ---------- 6. UST CUBUK — premium ----------
   Yerlesim (hucre genislikleri, 1px cizgiler) AYNEN kaliyor; degisen
   yalnizca tipografi, renk ve ustune gelince beliren bronz cizgi.
   Alt cizgi ::after ile ciziliyor -- GSAP sozde ogelere dokunmaz. */

.header-menu-link,
.header-products-link,
.header-nav a,
.header .simple-button {
  letter-spacing: 0.14em;
  font-weight: 600;
}

.header-wrapper a {
  position: relative;
}

.header-wrapper > div > a::after,
.header-wrapper a.simple-button::after {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 0.7rem;
  height: 1px;
  background-color: rgb(var(--ard-bronz));
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.header-wrapper > div > a:hover::after,
.header-wrapper a.simple-button:hover::after {
  opacity: 1;
}

.header-wrapper > div:hover {
  background-color: rgba(var(--ard-bronz) / 0.05);
}

.header-wrapper > div {
  transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.header-wrapper a:hover,
.header-wrapper button:hover {
  color: rgb(var(--ard-bronz));
}

/* Sepet sayaci: kare etiket yerine bronz madalyon */
.header-cart-counter {
  color: rgb(var(--color-white));
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Ic cizgiler sac teli: referansta her hucre kalin siyah bir kutuydu,
   tablo gibi duruyordu. Dis cerceve kalsin, ic bolmeler incelsin. */
.header-wrapper > div {
  border-color: rgba(var(--ard-golge) / 0.14);
}

.header-container {
  border-color: rgba(var(--ard-golge) / 0.28);
}

.header-wrapper {
  border-color: rgba(var(--ard-golge) / 0.28);
}

/* Acilir ok bronz */
.header-wrapper .simple-button-icon svg path,
.langswitcher .simple-button-icon svg path {
  stroke: rgb(var(--ard-bronz));
}

/* Hesap / sepet ikonlari: ustune gelince bronz madalyon zemin */
.header-account,
.header-cart-toggler {
  transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.header-account:hover,
.header-cart-toggler:hover {
  background-color: rgba(var(--ard-bronz) / 0.08);
}

/* ---------- 7. Ince dokunuslar ----------
   Hepsi ya sadece :hover'da ya da az sayida ogede; kaydirma sirasinda
   bedeli yok (olculdu: en kotu kare 33.3 ms, >50 ms takilma 0). */

/* Sepet rozeti bronz muhur */
.header-cart-overlay .bg-black,
.header .absolute.bg-black {
  background-color: rgb(var(--ard-bronz));
}

/* Urun karti: ustune gelince yumusak yukselme */
.card-product {
  transition: box-shadow 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.card-product:hover {
  box-shadow: 0 24px 60px -40px rgba(var(--ard-golge) / 0.55);
}

/* Acilir satir: ustune gelince sicak zemin */
.dropdown-head {
  transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.dropdown-head:hover {
  background-color: rgba(var(--ard-bronz) / 0.06);
}

/* Marka yazisi biraz daha acik */
.marka-yazi {
  letter-spacing: 0.06em;
}

/* Ust cubuk: cizgi yerine cok yumusak bir golge */
.header-container {
  box-shadow: 0 14px 34px -30px rgba(var(--ard-golge) / 0.85);
}

/* ---------- 6. Secim rengi ---------- */

::selection {
  background-color: rgba(var(--ard-bronz) / 0.25);
  color: rgb(var(--color-black));
}

/* ---------- 7. Alt bilgideki dev marka yazisi ----------
   Referansta 6 harfli "Oakame" vardi; bizde 12 harfli "Arda Mobilya".
   Uc ayri kusur cikti, ucu de OLCULDU:

   1) GENISLIK: ayni puntoda yazi yan sutunlarin altina kayiyor,
      ekranda "RDA MOBILY" okunuyordu (yazi 1856px / pencere 1376px).
      -> punto akiskan (vw) hale getirildi.

   2) HARFIN ALTI KESIK: satir kutusu puntonun degil SARMALAYICININ
      puntosunun %120'si (masaustunde 400px, telefonda 117px) ve kutu
      -10.4rem negatif boslukla yukari cekiliyor. Murekkep olcumu
      (canvas actualBoundingBoxDescent) masaustunde harfin 67.8px'inin
      kirpma bandinin ALTINDA kaldigini soyledi; kare de bunu
      dogruladi: A, M, Y harflerinin ayaklari yoktu.
      -> satir kutusu harfe oturtuldu (line-height 1), negatif bosluk
         yerine nefes payi kondu, dikey itme kaldirildi.

   3) ANIMASYON: yazi sayfanin en dibindeyken ScrollTrigger baslangic
      cizgisine ulasamiyor, harfler donuk (rotateX 90) kaliyordu.
      Nefes payi bunu da cozuyor.

   Kapi: arac/kesik-harf.cjs -> footer-title tasmasi 0. */
.footer-title {
  font-size: 12.6vw;
  line-height: 1;
}

@media (min-width: 1280px) {
  .footer-title {
    font-size: 9.1vw;
  }
}

/* Yaziyi tutan sarmalayici (Tailwind: -mb-100 + translate-y).
   Yatay ortalama (translateX -50%) KORUNUYOR. */
footer div[class*="-mb-100"] {
  margin-bottom: 4vh;
  transform: translateX(-50%);
}

/* ---------- 8. Kayan serit: harfin kuyrugu kesilmesin ----------
   "Geri donusum", "El isi" gibi kelimelerde s/g kuyruklari kirpma
   kutusunun altinda kaliyordu (olcum: 375px'te 14px, 1920'de 3px).
   Kirpan oge .marquee-w DEGIL, onun ustundeki mutlak konumlu
   .item-title-large katmani (ilk denemem yanlis ogeye padding verdi
   ve hicbir sey degismedi - olcum yakaladi).
   Kutu mutlak konumlu oldugu icin asagi buyumesi yerlesimi bozmuyor;
   yatay kirpma (kayan bandin kendisi) aynen duruyor. */
.item-title-large {
  /* em KULLANMA: bu kutunun kendi puntosu 12px, icindeki yazi ise
     120-240px. 0.16em yazinca 1.9px cikti ve hicbir sey duzelmedi
     (olcum yakaladi). Tasma her genislikte 3-14px oldugu icin sabit
     18px yeterli ve fazlasi bos alan olarak kalmiyor (kutu mutlak
     konumlu). */
  padding-bottom: 18px;
}

/* KAHRAMAN SLAYTI TELEFONDA ODAK (2026-09-30, Arda: "cok yakin fotolari
   guzel ayarla, telefon ve pc"). Telefonda kutu kare (393x393), genis foto
   ortadan kirpiliyor; yesil kanepe fotografinda kanepe sag yarida, kare
   kirpma onu kesiyordu. Odak saga kaydirildi; masaustu degismez (50%). */
@media (max-width: 767px) {
  .hero-slider-image img[src*="Bonaparte-Ambiance-Site-internet-1"],
  .hero-slider-image img[srcset*="Bonaparte-Ambiance-Site-internet-1"],
  .hero-slider-image img[data-src*="Bonaparte-Ambiance-Site-internet-1"],
  .hero-slider-image img[data-srcset*="Bonaparte-Ambiance-Site-internet-1"] { object-position: 68% 50%; }
}