/* Caffolia vitrin — ortak duyarlılık kuralları
   Kaynak: onaylı sunumv2 tasarımı (kurulum/tasarim-referans). Bileşen dosyalarından SONRA yüklenmeli. */

/* ========================================================== 17. DUYARLILIK */
@media (max-width:1180px){
  .urun-izgara--5{grid-template-columns:repeat(3,1fr)}
  .dipnot__ic{grid-template-columns:1.4fr 1fr 1fr;row-gap:38px}
  .dipnot__bulten{grid-column:1/-1;max-width:460px}
}
/* 7 bağlantılı menü ile arama hapı ancak 1360 px üstünde sığıyor */
@media (max-width:1360px){
  .ara-kutu{display:none}
  .ikon-dugme--ara{display:grid}
}
@media (max-width:1024px){
  .hero__metin{max-width:min(560px,62%)}
  .hero__el{display:none}
  .fark__liste{position:static;transform:none;width:auto;
    flex-direction:row;flex-wrap:wrap;text-align:left;
    padding:0 clamp(34px,4.4vw,60px) clamp(30px,4vw,48px);gap:14px 26px}
  .fark__liste li{white-space:nowrap}
  .fark__liste br{display:none}
  .fark__sag{flex-direction:column;align-items:stretch;justify-content:center}
  .fark__ic{max-width:100%}
  .fark__yaprak{width:58%;opacity:.55}
  .bulten__ic{grid-template-columns:1fr;gap:30px}
  .blog__izgara{grid-template-columns:1fr}
  .yazi-kart__gorsel{max-width:190px}
}
/* Menü 7 bağlantıya çıktı (Ana Sayfa + Şubelerimiz eklendi); 1100 px altında
   hamburgere düşer. Sayfa düzeni kuralları 900 px'te kalır. */
@media (max-width:1100px){
  /* MOBİL MENÜ — v1 dersi: .tepe üzerinde konumlanan panel, perdenin altında kalıyordu.
     Bu yüzden .menu mobilde JS ile <body>'ye taşınır; burada da z-index perdenin üstünde. */
  .hamburger{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-tam);
    color:var(--metin-ac);transition:background-color var(--gecis)}
  .hamburger:hover{background:rgba(249,244,236,.12)}
  .hamburger svg{width:24px;height:24px}

  .menu{
    position:fixed;top:0;right:0;z-index:102;
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    width:min(330px,86vw);height:100dvh;margin:0;padding:96px 26px 32px;
    background:var(--kahve-900);box-shadow:var(--golge-l);
    transform:translateX(102%);
    /* kapalıyken gizli: gölgesi sağ kenara taşmaz, bağlantılar sekme sırasına girmez */
    visibility:hidden;transition:transform var(--gecis),visibility 0s linear .28s;
  }
  .menu[data-acik="1"]{transform:translateX(0);visibility:visible;transition:transform var(--gecis)}
  .menu__bag{padding:17px 0;font-size:1.06rem;border-bottom:1px solid var(--cizgi-ac)}
  .menu__bag::after{display:none}
  .menu__kapat{
    position:absolute;top:26px;right:22px;display:grid;place-items:center;
    width:40px;height:40px;border-radius:var(--r-tam);color:var(--metin-ac);
    background:rgba(249,244,236,.10)}
  .menu__kapat svg{width:19px;height:19px}
  .menu__bag[data-aktif]{color:var(--gold-400)}
}

@media (max-width:900px){
  :root{--tepe-h:72px}
  .hero__ic{min-height:0;padding-top:calc(var(--tepe-h) + 28px);padding-bottom:0;
    flex-direction:column;align-items:stretch}
  .hero__metin{max-width:none;padding-bottom:36px}
  .hero__zemin{display:none}
  .hero{background:linear-gradient(180deg,#120903 0%,var(--kahve-900) 60%)}
  .hero__mobil-gorsel{display:block;margin-inline:calc(-1*clamp(16px,4vw,40px))}
  .hero__mobil-gorsel img{width:100%;aspect-ratio:9/10;object-fit:cover;object-position:52% 40%}
  .hero__ozellikler{margin-top:32px;gap:18px;flex-direction:column}
  .hero__oz{max-width:none;padding-left:0;border-left:0;padding-top:18px;border-top:1px solid rgba(249,244,236,.16)}
  .hero__ozellikler .hero__oz:first-child{padding-top:0;border-top:0}

  .guven__ic{grid-template-columns:1fr 1fr}
  .guven__oge:nth-child(-n+2){border-bottom:1px solid var(--cizgi)}
  .guven__oge:nth-child(odd){border-left:0}

  .urun-izgara--5,.urun-izgara--4,.urun-izgara--esnek{grid-template-columns:repeat(2,1fr)}
  .fark,.hikaye{grid-template-columns:1fr}
  .hikaye__gorsel{min-height:clamp(240px,52vw,380px)}
  .oneri__govde{max-width:100%}
  .oneri__zemin::after{background:linear-gradient(180deg,rgba(18,40,24,.92) 0%,rgba(18,40,24,.86) 62%,rgba(18,40,24,.80) 100%)}
  .secim{max-width:none;flex-basis:100%}
  .oneri__form .dugme{width:100%}
  .bulten__form button{padding-inline:22px}
}
@media (max-width:640px){
  .ust-serit__ic{font-size:.79rem;padding-block:9px;min-height:42px;gap:8px}
  .hero__basli{font-size:clamp(2.1rem,9vw,2.9rem)}
  .hero__dugmeler .dugme{flex:1 1 100%}
  .guven__ic{grid-template-columns:1fr}
  .guven__oge{flex-direction:row;align-items:center;text-align:left;gap:16px;border-left:0;
    border-bottom:1px solid var(--cizgi);padding-block:22px}
  .guven__oge:last-child{border-bottom:0}
  .guven__oge svg{width:28px;height:28px}
  .guven__oge p{max-width:none}
  .guven__oge div{min-width:0}
  .urun-izgara--5,.urun-izgara--4,.urun-izgara--esnek{grid-template-columns:1fr 1fr;gap:12px}
  .urun-kart__govde{padding:13px}
  .urun-kart__ad{font-size:.92rem}
  .urun-kart__fiyat{font-size:1rem}
  .urun-kart__sepet{padding:11px 12px;font-size:.82rem}
  .daire-ok{width:34px;height:34px}
  .yazi-kart{flex-direction:column}
  .yazi-kart__gorsel{flex:none;max-width:none;width:100%;aspect-ratio:16/9}
  .bulten__form{flex-direction:column;border-radius:var(--r-l)}
  .bulten__form button{justify-content:center;border-radius:var(--r-l)}
  .dipnot__ic{grid-template-columns:1fr 1fr}
  .dipnot__marka{grid-column:1/-1}
  .dipnot__alt{justify-content:flex-start}
  .istatistik{gap:22px}
  .istatistik div{flex:1 1 40%}
}
@media (max-width:359px){
  .urun-izgara--5,.urun-izgara--4,.urun-izgara--esnek{grid-template-columns:1fr}
  .urun-kart__gorsel{aspect-ratio:1/1}
}

/* -------------------------------------------------- hareket azaltma tercihi */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;
    scroll-behavior:auto!important}
}

/* --------------------------------------------------------------- yazdırma */
@media print{
  .tepe,.ust-serit,.perde,.panel,.arama,.bildirim-alani{display:none!important}
  body{background:#fff}
}