:root{
  --baba:#5B3A29;
  --babaHover:#4A2F22;
  --babaSoft:#F6EFEA;
  --babaBorder:#E8D9D0;
  --babaRing:rgba(91,58,41,.35);

  --ebbMarqueeDur:16s;

  --enbText:#0f172a;
  --enbMuted:#64748b;
  --enbLine:#e2e8f0;
  --enbCard:#ffffff;
  --enbSoftCard:rgba(248,250,252,.88);
  --enbSuccess:#16a34a;
  --enbError:#dc2626;
  --enbInfo:#2563eb;
}

/* =========================================================
   THEME HELPERS
   ========================================================= */
.baba-text{ color:var(--baba) !important; }
.baba-bg{ background-color:var(--baba) !important; }
.baba-bg-hover:hover{ background-color:var(--babaHover) !important; }
.baba-border{ border-color:var(--babaBorder) !important; }
.baba-soft{ background-color:var(--babaSoft) !important; }

.baba-ring:focus,
.baba-ring:focus-visible{
  box-shadow:0 0 0 3px var(--babaRing) !important;
  outline:none !important;
}

.baba-link{
  color:var(--baba) !important;
  text-decoration:underline;
  text-underline-offset:2px;
  font-weight:700;
}
.baba-link:hover{ color:var(--babaHover) !important; }

input[type="checkbox"],
input[type="radio"]{
  accent-color:var(--baba);
}

.baba-scroll::-webkit-scrollbar{
  width:8px;
  height:8px;
}
.baba-scroll::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.12);
  border-radius:999px;
}
.baba-scroll::-webkit-scrollbar-track{
  background:transparent;
}

.eb-soft-pill{
  background:rgba(16,185,129,.10);
  border:1px solid rgba(16,185,129,.25);
  color:#065f46;
}

/* =========================================================
   FORM WRAPPER
   ========================================================= */
#hizmetForm{
  position:relative;
}

.step{
  animation:enbStepFade .20s ease;
}

@keyframes enbStepFade{
  from{
    opacity:0;
    transform:translateY(6px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* =========================================================
   INPUT / SELECT / TEXTAREA
   ========================================================= */
input,
select,
textarea{
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background-color .18s ease,
    transform .18s ease;
}

input::placeholder,
textarea::placeholder{
  color:#94a3b8;
}

input:hover,
select:hover,
textarea:hover{
  border-color:#d6c3b7;
}

input.border-red-400,
select.border-red-400,
textarea.border-red-400,
#altList.border-red-400{
  border-color:#f87171 !important;
  box-shadow:0 0 0 3px rgba(248,113,113,.14) !important;
}

textarea{
  resize:vertical;
  min-height:110px;
}

/* =========================================================
   ALT KATEGORİ LIST / CHIP
   ========================================================= */
#altList{
  border-radius:16px;
}

#altList button{
  min-height:48px;
  line-height:1.35;
}

#altSelectedWrap{
  min-height:34px;
}

#altSelectedWrap button{
  box-shadow:0 4px 14px rgba(15,23,42,.04);
}

/* =========================================================
   FİYAT KUTUSU
   ========================================================= */
#priceBox .rounded-2xl{
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.95));
  border:1px solid rgba(226,232,240,.95);
  box-shadow:
    0 10px 26px rgba(15,23,42,.05),
    0 2px 8px rgba(15,23,42,.03);
}

#priceBox .rounded-xl{
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

#priceBox .rounded-xl:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(15,23,42,.05);
  border-color:#d8dee8;
}

#priceMin,
#priceAvg,
#priceMax,
#priceMinCard,
#priceAvgCard,
#priceMaxCard,
#priceMiniText{
  font-variant-numeric:tabular-nums;
}

/* =========================================================
   MÜŞTERİ BÜTÇE ALANI
   ========================================================= */
#netButceWrap{
  padding-top:4px;
}

