/* ==========================================================================
   VALENTİ — v4 "web" sürümü
   TASARIM DİLİ: Isabella referansından uyarlandı.
   Beyaz zemin · sıcak kahve (#58433B) · taupe (#B09373) · baştan sona Jost 500.
   Değişkenleri ezdiği için tüm bileşenler tek yerden yeni dile geçiyor.
   ========================================================================== */
body.v4 {
  --kagit:      #FFFFFF;         /* beyaz taban (eskiden krem) */
  --kagit-2:    #F7F6F4;
  --tile:       #F4F2EF;         /* ürün karosu */
  --murekkep:   #3E2F29;         /* sıcak koyu kahve (eskiden mürekkep siyahı) */
  --murekkep-2: #58433B;
  --gri:        #8D827A;
  --gri-ac:     #B3A79D;
  --cizgi:      rgba(88,67,59,.16);
  --cizgi-ince: rgba(88,67,59,.085);
  --kahve:      #58433B;         /* koyu bölüm zemini */
  --taupe:      #B09373;         /* fiyat ve aksan */
  --taupe-ac:   #CCB29B;
}

/* --------------------------------------------------- tipografi: tek font, kalın */
body.v4,
.v4 .giris, .v4 p, .v4 li, .v4 input, .v4 select, .v4 textarea, .v4 button, .v4 address {
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
body.v4 { font-weight: 400; font-size: 16.5px; color: var(--murekkep); }
.v4 .gosterim { font-weight: 500; letter-spacing: -.012em; }
.v4 h1.gosterim { font-weight: 400; }
.v4 h2.gosterim { font-weight: 500; }
.v4 h3.gosterim, .v4 .giris { color: var(--gri); font-weight: 400; }
.v4 .gezinti > li > a, .v4 .gezinti > li > button { font-weight: 500; letter-spacing: .08em; }
.v4 .bag, .v4 .urun-detay { font-weight: 500; }
.v4 .altbilgi h5 { font-weight: 500; letter-spacing: .2em; }

/* koyu bölümler artık siyah değil sıcak kahve */
.v4 .altbilgi { background: var(--kahve); color: rgba(255,255,255,.66); }
.v4 .merkez::after,
.v4 .sayfa-bas-koyu { background: var(--kahve); }
.v4 .sayfa-bas-koyu::after {
  background:
    linear-gradient(to top, rgba(62,47,41,.9) 4%, rgba(62,47,41,.42) 48%, rgba(62,47,41,.5) 100%),
    linear-gradient(to right, rgba(62,47,41,.55) 0%, rgba(62,47,41,.1) 46%, rgba(62,47,41,0) 68%);
}
.v4 .oz-bant { background: var(--kahve); }
.v4 .oz-bant::after {
  background: linear-gradient(to right, rgba(62,47,41,.94) 0%, rgba(62,47,41,.74) 55%, rgba(62,47,41,.62) 100%);
}
.v4 .tb-bas { border-bottom-color: var(--murekkep-2); }
.v4 .dugme-kati { background: var(--kahve); }
.v4 .dugme-kati:hover { background: #6B5248; }
/* aksan altın değil taupe */
.v4 .kart-fiyat .one dd, .v4 .il-sosyal a:hover, .v4 .bilgi-kart a:hover { color: var(--taupe); }

/* --------------------------------------------------- daha kalın tipografi */
.v4 .bolum-bas p, .v4 p { font-weight: 400; }
.v4 .altbilgi h5 { color: rgba(255,255,255,.42); }
.v4 .altbilgi-bag a { font-weight: 400; }
.v4 .dugme { font-weight: 600; }

/* ------------------------------------------------ açılış kampanyası şeridi */
.kampanya {
  background: linear-gradient(100deg, #C9922F 0%, #E2AC49 42%, #F0CE7C 70%, #D19E39 100%);
  color: #1B1508;
}
.kampanya-ic {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: .4rem 1.6rem; padding-block: .72rem;
  font-size: .86rem; font-weight: 600; text-align: center;
}
.kampanya-ic b { font-weight: 700; }
.kampanya-ic span { display: inline-flex; align-items: center; gap: .5rem; }
.kampanya-ic span + span::before {
  content: ''; width: 1px; height: 13px; background: rgba(27,21,8,.3); margin-right: 1.1rem;
}
.kampanya-ic a { border-bottom: 1px solid rgba(27,21,8,.45); padding-bottom: 1px; }
@media (max-width: 720px) {
  .kampanya-ic { font-size: .78rem; gap: .3rem .9rem; }
  .kampanya-ic span + span::before { display: none; }
}

/* --------------------------------------------------------- fiyat gösterimi */
.fiyat-blok { display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem .8rem; }
.fiyat-eski {
  font-size: .95rem; color: var(--gri-ac); text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.fiyat-yeni {
  font-family: 'Jost', sans-serif; font-weight: 500; letter-spacing: -.01em;
  font-size: clamp(1.5rem, 2.3vw, 2rem); color: var(--murekkep);
}
.fiyat-rozet {
  display: inline-block; padding: .28em .62em; border-radius: 4px;
  background: #E2AC49; color: #1B1508;
  font-size: .7rem; font-weight: 700; letter-spacing: .04em;
}
.taksit-satir {
  margin-top: .55rem; font-size: .88rem; color: var(--murekkep-2); font-weight: 500;
}
.taksit-satir b { font-weight: 700; }

/* kart içinde küçük hâli */
.urun .fiyat-blok { gap: .45rem .6rem; }
.urun .fiyat-eski { font-size: .84rem; }
.urun .fiyat-yeni { font-size: 1.12rem; }
.urun .fiyat-rozet { font-size: .62rem; }
.urun .taksit-satir { font-size: .78rem; margin-top: .35rem; font-weight: 400; color: var(--gri); }

/* ------------------------------------------------------ altın sepet düğmesi */
.dugme-sepet {
  background: linear-gradient(160deg, #EFC470 0%, #E2AC49 46%, #C89033 100%);
  color: #1B1508; border-radius: 4px; font-weight: 700;
  box-shadow: 0 1px 0 rgba(255,255,255,.45) inset;
  padding: 1.08em 2.1em;
  transition: filter var(--hizli), box-shadow var(--hizli), transform var(--hizli);
}
.dugme-sepet:hover {
  filter: brightness(1.06);
  box-shadow: 0 14px 26px -14px rgba(200,144,51,.85), 0 1px 0 rgba(255,255,255,.5) inset;
  transform: translateY(-1px);
}
.dugme-sepet:active { transform: none; }

/* --------------------------------------------- ürün detay: sağ panel maddeleri */
.satin-avantaj { margin-top: 1.5rem; display: grid; gap: .1rem; }
/* öne çıkan özellikler iki sütun — sağ panel daha okunur olsun */
.v4 .satin-liste {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.4rem;
  border-top: 1px solid var(--cizgi); margin-top: 1.4rem;
}
.v4 .satin-liste li {
  display: flex; align-items: flex-start; gap: .55rem;
  font-size: .86rem; font-weight: 500; padding: .6rem 0;
  border-bottom: 1px solid var(--cizgi-ince);
}
.v4 .satin-liste li::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
  background: #C89033; margin-top: .48rem;
}
@media (max-width: 620px) { .v4 .satin-liste { grid-template-columns: 1fr; } }
.satin-avantaj li {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .62rem 0; border-bottom: 1px solid var(--cizgi-ince);
  font-size: .89rem; font-weight: 500;
}
.satin-avantaj li:last-child { border-bottom: 0; }
.satin-avantaj svg {
  width: 16px; height: 16px; flex-shrink: 0; margin-top: .2rem;
  stroke: #C89033; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.satin-avantaj em { font-style: normal; display: block; font-weight: 400; color: var(--gri); font-size: .82rem; }

.taksit-kutu {
  margin-top: 1.3rem; padding: .95rem 1.1rem; border-radius: 8px;
  background: #FBF3E3; border: 1px solid rgba(200,144,51,.34);
  font-size: .87rem; font-weight: 500; line-height: 1.55;
}
.taksit-kutu b { font-weight: 700; }
.taksit-kutu span { display: block; font-weight: 400; color: var(--gri); font-size: .8rem; margin-top: .2rem; }

/* ------------------------------------------------- neden / blog ızgaraları */
.nd-izgara { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1rem,2.2vw,1.8rem); }
.nd-kart { background: var(--kagit); border-radius: var(--yuvarlak); overflow: hidden; }
.nd-kart img { width: 100%; aspect-ratio: 16/11; object-fit: cover; }
.nd-kart > div { padding: clamp(1.2rem,2vw,1.7rem); }
.nd-kart h3 { font-family: 'Jost', sans-serif; font-weight: 500; font-size: 1.18rem; margin-bottom: .6rem; }
.nd-kart p { font-size: .92rem; color: var(--gri); line-height: 1.68; }

.bl-izgara { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1rem,2.2vw,1.8rem); }
.bl-kart { display: block; border-radius: var(--yuvarlak); overflow: hidden; background: var(--kagit-2); }
.bl-kart img { width: 100%; aspect-ratio: 16/11; object-fit: cover; transition: transform 1s var(--gecis); }
.bl-kart:hover img { transform: scale(1.04); }
.bl-kart > div { padding: clamp(1.2rem,2vw,1.7rem); }
.bl-etiket {
  display: block; font-size: .64rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gri-ac); margin-bottom: .7rem; font-weight: 600;
}
.bl-etiket.acik { color: rgba(246,244,240,.66); margin-bottom: 1rem; }
.bl-kart h3 { font-family: 'Jost', sans-serif; font-weight: 500; font-size: 1.16rem; margin-bottom: .55rem; }
.bl-kart p { font-size: .9rem; color: var(--gri); line-height: 1.65; }

/* yazı gövdesi */
.bl-bas { min-height: 54svh; }
.bl-govde { max-width: 68ch; margin-inline: auto; }
.bl-ozet { font-size: 1.1rem; line-height: 1.7; color: var(--murekkep-2); margin-bottom: 2.4rem; font-weight: 500; }
.bl-govde h2.gosterim { font-size: clamp(1.4rem,2.2vw,1.8rem); margin: 2.4rem 0 .9rem; }
.bl-govde p { color: var(--gri); line-height: 1.78; }
.bl-son { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--cizgi); }

/* bayilik */
.by-avantaj { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; }
.by-avantaj > div { border-top: 1px solid var(--murekkep); padding-top: 1rem; }
.by-avantaj b { display: block; font-family: 'Jost', sans-serif; font-weight: 500; font-size: 1.3rem; }
.by-avantaj span { font-size: .84rem; color: var(--gri); }
.by-duzen { display: grid; grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr);
            gap: clamp(2rem,5vw,5rem); align-items: start; }

