/* Caffolia vitrin — ana sayfa bölümleri
   Kaynak: onaylı sunumv2 tasarımı (kurulum/tasarim-referans). Hero, güven bandı, fark, hikâye, öneri, bülten. */

/* ================================================================ 7. HERO */
.hero{position:relative;background:var(--kahve-900);isolation:isolate;overflow:hidden}
.hero__zemin{position:absolute;inset:0;z-index:-2}
.hero__zemin img{width:100%;height:100%;object-fit:cover;object-position:62% center}
.hero__zemin::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(21,11,6,.97) 0%,rgba(21,11,6,.96) 34%,
                          rgba(21,11,6,.74) 48%,rgba(21,11,6,.26) 64%,transparent 82%),
    linear-gradient(180deg,rgba(21,11,6,.82) 0%,rgba(21,11,6,.34) 18%,transparent 32%);
}
.hero__ic{
  position:relative;display:flex;align-items:center;
  min-height:clamp(600px,84vh,880px);
  padding-top:calc(var(--tepe-h) + 34px);padding-bottom:56px;
}
.hero__metin{max-width:min(618px,52%)}
.hero__ustbasli{
  display:block;font-size:.8rem;font-weight:600;letter-spacing:.34em;
  text-transform:uppercase;color:var(--gold-600);margin-bottom:20px;
}
.hero__basli{
  font-size:clamp(2.6rem,5.4vw,4.35rem);line-height:1.04;font-weight:700;
  letter-spacing:-.028em;color:var(--krem);
  text-shadow:0 2px 26px rgba(21,11,6,.42);
}
.hero__basli b{font-weight:700;color:#FFFDF9}
.hero__ozet{
  margin-top:22px;max-width:30ch;font-size:clamp(1rem,1.25vw,1.16rem);
  line-height:1.6;color:var(--metin-ac-3);text-shadow:0 1px 14px rgba(21,11,6,.85);
}
.hero__dugmeler{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

.hero__ozellikler{
  display:flex;gap:clamp(14px,1.7vw,24px);margin-top:clamp(40px,5vw,62px);
}
.hero__oz{
  display:flex;gap:11px;flex:1 1 0;min-width:0;
  padding-left:clamp(14px,1.7vw,24px);
  border-left:1px solid rgba(249,244,236,.20);
}
.hero__ozellikler .hero__oz:first-child{padding-left:0;border-left:0}
.hero__oz svg{width:24px;height:24px;flex:none;color:var(--gold-600);margin-top:1px}
.hero__oz dt{font-size:.88rem;font-weight:600;color:var(--metin-ac);line-height:1.35;
  text-shadow:0 1px 12px rgba(21,11,6,.9)}
.hero__oz dd{margin:6px 0 0;font-size:.79rem;line-height:1.5;color:var(--metin-ac-3);
  text-shadow:0 1px 12px rgba(21,11,6,.9)}

.hero__el{
  position:absolute;top:clamp(120px,17vh,190px);right:clamp(28px,5vw,74px);
  text-align:center;color:var(--gold-200);pointer-events:none;
  text-shadow:0 2px 20px rgba(21,11,6,.55);
}
.hero__el span{
  display:block;font-family:var(--el);font-size:clamp(2rem,3.8vw,3.2rem);
  line-height:1.12;transform:rotate(-7deg);
}
.hero__el svg{width:clamp(130px,13vw,186px);height:auto;margin-top:6px;
  transform:rotate(-7deg);color:var(--gold-200);opacity:.85}

/* ======================================================== 8. GÜVEN BANDI */
.guven{background:var(--zemin-2);border-bottom:1px solid var(--cizgi)}
.guven__ic{display:grid;grid-template-columns:repeat(4,1fr)}
.guven__oge{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:clamp(30px,3.6vw,44px) clamp(14px,2vw,28px);text-align:center;
  border-left:1px solid var(--cizgi);
}
.guven__oge:first-child{border-left:0}
.guven__oge svg{width:34px;height:34px;color:var(--bordo-800);stroke-width:1.3}
.guven__oge h3{font-size:1.02rem;font-weight:600;letter-spacing:-.005em}
.guven__oge p{font-size:.85rem;line-height:1.55;color:var(--metin-2);max-width:26ch}

/* ============================================================== 10. FARK */
.fark{display:grid;grid-template-columns:1fr 1fr}
.fark__sol{position:relative;display:flex;align-items:center;
  min-height:clamp(380px,42vw,540px);overflow:hidden}
.fark__sol img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fark__sol::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(26,14,8,.72) 0%,rgba(26,14,8,.34) 34%,transparent 62%);
}
.fark__yazi{
  position:relative;z-index:1;padding:clamp(34px,4.4vw,60px);
  font-size:clamp(1.7rem,3.2vw,2.65rem);line-height:1.18;font-weight:600;
  letter-spacing:-.02em;color:var(--krem);text-shadow:0 2px 22px rgba(21,11,6,.5);
}