#netButceWrap > div{
  animation:enbBudgetFade .16s ease;
}

@keyframes enbBudgetFade{
  from{
    opacity:0;
    transform:translateY(4px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* =========================================================
   TALEP ÖZETİ
   ========================================================= */
#talepOzeti{
  color:#475569;
  line-height:1.72;
  font-size:14px;
  word-break:break-word;
}

#talepOzeti strong{
  color:#0f172a;
  font-weight:800;
}

#talepOzeti br{
  content:"";
}

/* =========================================================
   STEPPER
   ========================================================= */
#stepBar{
  transition:width .28s ease;
}

#stepDot1,
#stepDot4{
  transition:
    background-color .2s ease,
    color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

#stepDot1,
#stepDot4{
  box-shadow:0 4px 14px rgba(15,23,42,.06);
}

/* =========================================================
   TOAST
   ========================================================= */
.baba-toast-layer{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  pointer-events:none;
}

.baba-toast{
  background:var(--baba);
  color:#fff;
  padding:14px 40px;
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.2px;
  box-shadow:0 18px 45px rgba(0,0,0,.18);
  max-width:92vw;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  animation:toastFade .22s ease;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.baba-toast-error{ background:var(--enbError); }
.baba-toast-success{ background:var(--enbInfo); }

@keyframes toastFade{
  from{
    opacity:0;
    transform:translateY(6px) scale(.98);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.baba-toast-layer.hidden{
  display:none !important;
}

/* =========================================================
   TOP BAND / MARQUEE
   ========================================================= */
#ebbTopBand .ebb-marquee{
  animation:ebbMarquee var(--ebbMarqueeDur) linear infinite;
  will-change:transform;
  transform:translateZ(0);
}

@keyframes ebbMarquee{
  0%{ transform:translate3d(0,0,0); }
  100%{ transform:translate3d(-50%,0,0); }
}

@media (max-width:640px){
  :root{
    --ebbMarqueeDur:13s;
  }
}

@media (prefers-reduced-motion:reduce){
  #ebbTopBand .ebb-marquee{
    animation:none !important;
    transform:none !important;
  }

  .step,
  #netButceWrap > div,
  .baba-toast,
  #stepBar{
    animation:none !important;
    transition:none !important;
  }
}

/* =========================================================
   GÜVEN KUTUSU
   ========================================================= */
.enb-trust-review-box{
  position:relative;
  border:1px solid rgba(226,232,240,.9);
  background:
    radial-gradient(1200px 240px at 50% -20%, rgba(99,102,241,.06), transparent 60%),
    rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:
    0 18px 50px rgba(15,23,42,.08),
    0 2px 10px rgba(15,23,42,.04);
  border-radius:28px;
}

.enb-trust-card{
  border:1px solid rgba(226,232,240,.95);
  background:rgba(248,250,252,.88);
  border-radius:22px;
  box-shadow:0 8px 24px rgba(15,23,42,.04);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.enb-trust-card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(15,23,42,.08);
  border-color:rgba(199,210,254,.95);
}

.enb-trust-icon{
  width:48px;
  height:48px;
  border-radius:18px;
  border:1px solid rgba(226,232,240,.95);
  background:rgba(255,255,255,.96);
  box-shadow:0 6px 14px rgba(15,23,42,.05);
}

/* =========================================================
   NAV BUTTONS
   ========================================================= */
#nextBtn,
#prevBtn{
  min-height:44px;
  box-shadow:0 6px 18px rgba(15,23,42,.05);
}

#nextBtn{
  padding-left:22px;
  padding-right:22px;
}

#prevBtn{
  padding-left:18px;
  padding-right:18px;
}

#nextBtn:hover,
#prevBtn:hover{
  transform:translateY(-1px);
}

#nextBtn:active,
#prevBtn:active{
  transform:translateY(0);
}

/* =========================================================
   WHATSAPP BUTTON
   ========================================================= */
