/* Salepia - Ana Sayfa Stilleri
   Referans tasarımdan (referance-theme/Main.dc.html) birebir uyarlanmıştır. */

*{box-sizing:border-box;}
body{margin:0;background:#0c0c0c;}

.sal-root{font-family:'Poppins',sans-serif;-webkit-font-smoothing:antialiased;width:100%;background:#0c0c0c;overflow-x:hidden;}
.sal-script{font-family:'Alex Brush',cursive;}
.sal-about-h{font-family:'Playfair Display',serif;}

/* header */
.site-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px clamp(18px,5vw,80px);background:#0c0c0c;position:relative;z-index:30;border-bottom:1px solid rgba(255,255,255,0.04);}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;flex:none;}
.logo-mark-img{height:40px;width:40px;object-fit:contain;flex:none;}
.logo-text{font-size:27px;color:#d7ad62;line-height:1;}
.logo-reg{font-size:9px;color:#d7ad62;align-self:flex-start;margin-top:2px;}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2.2vw,32px);font-size:13.5px;font-weight:500;letter-spacing:.2px;list-style:none;margin:0;padding:0;}
.nav-links a{color:#e9e3d8;text-decoration:none;white-space:nowrap;}
.nav-links a.active{color:#d7ad62;padding-bottom:8px;border-bottom:2px solid #d7ad62;}
.nav-drop{display:flex;align-items:center;gap:4px;}
.nav-drop svg{transition:transform .2s ease;}
.header-icons{display:flex;align-items:center;gap:16px;flex:none;}
.icon-btn{background:none;border:none;padding:0;cursor:pointer;display:flex;color:#e9e3d8;}
.hamburger{display:none;background:none;border:none;cursor:pointer;color:#e9e3d8;padding:4px;}

/* Ürünler açılır menüsü (masaüstü) */
.nav-item-drop{position:relative;display:flex;align-items:center;}
.nav-dropdown{position:absolute;top:100%;left:0;padding-top:14px;display:none;z-index:40;}
.nav-item-drop:hover .nav-dropdown{display:block;}
.nav-item-drop:hover .nav-drop svg{transform:rotate(180deg);}
.nav-dropdown-inner{background:#141210;border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px;min-width:200px;display:flex;flex-direction:column;gap:2px;box-shadow:0 16px 32px rgba(0,0,0,.4);}
.nav-dropdown-inner a{display:block;padding:10px 14px;border-radius:6px;color:#e9e3d8;text-decoration:none;font-size:13px;white-space:nowrap;}
.nav-dropdown-inner a:hover{background:rgba(215,173,98,.1);color:#d7ad62;}
.nav-dropdown-inner a.active{color:#d7ad62;}

.mobile-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#141210;flex-direction:column;gap:14px;padding:18px clamp(18px,5vw,80px) 24px;border-top:1px solid rgba(255,255,255,0.08);z-index:29;}
.mobile-nav.open{display:flex;}
.mobile-nav a{color:#e9e3d8;text-decoration:none;font-size:14.5px;}
.mobile-nav a.active{color:#d7ad62;}
.mobile-nav-label{color:#e9e3d8;font-size:14.5px;font-weight:600;}
.mobile-subnav{display:flex;flex-direction:column;gap:10px;padding-left:16px;margin-top:-4px;}
.mobile-subnav a{font-size:13px;color:#cfc9bb;}
.mobile-subnav a.active{color:#d7ad62;}
@media (max-width:920px){
  .nav-links{display:none;}
  .hamburger{display:flex;}
}

/* hero / slider */
.hero{position:relative;width:100%;height:clamp(360px,46vw,500px);overflow:hidden;background:#0c0c0c;}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .7s ease;}
.hero-slide.active{opacity:1;z-index:1;}
.hero-overlay{position:absolute;inset:0;z-index:2;background:linear-gradient(100deg, rgba(8,7,5,.94) 0%, rgba(8,7,5,.82) 26%, rgba(8,7,5,.4) 52%, rgba(8,7,5,.08) 74%, rgba(8,7,5,0) 88%);}
.hero-content{position:relative;z-index:3;height:100%;display:none;flex-direction:column;justify-content:center;gap:12px;padding:0 clamp(20px,6vw,85px);max-width:600px;}
.hero-content.active{display:flex;}
.hero-logo{font-family:'Alex Brush',cursive;font-size:clamp(34px,6vw,58px);color:#d7ad62;line-height:1;display:flex;align-items:flex-end;gap:6px;}
.hero-logo span{font-size:12px;}
.hero-kicker{font-size:clamp(11px,1.4vw,15px);font-weight:600;letter-spacing:3px;color:#d7ad62;text-transform:uppercase;}
.hero-logo-img{height:clamp(64px,9vw,96px);width:auto;object-fit:contain;}
.hero-title{font-family:'Alex Brush',cursive;font-size:clamp(26px,4.6vw,42px);color:#fff;line-height:1.1;margin:2px 0;}
.hero-desc{font-size:clamp(12.5px,1.3vw,14.5px);line-height:1.6;color:#e7e2d8;max-width:420px;}
.hero-btn{margin-top:8px;align-self:flex-start;display:flex;align-items:center;gap:10px;background:#d7ad62;color:#1c1610;border:none;border-radius:24px;padding:12px 24px;font-size:13px;font-weight:600;font-family:'Poppins',sans-serif;cursor:pointer;text-decoration:none;}
.hero-badge{position:absolute;top:clamp(16px,3vw,28px);right:clamp(14px,4vw,60px);z-index:3;width:clamp(76px,8.5vw,108px);height:clamp(76px,8.5vw,108px);border-radius:50%;border:1.5px solid rgba(255,255,255,.85);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;gap:4px;}
.hero-badge b{font-size:clamp(12px,1.4vw,17px);font-weight:700;line-height:1.15;}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.hero-arrow.prev{left:clamp(8px,2vw,28px);}
.hero-arrow.next{right:clamp(8px,2vw,28px);}
.hero-dots{position:absolute;bottom:18px;left:0;right:0;display:flex;justify-content:center;gap:8px;z-index:4;}
.hero-dot{width:9px;height:9px;padding:0;border-radius:5px;background:rgba(255,255,255,.5);border:none;cursor:pointer;transition:all .25s ease;}
.hero-dot.active{background:#d7ad62;width:24px;}
@media (max-width:640px){
  .hero-badge{display:none;}
  .hero-content{max-width:100%;}
}

/* category grid */
.cat-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding:20px clamp(16px,4vw,35px);background:#f8f5f0;}
.cat-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.cat-card{position:relative;border-radius:14px;overflow:hidden;display:block;aspect-ratio:226/240;background-size:cover;background-position:center;text-decoration:none;}
.cat-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(10,8,6,0) 36%, rgba(10,8,6,.85) 100%);}
.cat-text{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;color:#fff;}
.cat-title{margin:0;font-size:clamp(14px,1.6vw,17px);font-weight:600;}
.cat-sub{margin:4px 0 0;font-size:clamp(11px,1.1vw,12.5px);color:#e7e2d8;opacity:.92;}
.cat-arrow{margin-top:6px;display:block;}
@media (max-width:900px){.cat-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:560px){.cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* about */
.about{display:flex;flex-wrap:wrap;background:#f8f3ed;}
.about-img{position:relative;flex:1 1 260px;height:232px;background-size:cover;background-position:center;overflow:hidden;}
.about-overlay{position:absolute;inset:0;background:linear-gradient(120deg, rgba(8,7,6,.55) 0%, rgba(8,7,6,.18) 45%, rgba(8,7,6,0) 68%);}
.about-caption{position:absolute;left:22px;bottom:22px;right:16px;color:#fff;font-size:clamp(18px,2.4vw,23px);line-height:1.28;text-shadow:0 2px 10px rgba(0,0,0,.45);}
.about-panel{flex:2 1 380px;padding:28px clamp(20px,4vw,48px);display:flex;flex-direction:column;justify-content:center;gap:12px;}
.about-title{margin:0;font-size:clamp(20px,2.4vw,24px);font-weight:700;color:#1b1b1b;}
.about-text{margin:0;font-size:13.5px;line-height:1.65;color:#5a554c;max-width:440px;}
.about-btn{margin-top:6px;align-self:flex-start;display:flex;align-items:center;gap:10px;background:#17140f;color:#fff;border:none;border-radius:24px;padding:11px 22px;font-size:13px;font-weight:500;font-family:'Poppins',sans-serif;cursor:pointer;text-decoration:none;}
@media (max-width:760px){.about-img{flex-basis:100%;height:200px;}}

/* ürün özellikleri listesi (about-panel içinde kullanılır) */
.feature-list-title{margin:10px 0 0;font-size:13px;font-weight:600;color:#1b1b1b;text-transform:uppercase;letter-spacing:.5px;}
.feature-list{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;}
.feature-list li{position:relative;padding-left:22px;font-size:13.5px;line-height:1.6;color:#5a554c;}
.feature-list li::before{content:'';position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:50%;background:#d7ad62;}

/* icons row */
.icons-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:#f2efe8;border-bottom:2px solid #0c0c0c;}
.icon-col{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:22px 8px;border-left:1px solid #ddd6c8;text-align:center;}
.icon-col:first-child{border-left:none;}
.icon-col span{font-size:12.5px;font-weight:600;color:#171512;}
@media (max-width:820px){
  .icons-row{grid-template-columns:repeat(3,minmax(0,1fr));}
  .icon-col:nth-child(4){border-left:none;}
}
@media (max-width:480px){
  .icons-row{grid-template-columns:repeat(2,minmax(0,1fr));}
  .icon-col:nth-child(odd){border-left:none;}
}

/* footer */
.footer{background:#0c0c0c;padding:26px clamp(18px,4vw,40px) 0;}
.footer-top{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;padding-bottom:20px;}
.footer-brand{display:flex;align-items:center;gap:20px;flex:1 1 240px;flex-wrap:wrap;}
.footer-logo-link{display:flex;align-items:center;gap:6px;text-decoration:none;}
.footer-logo-img{height:30px;width:30px;object-fit:contain;flex:none;}
.footer-logo-text{font-size:22px;color:#d7ad62;}
.footer-tag{font-size:15px;color:#efe9dd;line-height:1.3;font-style:italic;}
.footer-news{flex:1 1 260px;max-width:340px;}
.footer-news-title{font-size:13px;font-weight:600;color:#d7ad62;}
.footer-news-desc{font-size:11px;color:#8a8578;margin-top:4px;line-height:1.5;}
.footer-form{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap;}
.sal-input{flex:1 1 140px;background:transparent;border:1px solid #3a362f;border-radius:20px;padding:8px 14px;font-size:11.5px;color:#efe9dd;font-family:'Poppins',sans-serif;}
.sal-input::placeholder{color:#7a746a;}
.footer-subscribe-btn{background:#d7ad62;border:none;border-radius:20px;padding:8px 18px;font-size:11.5px;font-weight:600;color:#17140f;font-family:'Poppins',sans-serif;cursor:pointer;white-space:nowrap;}
.footer-contact{flex:1 1 180px;display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
.footer-social{display:flex;gap:10px;}
.social-btn{width:26px;height:26px;border-radius:50%;border:1px solid #4a4638;display:flex;align-items:center;justify-content:center;color:#efe9dd;text-decoration:none;}
.footer-line{font-size:12px;color:#cfc9bb;display:flex;align-items:center;gap:7px;}
@media (max-width:680px){.footer-contact{align-items:flex-start;}}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:14px 0;display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;font-size:11px;color:#7a7568;}

/* ===== iç sayfa ortak bileşenleri (Hakkımızda, Ürünler, vb.) =====
   Ana sayfada kurulan bileşenlerin (.hero, .about, .icons-row) aynı
   görsel dilini genişleterek kullanır; yeni bir tasarım dili icat etmez. */

/* .about görsellerinin metin uzunluğuna göre esnemesi için (ana sayfada
   panel her zaman kısa olduğundan fark görünmez, iç sayfalarda uzun
   metinlerde görsel panel yüksekliğine eşit şekilde uzar) */
.about-img{height:auto;min-height:232px;align-self:stretch;}
.about + .about{border-top:1px solid rgba(20,16,10,.07);}

/* kısa alt sayfa hero'su: ana sayfadaki .hero ile birebir aynı stil,
   sadece slayt yerine tek sabit görsel ve daha kısa yükseklik kullanır */
.hero.hero-sub{height:clamp(220px,30vw,300px);}
.hero-sub .hero-content{justify-content:center;gap:10px;}

/* hero'nun hemen altında duran fotoğraf blokları (.about, .cat-grid) için
   "yüzen kart" çerçevesi: koyu zemin üzerinde nefes alanı + yumuşak
   gölge/altın parıltı ile banner'a yapışık görünmeyi önler */
.photo-frame{background:#0c0c0c;padding:40px clamp(16px,4vw,64px) 52px;}
.photo-frame + .photo-frame{padding-top:0;}
.photo-frame .about,
.photo-frame .cat-grid,
.photo-frame .flower-gallery{border-radius:22px;overflow:hidden;box-shadow:0 30px 70px -18px rgba(0,0,0,.6), 0 0 46px -14px rgba(215,173,98,.25);}
.photo-frame .about + .about{border-top:1px solid rgba(20,16,10,.07);}

/* doğadan kareler galerisi (salep çiçeği vb. sayfalarda) */
.flower-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;background:#0c0c0c;}
.flower-gallery-item{position:relative;aspect-ratio:1/1;background-size:cover;background-position:center;}
@media (max-width:820px){.flower-gallery{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* bölüm başlığı (ortalanmış), about-title/about-text ile aynı tipografi */
.section-head{max-width:640px;margin:0 auto;text-align:center;display:flex;flex-direction:column;gap:10px;}
.section-heading{font-family:'Playfair Display',serif;font-size:clamp(24px,3.2vw,34px);font-weight:700;color:#1b1b1b;margin:0;}
.section-lead{font-size:13.5px;line-height:1.75;color:#5a554c;margin:0 auto;max-width:540px;}

/* misyon şeridi: ana sayfadaki .icons-row ile aynı zemin/kart dili,
   madde sayısı sabit olmadığından auto-fit ile esner */
.mission-band{background:#f2efe8;padding:48px clamp(18px,5vw,80px) 40px;border-bottom:2px solid #0c0c0c;}
.mission-band .icons-row{margin-top:32px;border-bottom:none;background:transparent;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}
.mission-closing{text-align:center;margin:30px auto 0;font-family:'Alex Brush',cursive;color:#b98a3e;font-size:clamp(19px,2.3vw,25px);line-height:1.4;}

/* ===== İletişim sayfası ===== */

/* bilgi + form şeridi (mission-band ile aynı zemin) */
.contact-band{background:#f2efe8;padding:56px clamp(18px,5vw,80px);}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(28px,4vw,56px);max-width:1180px;margin:0 auto;align-items:start;}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;}}

.contact-info-title{font-family:'Playfair Display',serif;font-size:clamp(22px,2.8vw,28px);font-weight:700;color:#1b1b1b;margin:0 0 8px;}
.contact-info-lead{font-size:13.5px;line-height:1.7;color:#5a554c;margin:0 0 26px;max-width:400px;}
.contact-list{display:flex;flex-direction:column;gap:20px;}
.contact-item{display:flex;align-items:flex-start;gap:14px;}
.contact-icon{flex:none;width:42px;height:42px;border-radius:50%;background:#1b1712;display:flex;align-items:center;justify-content:center;color:#d7ad62;}
.contact-label{display:block;font-size:11.5px;font-weight:600;letter-spacing:.5px;color:#8a6a35;text-transform:uppercase;margin-bottom:4px;}
.contact-value{display:block;font-size:14px;line-height:1.6;color:#2a2620;text-decoration:none;}
.contact-value + .contact-value{margin-top:2px;}
a.contact-value:hover{color:#b98a3e;}
.contact-social{display:flex;gap:10px;margin-top:6px;}

/* iletişim formu */
.contact-form{background:#fffdfa;border:1px solid rgba(20,16,10,.08);border-radius:18px;padding:clamp(24px,3.5vw,36px);box-shadow:0 18px 44px -20px rgba(20,16,10,.18);}
.contact-form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:520px){.contact-form-row{grid-template-columns:1fr;}}
.form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.form-field label{font-size:11.5px;font-weight:600;letter-spacing:.4px;color:#5a554c;text-transform:uppercase;}
.form-input,
.form-textarea{font-family:'Poppins',sans-serif;font-size:13.5px;color:#2a2620;background:#fff;border:1px solid #ddd6c8;border-radius:10px;padding:11px 14px;width:100%;}
.form-input:focus,
.form-textarea:focus{outline:none;border-color:#d7ad62;}
.form-textarea{resize:vertical;min-height:110px;}
.form-submit{margin-top:4px;background:#17140f;color:#fff;border:none;border-radius:24px;padding:13px 28px;font-size:13px;font-weight:600;font-family:'Poppins',sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:10px;}

/* harita bölümü */
.map-section{background:#0c0c0c;padding:0 clamp(18px,5vw,80px) 56px;}
.map-frame{max-width:1180px;margin:0 auto;border-radius:22px;overflow:hidden;box-shadow:0 30px 70px -18px rgba(0,0,0,.6), 0 0 46px -14px rgba(215,173,98,.25);}
.map-frame iframe{display:block;width:100%;height:340px;border:0;}

/* ===== Blog sayfası ===== */
.blog-band{background:#f8f5f0;padding:56px clamp(18px,5vw,80px);}
.blog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;max-width:1100px;margin:36px auto 0;}
@media (max-width:760px){.blog-grid{grid-template-columns:1fr;}}
.blog-card{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 18px 44px -24px rgba(20,16,10,.25);display:flex;flex-direction:column;}
.blog-card-img{height:210px;background-size:cover;background-position:center;}
.blog-card-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:8px;}
.blog-date{font-size:11px;font-weight:600;letter-spacing:.6px;color:#b98a3e;text-transform:uppercase;}
.blog-title{font-family:'Playfair Display',serif;font-size:19px;font-weight:700;color:#1b1b1b;margin:0;}
.blog-excerpt{font-size:13.5px;line-height:1.7;color:#5a554c;margin:0;}
.blog-tag{display:inline-flex;align-self:flex-start;margin-top:6px;font-size:11px;font-weight:600;color:#8a6a35;background:#f2e7d3;border-radius:12px;padding:4px 12px;}