.fark__sag{
  position:relative;display:flex;align-items:center;overflow:hidden;
  background:linear-gradient(100deg,var(--orman-800) 0%,#18280F 46%,var(--orman-900) 100%);
}
.fark__yaprak{
  position:absolute;top:0;right:clamp(88px,9.6%,140px);height:100%;width:42%;
  object-fit:cover;object-position:38% center;opacity:.95;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 34%,#000 78%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 34%,#000 78%,transparent 100%);
}
.fark__ic{position:relative;z-index:1;padding:clamp(34px,4.4vw,60px);
  max-width:calc(100% - clamp(170px,22%,280px))}
.fark__ic p{
  margin-top:18px;max-width:38ch;font-size:clamp(.95rem,1.15vw,1.06rem);
  line-height:1.65;color:var(--metin-ac-3);text-shadow:0 1px 14px rgba(6,14,6,.85);
}
.fark__ic .dugme{margin-top:28px}

.fark__liste{
  position:absolute;z-index:1;right:clamp(14px,1.8vw,26px);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:clamp(20px,3vw,34px);text-align:right;
  width:clamp(86px,9.2vw,126px);
}
.fark__liste li{
  font-size:.78rem;font-weight:600;letter-spacing:.08em;line-height:1.5;
  text-transform:uppercase;color:var(--metin-ac);
  text-shadow:0 1px 12px rgba(6,12,4,.95),0 0 26px rgba(6,12,4,.7);
}

/* =========================================================== 11. HİKÂYE */
.hikaye{display:grid;grid-template-columns:1fr 1fr;background:var(--zemin-2)}
.hikaye__gorsel{position:relative;min-height:clamp(340px,38vw,500px)}
.hikaye__gorsel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hikaye__metin{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(34px,4.6vw,66px);
}
.hikaye__metin p{
  margin-top:18px;max-width:46ch;font-size:clamp(.95rem,1.15vw,1.06rem);
  line-height:1.68;color:var(--metin-2);
}
.istatistik{display:flex;gap:clamp(24px,4vw,54px);margin-top:clamp(28px,3.4vw,42px);flex-wrap:wrap}
.istatistik div b{
  display:block;font-size:clamp(1.7rem,2.9vw,2.3rem);font-weight:700;
  letter-spacing:-.02em;line-height:1.1;color:var(--metin);
}
.istatistik div span{display:block;margin-top:5px;font-size:.84rem;color:var(--metin-2)}
.istatistik--ac div b{color:var(--gold-400)}
.istatistik--ac div span{color:var(--metin-ac-2)}
.hikaye__metin .dugme{align-self:flex-start;margin-top:clamp(26px,3vw,36px)}

/* ============================================================= 12. ÖNERİ */
.oneri{padding:clamp(40px,5vw,64px) 0;background:var(--zemin)}
.oneri__ic{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  background:var(--orman-700);box-shadow:var(--golge-l);isolation:isolate;
}
.oneri__zemin{position:absolute;inset:0;z-index:-1}
.oneri__zemin img{width:100%;height:100%;object-fit:cover;object-position:68% center}
.oneri__zemin::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(18,40,24,.97) 0%,rgba(18,40,24,.95) 42%,
                                   rgba(18,40,24,.66) 60%,rgba(18,40,24,.20) 78%,transparent 93%);
}
.oneri__govde{padding:clamp(28px,3.4vw,48px);max-width:min(1180px,95%)}
.oneri__govde h2{
  font-size:clamp(1.55rem,3vw,2.35rem);line-height:1.16;font-weight:700;
  letter-spacing:-.02em;color:var(--metin-ac);max-width:22ch;
}
.oneri__govde p{
  margin-top:14px;max-width:52ch;font-size:clamp(.94rem,1.1vw,1.04rem);
  line-height:1.6;color:var(--metin-ac-3);text-shadow:0 1px 14px rgba(8,20,10,.9);
}
.oneri__form{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,2.8vw,34px)}
.secim{position:relative;flex:1 1 210px;max-width:300px}
.secim select{
  width:100%;appearance:none;-webkit-appearance:none;
  padding:15px 40px 15px 20px;border:0;border-radius:var(--r-tam);
  background:var(--beyaz);color:var(--metin);font-size:.89rem;cursor:pointer;
  text-overflow:ellipsis;
  box-shadow:var(--golge-s);
}
.secim select:invalid{color:var(--metin-2)}
.secim svg{
  position:absolute;right:18px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;pointer-events:none;color:var(--metin-2);
}
.oneri__form .dugme{flex:0 0 auto}
.oneri__sonuc{
  margin-top:18px;padding:16px 20px;border-radius:var(--r-m);
  background:rgba(249,244,236,.10);border:1px solid rgba(249,244,236,.22);
  color:var(--metin-ac);font-size:.94rem;line-height:1.6;max-width:62ch;
}
.oneri__sonuc b{color:var(--gold-200)}
.oneri__sonuc a{border-bottom:1px solid var(--gold-400);color:var(--gold-200);font-weight:600}