#whatsappBtn{
  min-height:48px;
  padding:12px 26px;
  border-radius:999px;
  font-size:15px;
  box-shadow:0 10px 25px rgba(0,0,0,.15);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

#whatsappBtn:hover{
  transform:translateY(-1px) scale(1.03);
  box-shadow:0 16px 30px rgba(0,0,0,.18);
}

#whatsappBtn:active{
  transform:scale(.97);
}

/* =========================================================
   MOBILE FORM SPACING
   ========================================================= */
@media (max-width:640px){

  main section.bg-white\/95{
    padding:22px;
    border-radius:24px;
  }

  main h2{
    font-size:22px;
    line-height:1.35;
  }

  main p{
    font-size:13.5px;
  }

  .step{
    margin-top:4px;
  }

  label{
    margin-bottom:6px;
    display:inline-block;
  }

  input,
  select,
  textarea{
    padding:12px 14px;
    font-size:15px;
  }

  #netButceWrap{
    grid-template-columns:1fr !important;
  }

  #talepOzeti{
    font-size:13.5px;
  }

  .baba-toast{
    padding:12px 20px;
    font-size:13px;
    max-width:90vw;
  }

  .enb-trust-review-box{
    padding:22px;
    border-radius:24px;
    box-shadow:
      0 12px 30px rgba(15,23,42,.07),
      0 2px 8px rgba(15,23,42,.04);
  }

  .enb-trust-card{
    padding:18px;
    border-radius:18px;
  }

  .enb-trust-icon{
    width:44px;
    height:44px;
    border-radius:16px;
  }

  #whatsappBtn{
    width:100%;
    justify-content:center;
  }
}

/* =========================================================
   SMALL UX POLISH
   ========================================================= */
#priceMini{
  white-space:nowrap;
}

#hizmetForm .hidden{
  display:none !important;
}


/* =========================================================
   EN BABA | MÜŞTERİ TALEBİ SAYFASI CSS (FINAL)
========================================================= */

:root{
  --baba: #5B3A29;
  --babaHover: #4A2F22;
  --babaSoft: #F6EFEA;
  --babaBorder: #E8D9D0;
  --babaRing: rgba(91,58,41,.35);
}

/* =========================================================
   BASE
========================================================= */

.baba-text{ color: var(--baba) !important; }
.baba-bg{ background-color: var(--baba) !important; }
.baba-bg-hover:hover{ background-color: var(--babaHover) !important; }
.baba-border{ border-color: var(--babaBorder) !important; }

.baba-ring:focus,
.baba-ring:focus-visible{
  box-shadow: 0 0 0 3px var(--babaRing);
  outline: none;
}

.baba-link{
  color: var(--baba);
  text-decoration: underline;
  font-weight: 600;
}
.baba-link:hover{ color: var(--babaHover); }

/* =========================================================
   SCROLL
========================================================= */

.baba-scroll::-webkit-scrollbar{ width: 6px; }
.baba-scroll::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.15);
  border-radius: 999px;
}

/* =========================================================
   FORM CARD
========================================================= */

main section.bg-white\/95{
  border-radius: 28px;
  box-shadow:
    0 20px 60px rgba(0,0,0,.08),
    0 4px 16px rgba(0,0,0,.04);
}

/* =========================================================
   STEP BAR
========================================================= */

#stepBar{
  transition: width .4s ease;
}

/* =========================================================
   ALT KATEGORİ LIST
========================================================= */

#altList button{
  transition: all .18s ease;
}

#altList button:hover{
  transform: translateY(-1px);
}

/* =========================================================
   SELECTED CHIPS
========================================================= */

#altSelectedWrap button{
  transition: all .18s ease;
}

#altSelectedWrap button:hover{
  transform: scale(1.05);
}

/* =========================================================
   PRICE BOX
========================================================= */

#priceBox{
  animation: fadeUp .35s ease;
}