@media (max-width: 980px) {
  .nd-izgara, .bl-izgara { grid-template-columns: 1fr 1fr; }
  .by-duzen { grid-template-columns: 1fr; }
  .by-avantaj { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .nd-izgara, .bl-izgara { grid-template-columns: 1fr; }
}

/* kampanya şeridi başlıktan çıktı: yükseklik yeniden 78 + 50 + 1 */
.v4 { --bas-y: 129px; }
.v4 .baslik.kayik { --bas-y: 113px; }
/* v4 hero: yazı alta yaslansın */
.v4 .hero3 { display: flex; align-items: flex-end; }
.v4 .hero3 .uhero-yazi { position: relative; z-index: 2; padding-bottom: clamp(2.4rem,6vw,5rem); }
.v4 .hero3 .uhero-seri { color: #F0CE7C; }
.v4 .hero3 h1.gosterim { color: var(--kagit); max-width: 14ch; }
@media (max-width: 1040px) {
  .v4 { --bas-y: 108px; }
  .v4 .hero3 { min-height: 74svh; }
}
@media (max-width: 720px) {
  .v4 { --bas-y: 96px; }
}

/* ==========================================================================
   ISABELLA UYARLAMASI — 4'lü ızgara, nakit/taksitli fiyat, avantaj şeridi
   ========================================================================== */
.izgara.dortlu { grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(1rem, 1.8vw, 1.6rem); }
.izgara.dortlu .urun-karo { padding: 6%; border-radius: 10px; }
.izgara.dortlu .urun-bilgi { padding-top: .95rem; }
.izgara.dortlu .urun-bilgi h3 { font-size: 1.05rem; }
.izgara.dortlu .urun-ozet { font-size: .82rem; margin-top: .3rem; }

/* indirim rozeti karonun köşesinde */
.urun-indirim {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  background: #E2AC49; color: #1B1508; border-radius: 4px;
  padding: .3em .55em; font-size: .72rem; font-weight: 700; letter-spacing: .02em;
}

/* nakit / taksitli fiyat — tek satır (Isabella kalıbı) */
.kart-fiyat {
  margin-top: .5rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .5rem;
  font-size: .94rem; font-weight: 500; color: var(--taupe);
}
.kart-fiyat i { font-style: normal; color: var(--gri-ac); }
.kart-fiyat .nakit { color: var(--murekkep-2); font-weight: 600; }

/* --------------------------------------------------------- avantaj şeridi */
.av-serit { background: var(--kagit-2); border-block: 1px solid var(--cizgi-ince); }
.av-ic {
  display: grid; grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 1rem clamp(1rem,2vw,2rem); padding-block: clamp(1.3rem,2.4vw,1.9rem);
}
.av-ic > div { text-align: center; }
.av-ic b {
  display: block; font-family: 'Jost', sans-serif; font-weight: 500;
  font-size: 1.02rem; margin-bottom: .2rem;
}
.av-ic span { font-size: .78rem; color: var(--gri); }

/* --------------------------------------------------- bayilik: ortalı form */
.by-form {
  max-width: 52rem; margin-inline: auto;
  background: var(--kagit-2); border-radius: var(--yuvarlak);
  padding: clamp(1.6rem, 3.4vw, 3rem);
}
.by-gonder { text-align: center; margin-top: .6rem; }
.by-gonder .dugme { min-width: 220px; }
.by-gonder .form-not { margin-top: .9rem; }

@media (max-width: 1100px) { .izgara.dortlu { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 860px)  {
  .izgara.dortlu { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .av-ic { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 560px)  {
  .av-ic { grid-template-columns: 1fr 1fr; }
  .izgara.dortlu .urun-bilgi h3 { font-size: .96rem; }
}

/* ================================================== hakkımızda (İsabella kalıbı)
   Giriş: solda başlık + alt satır, sağda paragraf; altında geniş görsel.
   Neden: ortalanmış başlık, 7/5 iki kolon — solda çizgiyle ayrılmış bloklar. */
.hk-giris { padding-block: clamp(48px, 5vw, 78px) clamp(40px, 4vw, 64px); }
.hk-giris-ust {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 5vw, 5rem); align-items: start;
  margin-bottom: clamp(2rem, 4vw, 3.4rem);
}
.hk-giris-ust h1.gosterim { font-size: clamp(2rem, 3.4vw, 2.9rem); }
.hk-alt { margin-top: .85rem; font-size: 1.02rem; color: var(--murekkep-2); font-weight: 500; }
.hk-giris-ust > p { font-size: .96rem; color: var(--gri); line-height: 1.75; max-width: 52ch; }
.hk-genis {
  width: 100%; border-radius: var(--yuvarlak);
  aspect-ratio: 16 / 7; object-fit: cover; object-position: center 58%;
}

.hk-neden { padding-top: clamp(30px, 3vw, 50px); }
.hk-bas { text-align: center; max-width: 62ch; margin: 0 auto clamp(2.2rem, 4vw, 3.6rem); }
.hk-bas h2.gosterim { font-size: clamp(1.7rem, 2.6vw, 2.15rem); }
.hk-bas p { margin-top: .9rem; font-size: .95rem; color: var(--gri); }

.hk-ikili {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.8rem, 4vw, 4rem); align-items: start;
}
.hk-ikili > img {
  width: 100%; height: 100%; min-height: 420px;
  border-radius: var(--yuvarlak); object-fit: cover;
  position: sticky; top: calc(var(--bas-y) + 24px);
}
.hk-blok { padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--cizgi-ince); }
.hk-metin .hk-blok:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.hk-blok h3 {
  font-family: 'Jost', sans-serif; font-size: 1.24rem; font-weight: 500;
  letter-spacing: -.01em; margin-bottom: .6rem;
}
.hk-blok p { font-size: .93rem; color: var(--gri); line-height: 1.75; }

/* davet bandı: tam genişlik görsel + ortalanmış metin */
.hk-davet { position: relative; isolation: isolate; padding-block: clamp(76px, 10vw, 132px); }
.hk-davet > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 72%; z-index: -2;
}
.hk-davet::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(45,33,28,.6);
}
.hk-davet .kap { text-align: center; color: #fff; }
.hk-davet span {
  font-size: .74rem; letter-spacing: .16em; color: rgba(255,255,255,.72);
}
.hk-davet h2.gosterim {
  margin-top: .9rem; font-size: clamp(1.6rem, 3vw, 2.5rem); color: #fff;
}
.hk-davet p { margin-top: .9rem; font-size: .96rem; color: rgba(255,255,255,.8); }
.hk-davet .dugme { margin-top: 1.8rem; letter-spacing: .08em; font-size: .82rem; }

@media (max-width: 860px) {
  .hk-giris-ust { grid-template-columns: 1fr; gap: 1.2rem; }
  .hk-ikili { grid-template-columns: 1fr; }
  .hk-ikili > img { position: static; min-height: 280px; aspect-ratio: 4 / 3; }
  .hk-genis { aspect-ratio: 3 / 2; }
}

/* ---------------------------------------------- düz başlık (kahraman yoksa)
   Şeffaf başlık + karartma yalnız arkasında tam ekran görsel/video olan
   sayfalar için. Bayilik, hakkımızda, ürünler gibi beyaz açılan sayfalarda
   o karartma beyazın üstünde gri bir sis gibi duruyordu. */
body.v4:not(:has(main > :first-child.uhero,
                 main > :first-child.hero3,
                 main > :first-child.uhero-video,
                 main > :first-child.sayfa-bas-koyu,
                 main > :first-child.bl-bas)) .baslik {
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(1.5) blur(18px); -webkit-backdrop-filter: saturate(1.5) blur(18px);
  border-bottom-color: var(--cizgi-ince);
}
body.v4:not(:has(main > :first-child.uhero,
                 main > :first-child.hero3,
                 main > :first-child.uhero-video,
                 main > :first-child.sayfa-bas-koyu,
                 main > :first-child.bl-bas)) .baslik:not(.kayik) {
  color: var(--murekkep);
}
body.v4:not(:has(main > :first-child.uhero,
                 main > :first-child.hero3,
                 main > :first-child.uhero-video,
                 main > :first-child.sayfa-bas-koyu,
                 main > :first-child.bl-bas)) .baslik:not(.kayik) .gezinti > li > a,
body.v4:not(:has(main > :first-child.uhero,
                 main > :first-child.hero3,
                 main > :first-child.uhero-video,
                 main > :first-child.sayfa-bas-koyu,
                 main > :first-child.bl-bas)) .baslik:not(.kayik) .gezinti > li > button {
  color: var(--murekkep);
}
body.v4:not(:has(main > :first-child.uhero,
                 main > :first-child.hero3,
                 main > :first-child.uhero-video,
                 main > :first-child.sayfa-bas-koyu,
                 main > :first-child.bl-bas)) .baslik:not(.kayik) .baslik-ust,
body.v4:not(:has(main > :first-child.uhero,
                 main > :first-child.hero3,
                 main > :first-child.uhero-video,
                 main > :first-child.sayfa-bas-koyu,
                 main > :first-child.bl-bas)) .baslik:not(.kayik) .baslik-alt {
  text-shadow: none; border-top-color: var(--cizgi-ince);
}
body.v4:not(:has(main > :first-child.uhero,
                 main > :first-child.hero3,
                 main > :first-child.uhero-video,
                 main > :first-child.sayfa-bas-koyu,
                 main > :first-child.bl-bas)) .baslik:not(.kayik) .bilgi em {
  color: var(--gri);
}
body.v4:not(:has(main > :first-child.uhero,
                 main > :first-child.hero3,
                 main > :first-child.uhero-video,
                 main > :first-child.sayfa-bas-koyu,
                 main > :first-child.bl-bas)) .baslik:not(.kayik) .bilgi-ayrac {
  background: var(--cizgi);
}
body.v4:not(:has(main > :first-child.uhero,
                 main > :first-child.hero3,
                 main > :first-child.uhero-video,
                 main > :first-child.sayfa-bas-koyu,
                 main > :first-child.bl-bas)) .baslik:not(.kayik) .arac .sayi {
  background: var(--murekkep); color: #fff;
}
body.v4:not(:has(main > :first-child.uhero,
                 main > :first-child.hero3,
                 main > :first-child.uhero-video,
                 main > :first-child.sayfa-bas-koyu,
                 main > :first-child.bl-bas)) .baslik:not(.kayik) .menu-dugme i {
  background: var(--murekkep);
}

/* ================================================================ İSABELLA DİLİ 2
   Ölçülen değerler: gövde metni DM Sans 14–15px/400, başlık ve arayüz Jost 500,
   ana düğme dolu bronz #A47551, hap köşe 99px, dolgu 14/38. */
body.v4 { --bronz: #A47551; --bronz-koyu: #8E6343; }
.v4, .v4 p, .v4 li, .v4 input, .v4 textarea, .v4 select, .v4 .giris, .v4 .kucuk {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.v4 .gosterim, .v4 .gezinti, .v4 .dugme, .v4 h3, .v4 h4, .v4 h5,
.v4 .kart-fiyat, .v4 .marka, .v4 .suzgec button {
  font-family: 'Jost', sans-serif;
}
.v4 p, .v4 .giris { font-size: .95rem; line-height: 1.72; }

/* --- düğmeler: altın gradyan yerine düz bronz hap --- */
.v4 .dugme,
.v4 .dugme-kati,
.v4 .dugme-sepet {
  background: var(--bronz); background-image: none; color: #fff;
  border-radius: 99px; box-shadow: none;
  padding: .88em 2.4em; font-size: .95rem; font-weight: 500; letter-spacing: 0;
  transition: background var(--hizli), transform var(--hizli);
}
.v4 .dugme:hover,
.v4 .dugme-kati:hover,
.v4 .dugme-sepet:hover {
  background: var(--bronz-koyu); color: #fff; filter: none; box-shadow: none;
  transform: translateY(-1px);
}
.v4 .dugme-cizgi {
  background: none; color: var(--murekkep); border-radius: 99px;
  box-shadow: 0 0 0 1px var(--cizgi) inset; padding: .88em 2.4em; font-weight: 500;
}
.v4 .dugme-cizgi:hover { background: none; box-shadow: 0 0 0 1px var(--murekkep) inset; }
.v4 .dugme-cizgi-acik {
  background: none; color: #fff; border-radius: 99px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.75) inset; padding: .88em 2.4em; font-weight: 500;
}
.v4 .dugme-cizgi-acik:hover { background: rgba(255,255,255,.12); box-shadow: 0 0 0 1px #fff inset; }
.v4 .dugme-acik { background: #fff; color: var(--murekkep); border-radius: 99px; }
.v4 .dugme-acik:hover { background: #fff; color: var(--bronz-koyu); }

/* --- alt bilgi siyah --- */
.v4 .altbilgi { background: #000; color: rgba(255,255,255,.62); }
.v4 .altbilgi h5 { color: rgba(255,255,255,.4); }
.v4 .altbilgi a:hover { color: #fff; }
.v4 .altbilgi, .v4 .altbilgi * { border-color: rgba(255,255,255,.14); }

/* ================================================== slider altı kayan şerit */
.serit {
  overflow: hidden; border-block: 1px solid var(--cizgi-ince);
  background: var(--kagit-2); padding-block: .95rem;
}
.serit-ray { display: flex; width: max-content; animation: seritKay 38s linear infinite; }
.serit:hover .serit-ray { animation-play-state: paused; }
.serit-grup { display: flex; flex-shrink: 0; }
.serit-grup span {
  display: flex; align-items: center; white-space: nowrap;
  font-family: 'Jost', sans-serif; font-size: .92rem; font-weight: 500;
  color: var(--murekkep-2); padding-inline: 2.1rem;
}
.serit-grup span::after {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: var(--bronz); margin-left: 2.1rem;
}
@keyframes seritKay { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .serit-ray { animation: none; } }

/* ================================================== katalog (ürünler) başlığı */
.katalog { padding-block: clamp(30px, 3.4vw, 48px) clamp(56px, 7vw, 96px); }
.katalog-bas {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 4vw, 3.5rem); align-items: end;
  padding-bottom: 1.4rem; margin-bottom: clamp(1.8rem, 3vw, 2.6rem);
  border-bottom: 1px solid var(--cizgi-ince);
}
.katalog-bas h1.gosterim { font-size: clamp(1.9rem, 3vw, 2.6rem); }
.katalog-bas .suzgec { margin-top: 1.1rem; padding: 0; border: 0; }
.katalog-bas > p { font-size: .92rem; color: var(--gri); max-width: 54ch; }
.katalog-bas .suzgec-sayi { display: block; margin-top: .5rem; color: var(--gri-ac); }
.katalog .kunye-not { margin-top: 2.6rem; }
@media (max-width: 860px) { .katalog-bas { grid-template-columns: 1fr; align-items: start; } }

/* ================================================== hakkımızda — yeni kurgu */
.hk-durus { padding-block: clamp(44px, 5vw, 76px) clamp(30px, 3vw, 44px); }
.hk-cumle {
  font-family: 'Jost', sans-serif; font-weight: 400;
  font-size: clamp(1.35rem, 2.6vw, 2.05rem); line-height: 1.32;
  letter-spacing: -.015em; color: var(--murekkep); max-width: 30ch;
}
.hk-durus-alt {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(1.4rem, 4vw, 3.6rem);
  margin-top: clamp(1.8rem, 3vw, 2.8rem);
  padding-top: clamp(1.6rem, 3vw, 2.4rem); border-top: 1px solid var(--cizgi-ince);
}
.hk-durus-alt p { color: var(--gri); }

.hk-kareler { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(.8rem, 2vw, 1.4rem); }
.hk-kare img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--yuvarlak);
}
.hk-kare figcaption { margin-top: .8rem; font-size: .86rem; color: var(--gri); }

.hk-servis { background: var(--kagit-2); }
.hk-hizmetler { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(1.2rem, 3vw, 2.6rem); }
.hk-hizmet { border-top: 1px solid var(--cizgi); padding-top: 1rem; }
.hk-hizmet h3 {
  font-family: 'Jost', sans-serif; font-size: 1.14rem; font-weight: 500; margin-bottom: .5rem;
}
.hk-hizmet p { font-size: .9rem; color: var(--gri); line-height: 1.68; }

@media (max-width: 900px) {
  .hk-durus-alt { grid-template-columns: 1fr; }
  .hk-kareler { grid-template-columns: 1fr; }
  .hk-hizmetler { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .hk-hizmetler { grid-template-columns: 1fr; }
}

/* indirim rozeti de bronz olsun (altın gradyan kalktı) */
.v4 .urun-indirim { background: var(--bronz); color: #fff; }

/* altın aksanların kalanı bronza çevriliyor (marka altını yalnız logoda kalsın) */
.v4 .fiyat-rozet { background: var(--bronz); color: #fff; border-radius: 99px; font-weight: 500; }
.v4 .urun-indirim { border-radius: 99px; font-weight: 500; letter-spacing: 0; }
.v4 .satin-liste li::before { background: var(--bronz); }
.v4 .satin-avantaj svg { stroke: var(--bronz); }
.v4 .hero3 .uhero-seri, .v4 .uhero .uhero-seri { color: rgba(255,255,255,.8); }

/* ============================================ form panelleri (bayilik/iletişim)
   Zemin beyaza döndüğü için krem kutu ayrışmıyordu: bölümü hafif tonluyoruz,
   formu beyaz karta alıp ince çerçeve ve yumuşak gölge veriyoruz. */
.v4 .by-form,
.v4 .il-form-kutu {
  background: #fff; border-radius: 18px;
  box-shadow: 0 0 0 1px var(--cizgi-ince), 0 24px 48px -34px rgba(62,47,41,.38);
}
.v4 .by-form { padding: clamp(1.8rem, 3.6vw, 3.4rem); }
.v4 .il-form-kutu { padding: clamp(1.8rem, 3.4vw, 3rem); }

/* formu taşıyan bölüm hafif tonlu dursun ki kart ayrışsın */
.v4 .by-bolum, .v4 .il-bolum { background: var(--kagit-2); }

.v4 .alan input, .v4 .alan select, .v4 .alan textarea,
.v4 .il-form-kutu .alan input, .v4 .il-form-kutu .alan select,
.v4 .il-form-kutu .alan textarea {
  background: #fff; border: 1px solid var(--cizgi);
  border-radius: 10px; padding: .82rem .95rem;
  transition: border-color var(--hizli), box-shadow var(--hizli);
}
.v4 .alan input:focus, .v4 .alan select:focus, .v4 .alan textarea:focus,
.v4 .il-form-kutu .alan input:focus, .v4 .il-form-kutu .alan textarea:focus {
  outline: none; border-color: var(--taupe);
  box-shadow: 0 0 0 3px rgba(176,147,115,.16);
}
.v4 .alan label, .v4 .il-form-kutu .alan label { color: var(--gri); }

/* ------------------------------------- anasayfa: neden masaj koltuğu (görselsiz)
   Altındaki blog kartlarıyla aynı görünmesin diye foto/kart yok; solda başlık,
   sağda çizgiyle ayrılmış maddeler. */
.nd-bolum { background: var(--kagit-2); }
.nd-duzen {
  display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.3fr);
  gap: clamp(1.8rem, 5vw, 5rem); align-items: start;
}
.nd-sol h2.gosterim { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.nd-maddeler { display: grid; }
.nd-madde { padding: 1.5rem 0; border-top: 1px solid var(--cizgi); }
.nd-madde:first-child { padding-top: 0; border-top: 0; }
.nd-madde:last-child { padding-bottom: 0; }
.nd-madde h3 {
  font-family: 'Jost', sans-serif; font-weight: 500; font-size: 1.16rem;
  margin-bottom: .5rem; letter-spacing: -.01em;
}
.nd-madde p { font-size: .93rem; color: var(--gri); line-height: 1.7; max-width: 62ch; }
@media (max-width: 900px) { .nd-duzen { grid-template-columns: 1fr; } }

/* sık sorulanlar ortalansın */
.v4 .sss-liste { margin-inline: auto; max-width: 68ch; }

/* avantaj şeridi artık dört madde */
.v4 .av-ic { grid-template-columns: repeat(4, minmax(0,1fr)); }

/* ekranda görünmeyen ama okuyuculara açık başlık */
.gizli-baslik {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ================================================================== SEPET */
.sp-bolum { background: var(--kagit-2); }
.sp-duzen {
  display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,.85fr);
  gap: clamp(1.2rem, 3vw, 2.4rem); align-items: start;
}
.sp-liste, .sp-ozet {
  background: #fff; border-radius: 18px;
  box-shadow: 0 0 0 1px var(--cizgi-ince), 0 24px 48px -34px rgba(62,47,41,.34);
}
.sp-liste { padding: clamp(.6rem, 1.6vw, 1.2rem); }
.sp-ozet { padding: clamp(1.4rem, 2.6vw, 2rem); position: sticky; top: calc(var(--bas-y) + 24px); }

.sp-satir {
  display: grid; grid-template-columns: 92px minmax(0,1fr) auto auto 34px;
  gap: clamp(.8rem, 2vw, 1.4rem); align-items: center;
  padding: clamp(.9rem, 1.8vw, 1.3rem); border-bottom: 1px solid var(--cizgi-ince);
}
.sp-satir:last-child { border-bottom: 0; }
.sp-gorsel {
  width: 92px; height: 92px; border-radius: 12px; background: var(--tile);
  display: grid; place-items: center; padding: 7px; overflow: hidden;
}
.sp-gorsel img { width: 100%; height: 100%; object-fit: contain; }
.sp-ad {
  display: block; font-family: 'Jost', sans-serif; font-weight: 500; font-size: 1.05rem;
}
.sp-ad:hover { color: var(--taupe); }
.sp-birim { display: block; margin-top: .25rem; font-size: .86rem; color: var(--gri); }
.sp-adet {
  display: inline-flex; align-items: center; gap: .1rem;
  border: 1px solid var(--cizgi); border-radius: 99px; padding: .15rem;
}
.sp-adet button {
  width: 30px; height: 30px; border-radius: 50%; font-size: 1rem; line-height: 1;
  color: var(--murekkep-2); transition: background var(--hizli);
}
.sp-adet button:hover { background: var(--kagit-2); }
.sp-adet span { min-width: 26px; text-align: center; font-size: .92rem; font-weight: 500; }
.sp-ara { font-family: 'Jost', sans-serif; font-weight: 500; white-space: nowrap; }
.sp-sil { color: var(--gri-ac); display: grid; place-items: center; }
.sp-sil svg { width: 17px; height: 17px; }
.sp-sil:hover { color: var(--murekkep); }

.sp-ozet h2.gosterim { font-size: 1.35rem; margin-bottom: 1.1rem; }
.sp-ozet-satir {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .62rem 0; border-bottom: 1px solid var(--cizgi-ince); font-size: .93rem;
}
.sp-ozet-satir dt { color: var(--gri); }
.sp-ozet-satir dd { font-weight: 500; }
.sp-not { margin: 1rem 0 1.3rem; font-size: .84rem; color: var(--gri); line-height: 1.62; }
.sp-tamamla, .sp-ara-dugme { display: flex; width: 100%; }
.sp-ara-dugme { margin-top: .6rem; }
.sp-bosalt {
  display: block; margin: 1.1rem auto 0; font-size: .84rem; color: var(--gri);
  border-bottom: 1px solid var(--cizgi);
}
.sp-bosalt:hover { color: var(--murekkep); }
.sepet-bos { padding: clamp(2.4rem, 6vw, 4.4rem); text-align: center; }
.sepet-bos p { color: var(--gri); margin-bottom: 1.4rem; }

@media (max-width: 900px) { .sp-duzen { grid-template-columns: 1fr; } .sp-ozet { position: static; } }
@media (max-width: 620px) {
  .sp-satir { grid-template-columns: 68px minmax(0,1fr) 34px; row-gap: .8rem; }
  .sp-gorsel { width: 68px; height: 68px; }
  .sp-adet { grid-column: 2; justify-self: start; }
  .sp-ara { grid-column: 3 / -1; text-align: right; }
}

/* ================================================================== GİRİŞ */
.gr-bolum { background: var(--kagit-2); }
.gr-duzen {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(1.2rem, 3vw, 2.2rem); align-items: start;
  max-width: 62rem; margin-inline: auto;
}
.gr-kart {
  background: #fff; border-radius: 18px; padding: clamp(1.6rem, 3vw, 2.6rem);
  box-shadow: 0 0 0 1px var(--cizgi-ince), 0 24px 48px -34px rgba(62,47,41,.34);
}
.gr-kart h2.gosterim { font-size: 1.45rem; margin-bottom: 1.4rem; }
.gr-form { display: grid; gap: 1rem; }
.gr-form .dugme { justify-self: start; margin-top: .4rem; }
.gr-not { font-size: .84rem; color: var(--gri); line-height: 1.62; }
@media (max-width: 800px) { .gr-duzen { grid-template-columns: 1fr; } }

/* sık sorulanlar bloğu ortalı: başlık da listeyle aynı eksende */
.sss-bolum { background: var(--kagit-2); }
.sss-bolum .bolum-bas {
  max-width: 68ch; margin-inline: auto; justify-content: center; text-align: center;
}

/* ================================= deneyim merkezi daveti (video yok, iki kolon)
   Eski koyu perdeli tam kanvas yerine: solda fotoğraf, sağda açık panel. */
.v4 .merkez {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(1.4rem, 3.4vw, 3.4rem); align-items: center;
  background: none; color: var(--murekkep); border-radius: 0;
  aspect-ratio: auto; max-height: none; overflow: visible;
}
.v4 .merkez::after { display: none; }
.v4 .merkez-foto { border-radius: 20px; overflow: hidden; }
.v4 .merkez-foto img {
  position: static; width: 100%; height: 100%; aspect-ratio: 4 / 3;
  object-fit: cover; object-position: center 60%;
}
.v4 .merkez-ic { position: static; padding: 0; max-width: 34rem; }
.v4 .merkez-ic h2.gosterim { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: 1rem; }
.v4 .merkez-ic .giris { color: var(--gri); }
.v4 .merkez-bilgi {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1.2rem; margin-block: 1.9rem;
  padding-block: 1.4rem; border-block: 1px solid var(--cizgi-ince);
}
.v4 .merkez-bilgi dt {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gri-ac); margin-bottom: .35rem;
}
.v4 .merkez-bilgi dd { font-family: 'Jost', sans-serif; font-size: 1rem; line-height: 1.5; }
.v4 .merkez-bilgi a:hover { color: var(--taupe); }
@media (max-width: 900px) {
  .v4 .merkez { grid-template-columns: 1fr; }
  .v4 .merkez-bilgi { grid-template-columns: 1fr; }
}

/* hakkımızda: merkeze geldiğinizde */
.hk-akis { background: var(--kagit-2); }
.hk-akis-liste { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1.4rem,3vw,2.8rem); }
.hk-adim { border-top: 1px solid var(--cizgi); padding-top: 1.1rem; }
.hk-adim h3 {
  font-family: 'Jost', sans-serif; font-weight: 500; font-size: 1.14rem;
  margin-bottom: .55rem; letter-spacing: -.01em;
}
.hk-adim p { font-size: .92rem; color: var(--gri); line-height: 1.7; }
@media (max-width: 860px) { .hk-akis-liste { grid-template-columns: 1fr; } }

/* ------------------------------------------------ iletişim: sol künye kartı */
.v4 .il-duzen { grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); align-items: start; }
.v4 .il-kart {
  background: #fff; border-radius: 18px; padding: clamp(1.6rem, 3vw, 2.4rem);
  box-shadow: 0 0 0 1px var(--cizgi-ince), 0 24px 48px -34px rgba(62,47,41,.34);
}
.v4 .il-kart h2.gosterim { font-size: 1.35rem; margin-bottom: .9rem; }
.v4 .il-kart address {
  font-style: normal; font-size: .97rem; line-height: 1.62; color: var(--murekkep-2);
  padding-bottom: 1.2rem; border-bottom: 1px solid var(--cizgi-ince);
}
.v4 .il-satirlar { display: grid; }
.v4 .il-satirlar > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .78rem 0; border-bottom: 1px solid var(--cizgi-ince);
}
.v4 .il-satirlar dt { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gri-ac); }
.v4 .il-satirlar dd { font-family: 'Jost', sans-serif; font-size: .98rem; text-align: right; }
.v4 .il-satirlar a:hover { color: var(--taupe); }
.v4 .il-yol { margin-top: 1.6rem; }

/* ------------------------------------------------------- blog yazısı genişliği */
.v4 .bl-govde { max-width: 78ch; }
.v4 .bl-govde p { font-size: 1.02rem; line-height: 1.8; color: var(--murekkep-2); }
.v4 .bl-ozet {
  font-family: 'Jost', sans-serif; font-size: clamp(1.12rem, 1.7vw, 1.32rem);
  font-weight: 400; line-height: 1.55; color: var(--murekkep);
  padding-bottom: 1.6rem; border-bottom: 1px solid var(--cizgi-ince);
}
.v4 .bl-govde h2.gosterim { font-size: clamp(1.5rem, 2.3vw, 1.95rem); margin: 2.6rem 0 .8rem; }
@media (max-width: 620px) { .v4 .il-satirlar > div { flex-direction: column; gap: .2rem; }
  .v4 .il-satirlar dd { text-align: left; } }

/* -------------------------------------------------- blog yazısı: iki kolon
   Tek dar sütun beyaz tuvalde yalnız kalıyordu; solda künye rayı açtık. */
/* yan ray kaldırıldı: yazı tek sütun, rahat okunur ölçüde ortalanmış */
.bl-duzen { max-width: 860px; margin-inline: auto; }
.bl-yan { position: sticky; top: calc(var(--bas-y) + 28px); }
.bl-yan dl { display: grid; }
.bl-yan dl > div { padding: .85rem 0; border-bottom: 1px solid var(--cizgi-ince); }
.bl-yan dl > div:first-child { padding-top: 0; }
.bl-yan dt {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gri-ac); margin-bottom: .3rem;
}
.bl-yan dd { font-family: 'Jost', sans-serif; font-size: .98rem; }
.bl-yan-not { margin: 1.2rem 0 1.4rem; font-size: .86rem; color: var(--gri); line-height: 1.65; }
.v4 .bl-duzen .bl-govde { max-width: 100%; margin: 0; }
.v4 .bl-govde .bl-ozet {
  font-family: 'Jost', sans-serif; font-size: clamp(1.14rem, 1.7vw, 1.34rem);
  font-weight: 400; line-height: 1.55; color: var(--murekkep);
  padding-bottom: 1.7rem; border-bottom: 1px solid var(--cizgi-ince);
}
@media (max-width: 900px) {
  .bl-duzen { grid-template-columns: 1fr; }
  .bl-yan { position: static; }
}

/* ---------------------------------------------------------- form düzeltmeleri
   1fr sütun, input'un kendi asgari genişliğini (size=20) yenemediği için
   ikili alanlar kartı taşırıyordu. */
.v4 .form-ikili { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v4 .alan { min-width: 0; }
.v4 .alan input, .v4 .alan select, .v4 .alan textarea { width: 100%; min-width: 0; }
.v4 .form-onay { align-items: flex-start; gap: .6rem; }
.v4 .form-onay span { font-size: .84rem; color: var(--gri); line-height: 1.55; }

/* çerçeveli düğmeler dolu düğme kuralına kapılıp yazısını kaybediyordu */
.v4 .dugme-cizgi:hover, .v4 .dugme-cizgi:focus-visible {
  background: none; color: var(--murekkep); box-shadow: 0 0 0 1px var(--murekkep) inset;
}
.v4 .dugme-cizgi-acik:hover, .v4 .dugme-cizgi-acik:focus-visible { color: #fff; }
.v4 .dugme-acik:hover { color: var(--bronz-koyu); }

/* ------------------------------------------------------------- mobil başlık
   Sol bilgi modülü gizlenince ızgaranın ilk sütunu 0'a düşüyor ve ortalanmış
   logo sola kayıyordu; iki yanı eşit sütuna çevirip gerçekten ortalıyoruz. */
@media (max-width: 1040px) {
  /* sağdaki araçlar solundakinden geniş olduğu için 1fr'ler eşitlenmiyordu:
     logoyu mutlak konumla tam ortaya alıyoruz */
  .v4 .baslik-ust { position: relative; grid-template-columns: 1fr auto; gap: .4rem; }
  .v4 .baslik-ust > .baslik-yan-sag { justify-self: end; grid-column: 2; }
  .v4 .baslik-ust > .marka {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  }
  .v4 .marka svg { height: 22px; }
  .v4 .baslik.kayik .marka svg { height: 19px; }
}
@media (max-width: 420px) {
  .v4 .marka svg { height: 19px; }
  .v4 .baslik.kayik .marka svg { height: 17px; }
  .v4 .arac { padding: 0 .18rem; }
  .v4 .arac .sayi { margin-left: .25rem; }
}

/* ---------------------------------------------- dar ekran: logo sola yaslı
   720px altında sol bilgi modülü zaten gizli; logo ortada değil başta dursun. */
@media (max-width: 720px) {
  .v4 .baslik-ust { position: static; grid-template-columns: auto 1fr; }
  .v4 .baslik-ust > .marka {
    position: static; transform: none; justify-self: start; grid-column: 1;
  }
  .v4 .baslik-ust > .baslik-yan-sag { grid-column: 2; justify-self: end; }
}

/* ------------------------------------------------- dar ekran: sepet satırı
   Fiyat 34px'lik silme sütununa sıkışıp taşıyordu; ikinci satıra alındı. */
@media (max-width: 620px) {
  .sp-satir { grid-template-columns: 68px minmax(0, 1fr) auto; row-gap: .9rem; }
  .sp-gorsel { grid-row: 1; grid-column: 1; }
  .sp-bilgi  { grid-row: 1; grid-column: 2; }
  .sp-sil    { grid-row: 1; grid-column: 3; justify-self: end; }
  .sp-adet   { grid-row: 2; grid-column: 2; justify-self: start; }
  .sp-ara    { grid-row: 2; grid-column: 3; justify-self: end; text-align: right; }
}

/* ============================================ hero: tam ekranı kaplamasın
   Alttaki bölümün üst kenarı görünsün ki sayfanın devam ettiği anlaşılsın. */
/* anasayfa daha yüksek (%88), ürün sayfaları %80: her ikisinde de alttaki
   bölümün üst kenarı görünüyor */
.v4 .hero3 { min-height: 88vh; min-height: 88svh; }
.v4 .uhero { min-height: 80vh; min-height: 80svh; }
@media (max-width: 1040px) {
  .v4 .hero3 { min-height: 80vh; min-height: 80svh; }
  .v4 .uhero { min-height: 72vh; min-height: 72svh; }
}
@media (max-width: 720px) {
  .v4 .hero3 { min-height: 70vh; min-height: 70svh; }
  .v4 .uhero { min-height: 62vh; min-height: 62svh; }
}

/* ==================================== sabit başlık: kaydırınca incelsin
   Menü ekranda kalsın ama yer kaplamasın: üst kattaki bilgi bloğu gizlenir,
   logo küçülür, iki sıra da alçalır. */
.v4 .baslik-ust, .v4 .baslik-alt { transition: height var(--hizli), opacity var(--hizli); }
.v4 .baslik.kayik { --bas-y: 96px; }
.v4 .baslik.kayik .baslik-ust { height: 52px; }
.v4 .baslik.kayik .ust-bilgi { opacity: 0; pointer-events: none; }
.v4 .baslik.kayik .marka svg { height: 17px; }
.v4 .baslik.kayik .gezinti > li > a { padding-block: .55rem; }
.v4 .baslik.kayik .gezinti > li > a { font-size: .74rem; }
.v4 .baslik.kayik .arac svg { width: 17px; height: 17px; }
@media (max-width: 1040px) {
  .v4 .baslik.kayik { --bas-y: 52px; }
  .v4 .baslik.kayik .baslik-ust { height: 52px; }
}

/* ============================================ ürün sayfası avantaj şeridi
   Fiyatın hemen üstünde: kullanıcı tutarı değerlendirirken avantajları da görsün. */
.us-serit { background: var(--kagit-2); border-block: 1px solid var(--cizgi-ince); }
.us-ic {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem clamp(1rem, 2vw, 2rem); padding-block: clamp(1.1rem, 2vw, 1.6rem);
}
.us-ic > div { text-align: center; }
.us-ic b {
  display: block; font-family: 'Jost', sans-serif; font-weight: 500;
  font-size: .98rem; color: var(--murekkep); margin-bottom: .2rem;
}
.us-ic span { font-size: .78rem; color: var(--gri); line-height: 1.5; }
@media (max-width: 900px) { .us-ic { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 560px) { .us-ic { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.1rem; } }

/* ------------------------------------------------------- WhatsApp düğmesi */
.v4 .dugme-wa {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  background: #25D366; color: #06301A; border-radius: 99px;
  padding: .88em 2em; font-family: 'Jost', sans-serif; font-size: .95rem; font-weight: 500;
  box-shadow: none; transition: background var(--hizli), transform var(--hizli);
}
.v4 .dugme-wa svg { width: 18px; height: 18px; }
.v4 .dugme-wa:hover {
  background: #1EBE5B; color: #06301A; filter: none; transform: translateY(-1px);
}

/* --------------------------------------- satın alma düğmesi: ayrışan amber
   Kurumsal kahveye yakın durduğu için bir ton açıldı ve doygunlaştırıldı;
   yazı koyu kahve (kontrast 5,5:1). */
body.v4 { --satin: #E39B45; --satin-koyu: #D89038; }
.v4 .dugme-sepet {
  background: var(--satin); color: #3E2F29; font-weight: 600;
}
.v4 .dugme-sepet:hover { background: var(--satin-koyu); color: #3E2F29; }
.v4 .sp-tamamla { background: var(--satin); color: #3E2F29; }
.v4 .sp-tamamla:hover { background: var(--satin-koyu); color: #3E2F29; }

/* katalog başlığı: sağ sütun tek blok */
.katalog-yan { display: grid; gap: .6rem; }
.katalog-yan p { font-size: .95rem; color: var(--gri); max-width: 52ch; }
.katalog-bas h1.gosterim { font-size: clamp(1.9rem, 3.2vw, 2.8rem); line-height: 1.14; }

/* deneyim merkezi: konum vurgusu */
.v4 .merkez-etiket {
  display: inline-block; margin-bottom: .9rem;
  font-family: 'Jost', sans-serif; font-size: .72rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--taupe);
}
.v4 .merkez-bilgi dd b { font-weight: 600; color: var(--murekkep); }

/* bayilik: başlık alanı alçaltıldı, form yukarı geldi; alan yazıları koyulaştı */
.by-bas { padding-block: clamp(28px, 3.4vw, 46px) clamp(20px, 2.6vw, 34px); }
.by-bas h1.gosterim { font-size: clamp(1.7rem, 2.8vw, 2.4rem); line-height: 1.18; }
.v4 .by-form .alan > span,
.v4 .il-form-kutu .alan > span {
  color: var(--murekkep-2); font-weight: 500; letter-spacing: .09em; font-size: .74rem;
}
.v4 .by-form .alan input, .v4 .by-form .alan select, .v4 .by-form .alan textarea {
  color: var(--murekkep); font-weight: 500;
}
.v4 .by-form .alan input::placeholder, .v4 .il-form-kutu .alan input::placeholder,
.v4 .by-form .alan textarea::placeholder, .v4 .il-form-kutu .alan textarea::placeholder {
  color: var(--gri); opacity: 1;
}

/* ==================================================== Kumsmall tanıtım bölümü */
.kums-bant { border-radius: 20px; overflow: hidden; }
.kums-bant img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.kums-alt {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr);
  gap: clamp(1.6rem, 4vw, 4rem); align-items: start;
  margin-top: clamp(1.6rem, 3vw, 2.6rem);
}
.kums-logo { height: 56px; width: auto; margin-bottom: 1.3rem; }
.kums-yazi h2.gosterim { font-size: clamp(1.6rem, 2.6vw, 2.3rem); margin-bottom: .9rem; }
.kums-yol { display: grid; gap: .2rem; }
.kums-madde {
  display: grid; gap: .2rem; padding: 1rem 0; border-top: 1px solid var(--cizgi-ince);
}
.kums-madde:first-child { border-top: 0; padding-top: 0; }
.kums-madde span {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gri-ac);
}
.kums-madde b {
  font-family: 'Jost', sans-serif; font-weight: 500; font-size: 1rem; color: var(--murekkep);
}
@media (max-width: 900px) { .kums-alt { grid-template-columns: 1fr; } }

/* ------------------------------ model danışmanı: yuvarlak balon
   Kapalıyken 60px'lik daire; üzerine gelince yana açılıp etiketini gösteriyor.
   Dokunmatikte hover olmadığı için daire olarak kalıyor, tıklayınca panel açılır. */
.v4 .dn-dugme {
  --dn-cap: 60px;
  position: relative; width: var(--dn-cap); height: var(--dn-cap);
  padding: 0; gap: 0; overflow: hidden;
  justify-content: flex-start; align-items: center;
  border-radius: 100px; background: #25D366; color: #06301A;
  font-weight: 600; font-size: .88rem; letter-spacing: .01em;
  box-shadow: 0 10px 26px -10px rgba(11,92,45,.55), 0 0 0 6px rgba(37,211,102,.12);
  transition: width .42s cubic-bezier(.22,.61,.36,1),
              box-shadow var(--gecis), background var(--hizli);
}
.v4 .dn-dugme svg {
  width: 25px; height: 25px; flex-shrink: 0;
  margin-inline: calc((var(--dn-cap) - 25px) / 2);   /* daireyken tam ortada */
  transition: margin-inline .42s cubic-bezier(.22,.61,.36,1);
}
.v4 .dn-dugme span {
  max-width: 0; opacity: 0; white-space: nowrap; padding-right: 0;
  transition: max-width .42s cubic-bezier(.22,.61,.36,1),
              opacity .24s ease .08s, padding-right .42s;
}
.v4 .dn-dugme:hover,
.v4 .dn-dugme:focus-visible {
  width: 232px; background: #1EBE5B; color: #06301A; transform: none;
  box-shadow: 0 16px 34px -12px rgba(11,92,45,.6), 0 0 0 8px rgba(37,211,102,.16);
}
.v4 .dn-dugme:hover svg,
.v4 .dn-dugme:focus-visible svg { margin-inline: 18px 0; }
.v4 .dn-dugme:hover span,
.v4 .dn-dugme:focus-visible span { max-width: 170px; opacity: 1; padding-right: 22px; }
.v4 .dn-dugme:active { transform: translateY(1px); }

/* dokunmatik: hover yok, daire olarak kalsın */
@media (hover: none) {
  .v4 .dn-dugme:hover { width: var(--dn-cap); }
  .v4 .dn-dugme:hover span { max-width: 0; opacity: 0; padding-right: 0; }
  .v4 .dn-dugme:hover svg { margin-inline: calc((var(--dn-cap) - 25px) / 2); }
}
@media (prefers-reduced-motion: reduce) {
  .v4 .dn-dugme, .v4 .dn-dugme svg, .v4 .dn-dugme span { transition: none; }
}
@media (max-width: 620px) { .v4 .dn-dugme { --dn-cap: 54px; } }

/* ---------------------------------------- danışman paneli: sohbet düzeni
   Üst şerit, mesaj alanı ve seçenek alanı birbirinden ayrışmıyordu (hepsi
   beyaza yakındı). Üç katman artık ayrı zeminlerde. */
.v4 .dn-panel {
  width: min(380px, calc(100vw - 28px));
  border: 0; border-radius: 18px; overflow: hidden;
  box-shadow: 0 34px 80px -32px rgba(20,19,23,.55), 0 0 0 1px rgba(20,19,23,.06);
}

/* 1) üst şerit — koyu yeşil, avatarlı */
.v4 .dn-bas {
  align-items: center; gap: .8rem;
  padding: .95rem 1.1rem; background: #0B5C2D; border-bottom: 0; color: #fff;
}
.v4 .dn-avatar {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
  background: #25D366; color: #06301A; display: grid; place-items: center;
}
.v4 .dn-avatar svg { width: 22px; height: 22px; }
.v4 .dn-bas b { color: #fff; font-weight: 500; font-size: 1rem; }
.v4 .dn-bas em {
  color: rgba(255,255,255,.72); font-size: .76rem; margin-top: .1rem;
  display: flex; align-items: center; gap: .38rem;
}
.v4 .dn-bas em::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: #6BE39A;
}
.v4 .dn-kapat { color: rgba(255,255,255,.75); align-self: flex-start; }
.v4 .dn-kapat:hover { color: #fff; }

/* 2) mesaj alanı — hafif dokulu sıcak zemin, balonlar üstünde net duruyor */
.v4 .dn-akis {
  background: #EFE7DE;
  background-image: radial-gradient(rgba(11,92,45,.055) 1px, transparent 1px);
  background-size: 16px 16px;
  padding: 1.1rem 1rem; gap: .55rem;
}
.v4 .dn-balon {
  max-width: 84%; border-radius: 12px; padding: .62rem .85rem;
  font-size: .87rem; line-height: 1.55;
  box-shadow: 0 1px 1px rgba(20,19,23,.09);
}
.v4 .dn-balon.bot {
  background: #fff; color: var(--murekkep); border-bottom-left-radius: 4px;
}
.v4 .dn-balon.kisi {
  background: #DCF8C6; color: #12301C; border-bottom-right-radius: 4px;
}

/* 3) seçenek alanı — beyaz zemin, ince ayırıcı */
.v4 .dn-secim {
  background: #fff; border-top: 1px solid var(--cizgi-ince);
  padding: .9rem 1rem; gap: .45rem;
}
.v4 .dn-secim:empty { padding: 0; border-top: 0; }
.v4 .dn-secenek {
  background: #fff; color: #0B5C2D; font-weight: 500;
  box-shadow: 0 0 0 1px rgba(11,92,45,.28) inset;
}
.v4 .dn-secenek:hover {
  background: #F0FBF3; box-shadow: 0 0 0 1px #25D366 inset; color: #0B5C2D;
}
.v4 .dn-yeniden { color: var(--gri); box-shadow: 0 0 0 1px var(--cizgi) inset; }
.v4 .dn-yeniden:hover { background: var(--kagit-2); box-shadow: 0 0 0 1px var(--gri) inset; color: var(--murekkep); }

/* Kumsmall: alt ikili fotoğraf */
.kums-ikili {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(.8rem, 2vw, 1.4rem); margin-top: clamp(1.6rem, 3vw, 2.6rem);
}
.kums-kare img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px;
}
.kums-kare figcaption { margin-top: .7rem; font-size: .84rem; color: var(--gri); }
@media (max-width: 700px) { .kums-ikili { grid-template-columns: 1fr; } }

/* iletişim: künye kartı formla birlikte kaysın, üstte yapışsın */
.v4 .il-duzen { align-items: start; }
.v4 .il-kunye { position: sticky; top: calc(var(--bas-y) + 28px); }
.v4 .il-logo {
  /* box-sizing:border-box global olduğu için padding yüksekliği yiyordu */
  box-sizing: content-box;
  height: 30px; width: auto; display: block; margin-bottom: 1.3rem;
  padding-bottom: 1.3rem; border-bottom: 1px solid var(--cizgi-ince);
}
@media (max-width: 900px) { .v4 .il-kunye { position: static; } }