/* ============================================================= 14. BÜLTEN */
.bulten{position:relative;isolation:isolate;overflow:hidden;background:var(--orman-800)}
.bulten__zemin{position:absolute;inset:0;z-index:-1}
.bulten__zemin img{width:100%;height:100%;object-fit:cover}
.bulten__zemin::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,20,9,.95) 0%,rgba(10,20,9,.88) 40%,rgba(10,20,9,.80) 100%);
}
.bulten__ic{
  display:grid;grid-template-columns:1.1fr .9fr;align-items:center;
  gap:clamp(28px,4vw,56px);padding-block:clamp(48px,6vw,76px);
}
.bulten__basli{
  font-size:clamp(1.8rem,3.5vw,2.8rem);line-height:1.12;font-weight:700;
  letter-spacing:-.022em;color:var(--metin-ac);
}
.bulten__ozet{margin-top:14px;max-width:40ch;font-size:clamp(.95rem,1.15vw,1.06rem);
  line-height:1.6;color:var(--metin-ac-3);text-shadow:0 1px 14px rgba(6,14,6,.9)}

.bulten__form{display:flex;background:var(--alan);border-radius:var(--r-tam);
  overflow:hidden;box-shadow:var(--golge-m)}
.bulten__form input{
  flex:1;min-width:0;padding:17px 24px;border:0;background:transparent;
  font-size:.95rem;color:var(--metin);
}
.bulten__form input::placeholder{color:var(--metin-2)}
.bulten__form input:focus{outline:none}
.bulten__form button{
  flex:none;display:flex;align-items:center;gap:9px;padding:17px 30px;
  background:linear-gradient(180deg,var(--gold-200) 0%,#DCB36B 100%);
  color:#2A1B08;font-size:.95rem;font-weight:600;
  transition:filter var(--gecis);
}
.bulten__form button:hover{filter:brightness(1.06)}
.bulten__form button svg{width:16px;height:16px;transition:transform var(--gecis)}
.bulten__form button:hover svg{transform:translateX(3px)}

.onay{display:flex;align-items:center;gap:11px;margin-top:16px;
  font-size:.88rem;color:var(--metin-ac-3);cursor:pointer;
  text-shadow:0 1px 12px rgba(6,14,6,.92)}
.onay input{position:absolute;opacity:0;width:0;height:0}
.onay__kutu{
  display:grid;place-items:center;width:22px;height:22px;flex:none;
  border:1.5px solid rgba(249,244,236,.55);border-radius:6px;color:transparent;
  transition:background-color var(--gecis),border-color var(--gecis),color var(--gecis);
}
.onay__kutu svg{width:13px;height:13px;stroke-width:3}
.onay input:checked + .onay__kutu{background:var(--metin-ac);border-color:var(--metin-ac);color:var(--kahve-900)}
.onay input:focus-visible + .onay__kutu{outline:2px solid var(--gold-400);outline-offset:2px}

.bulten__not{margin-top:12px;font-size:.79rem;color:rgba(249,244,236,.80);max-width:44ch;
  text-shadow:0 1px 12px rgba(6,14,6,.92)}