@keyframes fadeUp{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}

/* =========================================================
   MINI PRICE
========================================================= */

#priceMini{
  background: rgba(91,58,41,.08);
  padding: 4px 10px;
  border-radius: 999px;
}

/* =========================================================
   BUTTONS
========================================================= */

#nextBtn,
#prevBtn{
  min-height: 44px;
}

#nextBtn{
  padding: 0 22px;
}

#prevBtn{
  padding: 0 18px;
}

#whatsappBtn{
  min-height: 50px;
  border-radius: 999px;
  font-size: 15px;
  box-shadow: 0 12px 30px rgba(0,0,0,.15);
}

#whatsappBtn:hover{
  transform: translateY(-1px) scale(1.03);
}

#whatsappBtn:active{
  transform: scale(.97);
}

/* =========================================================
   TOAST
========================================================= */

.baba-toast-layer{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.baba-toast{
  background: var(--baba);
  color: #fff;
  padding: 14px 36px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 18px 40px rgba(0,0,0,.2);
}

.baba-toast-error{ background:#dc2626; }
.baba-toast-success{ background:#2563eb; }

.hidden{ display:none !important; }

/* =========================================================
   ÖRNEK TALEPLER
========================================================= */

section .rounded-3xl{
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

section .rounded-3xl:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0,0,0,.06);
}

section article{
  position: relative;
  overflow: hidden;
  border-radius: 22px !important;
}

section article::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at top, rgba(99,102,241,.04), transparent 62%);
  opacity:0;
  transition: opacity .22s ease;
  pointer-events: none;
}

section article:hover::after{
  opacity:1;
}

/* =========================================================
   CTA BOX (YORUM + TALEP)
========================================================= */

#yorumlar,
.enb-review-area{
  scroll-margin-top: 100px;
}

.enb-review-cta{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(800px 200px at top, rgba(91,58,41,.05), transparent),
    #f8fafc;
  border: 1px solid rgba(226,232,240,.95);
  border-radius: 22px;
  box-shadow:
    0 8px 22px rgba(15,23,42,.04),
    0 2px 6px rgba(15,23,42,.03);
}

section .rounded-\[24px\]{
  background:
    radial-gradient(800px 200px at top, rgba(91,58,41,.05), transparent),
    #f8fafc;
  border: 1px solid rgba(226,232,240,.95);
  box-shadow:
    0 8px 22px rgba(15,23,42,.04),
    0 2px 6px rgba(15,23,42,.03);
}

/* =========================================================
   YORUM YAP BUTONU
========================================================= */

.enb-btn-box{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition:
    transform .20s ease,
    box-shadow .20s ease,
    background-color .20s ease,
    border-color .20s ease,
    color .20s ease;
}

.enb-btn-box .icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transform: translateY(-.5px);
}

.enb-btn-box .label{
  display: inline-block;
}

.enb-btn-review{
  color: #fff;
  background: linear-gradient(135deg, #5B3A29 0%, #7a4e37 100%);
  box-shadow:
    0 8px 18px rgba(91,58,41,.18),
    0 3px 8px rgba(15,23,42,.06);
}

.enb-btn-review::before{
  content: "";
  position: absolute;
  top: 0;
  left: -140%;
  width: 120%;
  height: 100%;
  background: linear-gradient(
    100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.16) 45%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-18deg);
  transition: left .6s ease;
}

.enb-btn-review:hover{
  transform: translateY(-1px) scale(1.015);
  box-shadow:
    0 12px 24px rgba(91,58,41,.22),
    0 4px 10px rgba(15,23,42,.08);
}

.enb-btn-review:hover::before{
  left: 130%;
}

.enb-btn-review:active{
  transform: translateY(0) scale(.985);
}

.enb-btn-review .icon{
  animation: enbStarFloat 2s ease-in-out infinite;
}

@keyframes enbStarFloat{
  0%, 100%{
    transform: translateY(0) rotate(0deg);
  }
  50%{
    transform: translateY(-1px) rotate(5deg);
  }
}

.enb-btn-review:focus,
.enb-btn-review:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 4px rgba(91,58,41,.16),
    0 10px 22px rgba(91,58,41,.16);
}

/* =========================================================
   TRUST BOX
========================================================= */

.enb-trust-review-box{
  box-shadow:
    0 20px 60px rgba(0,0,0,.08),
    0 4px 14px rgba(0,0,0,.04);
}

.enb-trust-card{
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.enb-trust-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
}

.enb-trust-icon{
  width: 48px;
  height: 48px;
  border-radius: 16px;
}

/* =========================================================
   MOBILE OPTIMIZATION
========================================================= */

@media (max-width:640px){

  main section.bg-white\/95{
    padding: 22px;
    border-radius: 24px;
  }

  main h1{
    font-size: 22px;
  }

  main p{
    font-size: 13.5px;
  }

  input,
  select,
  textarea{
    padding: 12px 14px;
    font-size: 15px;
  }

  #whatsappBtn{
    width: 100%;
  }

  .enb-btn-box{
    width: auto;
    min-height: 40px;
    padding: 9px 14px;
    font-size: 13px;
  }

  .enb-btn-review{
    min-height: 40px;
  }

  .enb-btn-box .icon{
    font-size: 13px;
  }

  .enb-trust-icon{
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  section article{
    border-radius: 18px !important;
  }

  section .rounded-3xl{
    box-shadow: 0 6px 14px rgba(15,23,42,.04);
  }

  section .rounded-3xl:hover{
    transform: none;
    box-shadow: 0 8px 16px rgba(15,23,42,.05);
  }

  .enb-review-cta{
    border-radius: 18px;
    padding: 18px;
  }

  section .rounded-\[24px\]{
    border-radius: 18px !important;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce){
  *{
    animation: none !important;
    transition: none !important;
  }

  .enb-btn-review:hover{
    transform: none !important;
  }
}

/* =========================================================
   ORNEK TALEP KARTLARI - UST SATIR DENGESI
========================================================= */

section article{
  border-radius: 18px !important;
}

/* kart iç üst satır */
section article > div:first-child{
  align-items: center !important;
  gap: 10px !important;
}

/* sol alan: ikon + yazi */
section article > div:first-child > div:first-child{
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0; /* kritik */
}

/* ikon kutusu */
section article > div:first-child > div:first-child > div:first-child{
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 14px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

/* yazi alani */
section article > div:first-child > div:first-child > div:last-child{
  min-width: 0;
  flex: 1 1 auto;
}

/* baslik */
section article h3{
  margin: 0;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 800;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* alt satir */
section article h3 + div{
  margin-top: 4px !important;
  font-size: 12px !important;
  line-height: 1.35;
  color: #64748b !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* sagdaki rozet */
section article > div:first-child > span{
  flex: 0 0 auto;
  min-width: 82px;
  justify-content: center;
  text-align: center;
  padding: 6px 10px !important;
  font-size: 11px !important;
  line-height: 1.1;
  border-radius: 999px;
}

/* icerik alti */
section article .space-y-2 > div{
  line-height: 1.55;
}

/* =========================================================
   MOBIL INCE AYAR
========================================================= */

@media (max-width: 640px){
  section article{
    padding: 16px !important;
    border-radius: 16px !important;
  }

  section article > div:first-child{
    gap: 8px !important;
  }

  section article > div:first-child > div:first-child{
    gap: 8px !important;
  }

  section article > div:first-child > div:first-child > div:first-child{
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px !important;
    font-size: 16px;
  }

  section article h3{
    font-size: 14px;
  }

  section article h3 + div{
    font-size: 11px !important;
  }

  section article > div:first-child > span{
    min-width: 74px;
    padding: 5px 8px !important;
    font-size: 10px !important;
  }
}