/* ==========================================================================
   DURLAS — durmuslar.com.tr
   Marka renkleri logodan alınmıştır: #F5821F (turuncu) / #231F20 (antrasit)
   ========================================================================== */

:root{
  --turuncu:#F5821F;
  --turuncu-koyu:#D96D10;
  --turuncu-acik:#FFF3E7;
  --antrasit:#231F20;
  --antrasit-2:#2E2A2B;
  --antrasit-3:#3D3839;
  --metin:#231F20;
  --metin-2:#5C5658;
  --metin-3:#8A8385;
  --cizgi:#E7E3E4;
  --zemin:#FFFFFF;
  --zemin-2:#F7F5F5;
  --radius:14px;
  --radius-s:10px;
  --golge:0 1px 2px rgba(35,31,32,.05), 0 8px 24px rgba(35,31,32,.06);
  --golge-hover:0 2px 4px rgba(35,31,32,.06), 0 16px 40px rgba(35,31,32,.12);
  --kap:1200px;
  --gecis:.22s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px}
body{
  margin:0; overflow-x:hidden;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:16.5px; line-height:1.65; color:var(--metin);
  background:var(--zemin);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
ul{margin:0; padding:0; list-style:none}
h1,h2,h3,h4{
  font-family:'Barlow Condensed','Inter',sans-serif;
  font-weight:700; line-height:1.06; margin:0;
  letter-spacing:-.005em; text-transform:uppercase;
}
h1{font-size:clamp(2.05rem,6.2vw,4.6rem); overflow-wrap:break-word}
h2{font-size:clamp(1.65rem,4.2vw,3.1rem); overflow-wrap:break-word}
h3{font-size:1.4rem}
h4{font-size:1.05rem; letter-spacing:.04em}
p{margin:0}

.kap{width:100%; max-width:var(--kap); margin-inline:auto; padding-inline:22px}

.atla{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--turuncu); color:#fff; padding:12px 20px; font-weight:600;
}
.atla:focus{left:12px; top:12px}

:where(a,button,input,textarea,summary):focus-visible{
  outline:3px solid var(--turuncu); outline-offset:2px; border-radius:4px;
}

/* ---------- Butonlar ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:600; font-size:.95rem; line-height:1;
  padding:13px 22px; border-radius:var(--radius-s); border:1.5px solid transparent;
  cursor:pointer; transition:var(--gecis); white-space:nowrap;
}
.btn svg{width:19px; height:19px; flex:none}
.btn-buyuk{padding:16px 30px; font-size:1.02rem}
.btn-tam{width:100%}
.btn-turuncu{background:var(--turuncu); color:#fff; border-color:var(--turuncu)}
.btn-turuncu:hover{background:var(--turuncu-koyu); border-color:var(--turuncu-koyu); transform:translateY(-2px); box-shadow:0 10px 24px rgba(245,130,31,.32)}
.btn-koyu{background:var(--antrasit); color:#fff; border-color:var(--antrasit)}
.btn-koyu:hover{background:var(--antrasit-2); transform:translateY(-2px)}
.btn-hayalet{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.42); backdrop-filter:blur(6px)}
.btn-hayalet:hover{background:#fff; color:var(--antrasit); border-color:#fff; transform:translateY(-2px)}
.btn-cizgili{background:#fff; color:var(--antrasit); border-color:var(--cizgi)}
.btn-cizgili:hover{border-color:var(--antrasit); background:var(--antrasit); color:#fff; transform:translateY(-2px)}

/* ---------- Header ---------- */
.header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.94); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--cizgi);
  transition:box-shadow var(--gecis);
}
.header.kaydi{box-shadow:0 4px 24px rgba(35,31,32,.09)}
.header-ic{display:flex; align-items:center; gap:24px; min-height:74px}
.logo img{width:150px; height:auto}
.nav{display:flex; align-items:center; gap:30px; margin-left:auto}
.nav > a:not(.btn){
  font-size:.93rem; font-weight:600; color:var(--metin-2);
  position:relative; padding:6px 0; transition:var(--gecis);
}
.nav > a:not(.btn)::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--turuncu); transition:width var(--gecis);
}
.nav > a:not(.btn):hover{color:var(--metin)}
.nav > a:not(.btn):hover::after{width:100%}
.nav-cta{margin-left:6px}
.menu-btn{
  display:none; margin-left:auto; width:44px; height:44px; padding:10px;
  background:none; border:1px solid var(--cizgi); border-radius:var(--radius-s); cursor:pointer;
  flex-direction:column; justify-content:space-between;
}
.menu-btn span{display:block; height:2px; background:var(--antrasit); border-radius:2px; transition:var(--gecis)}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative; min-height:min(78vh,640px); display:flex; align-items:center; overflow:hidden; isolation:isolate}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:left center; z-index:-2}
.hero-perde{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg, rgba(20,17,18,.94) 0%, rgba(20,17,18,.82) 42%, rgba(20,17,18,.36) 74%, rgba(20,17,18,.18) 100%),
    linear-gradient(0deg, rgba(20,17,18,.55) 0%, transparent 45%);
}
.hero-ic{padding-block:clamp(70px,10vw,120px); color:#fff; max-width:820px}
.hero-rozet{
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(245,130,31,.16); border:1px solid rgba(245,130,31,.45);
  color:#FFC58A; font-size:.82rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:8px 16px; border-radius:999px; margin-bottom:22px;
}
.nokta{width:7px; height:7px; border-radius:50%; background:var(--turuncu); box-shadow:0 0 0 4px rgba(245,130,31,.22)}
.hero h1{color:#fff; text-wrap:balance}
.hero h1 em{color:var(--turuncu); font-style:normal}
.hero-alt{
  margin-top:22px; font-size:clamp(1.02rem,1.7vw,1.18rem);
  color:rgba(255,255,255,.82); max-width:600px;
}
.hero-btnlar{display:flex; flex-wrap:wrap; gap:13px; margin-top:34px}

/* ---------- Bölüm ortak ---------- */
.bolum{padding-block:clamp(64px,8vw,104px)}
.bolum-gri{background:var(--zemin-2)}
.bolum-bas{max-width:720px; margin-bottom:52px}
.etiket{
  display:inline-block; font-size:.79rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--turuncu); margin-bottom:14px;
}
.bolum-bas h2{text-wrap:balance}

/* ---------- Hizmet kartları ---------- */
.kart-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(288px,1fr)); gap:20px}
.kart{
  background:#fff; border:1px solid var(--cizgi); border-radius:var(--radius);
  padding:32px 28px; transition:var(--gecis); position:relative; overflow:hidden;
}
.kart::before{
  content:''; position:absolute; left:0; top:0; width:100%; height:3px;
  background:var(--turuncu); transform:scaleX(0); transform-origin:left; transition:transform var(--gecis);
}
.kart:hover{border-color:transparent; box-shadow:var(--golge-hover); transform:translateY(-4px)}
.kart:hover::before{transform:scaleX(1)}
.kart-ikon{
  width:56px; height:56px; border-radius:var(--radius-s);
  background:var(--turuncu-acik); color:var(--turuncu);
  display:grid; place-items:center; margin-bottom:20px; transition:var(--gecis);
}
.kart-ikon svg{width:28px; height:28px}
.kart:hover .kart-ikon{background:var(--turuncu); color:#fff}
.kart h3{margin-bottom:10px}
.kart p{color:var(--metin-2); font-size:.96rem}

/* ---------- Grup şirketleri ---------- */
.grup-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px}
.grup-kart{
  background:#fff; border:1px solid var(--cizgi); border-radius:var(--radius);
  padding:28px 22px; text-align:center; transition:var(--gecis);
}
a.grup-kart:hover{box-shadow:var(--golge-hover); transform:translateY(-4px); border-color:transparent}
.grup-logo{height:86px; display:grid; place-items:center; margin-bottom:18px; padding:6px 0}
.grup-logo img{max-height:100%; width:auto; max-width:150px; object-fit:contain}
/* kare oranlı logolar (DRL, DRK) geniş olanlarla aynı optik ağırlıkta dursun */
.grup-logo img[src*="drl"],
.grup-logo img[src*="drk"]{max-height:82px; max-width:110px}
.grup-ad{font-weight:700; font-size:1rem}
.grup-metin{font-size:.86rem; color:var(--metin-3); margin-top:4px}

/* ---------- İletişim ---------- */
.iletisim-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:26px; align-items:start}
.iletisim-bilgi{display:grid; gap:12px}
.bilgi-kart{
  display:flex; gap:16px; align-items:flex-start;
  background:#fff; border:1px solid var(--cizgi); border-radius:var(--radius);
  padding:20px; transition:var(--gecis);
}
a.bilgi-kart:hover{border-color:var(--turuncu); box-shadow:var(--golge); transform:translateX(3px)}
.bilgi-ikon{
  width:44px; height:44px; flex:none; border-radius:var(--radius-s);
  background:var(--turuncu-acik); color:var(--turuncu); display:grid; place-items:center;
}
.bilgi-ikon svg{width:21px; height:21px}
.bilgi-kart span{display:block; font-size:.79rem; text-transform:uppercase; letter-spacing:.08em; color:var(--metin-3); font-weight:600}
.bilgi-kart strong{display:block; margin-top:3px; font-size:.99rem; font-weight:600; line-height:1.5}

.form-kutu{background:#fff; border:1px solid var(--cizgi); border-radius:var(--radius); padding:clamp(24px,3.4vw,38px)}
.alan{margin-bottom:17px}
.alan-ikili{display:grid; grid-template-columns:1fr 1fr; gap:15px}
.alan label{display:block; font-size:.86rem; font-weight:600; margin-bottom:7px}
.alan label span{color:var(--turuncu)}
.alan label small{font-weight:400; color:var(--metin-3)}
.alan input,.alan textarea{
  width:100%; font:inherit; font-size:.97rem; color:var(--metin);
  padding:13px 15px; border:1.5px solid var(--cizgi); border-radius:var(--radius-s);
  background:var(--zemin-2); transition:var(--gecis); resize:vertical;
}
.alan input:focus,.alan textarea:focus{
  outline:none; border-color:var(--turuncu); background:#fff;
  box-shadow:0 0 0 4px rgba(245,130,31,.13);
}
.alan input::placeholder,.alan textarea::placeholder{color:var(--metin-3)}
.tuzak{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.uyari{
  display:flex; gap:11px; align-items:flex-start;
  padding:15px 18px; border-radius:var(--radius-s); margin-bottom:22px; font-size:.94rem;
}
.uyari svg{width:20px; height:20px; flex:none; margin-top:1px}
.uyari-ok{background:#E9F7EE; color:#1B6B36; border:1px solid #BFE5CD}
.uyari-hata{background:#FDECEC; color:#9B2020; border:1px solid #F5C5C5}

/* ---------- Harita ---------- */
.harita{line-height:0; border-top:1px solid var(--cizgi)}
.harita iframe{width:100%; height:clamp(320px,42vw,460px); border:0; filter:grayscale(.28) contrast(1.04)}

/* ---------- Footer ---------- */
.footer{background:var(--antrasit); color:rgba(255,255,255,.62); padding-top:52px; font-size:.93rem}
.footer-ic{
  display:flex; flex-wrap:wrap; gap:28px 40px;
  align-items:flex-end; justify-content:space-between; padding-bottom:36px;
}
.footer-marka img{width:150px; margin-bottom:14px}
.footer-marka p{font-size:.9rem}
.footer-baglanti{display:flex; flex-wrap:wrap; gap:10px 26px}
.footer-baglanti a{display:inline-flex; align-items:center; gap:8px; transition:var(--gecis)}
.footer-baglanti a:hover{color:var(--turuncu)}
.footer-baglanti svg{width:17px; height:17px; flex:none; color:var(--turuncu)}
.footer-alt{
  padding-block:20px; border-top:1px solid rgba(255,255,255,.1);
  font-size:.83rem; color:rgba(255,255,255,.45);
}

/* ---------- Mobil sabit CTA + WhatsApp ---------- */
.mobil-cta{display:none}
.wa-btn{
  position:fixed; right:18px; bottom:18px; z-index:90;
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:#25D366; color:#fff; box-shadow:0 8px 26px rgba(37,211,102,.42); transition:var(--gecis);
}
.wa-btn svg{width:30px; height:30px}
.wa-btn:hover{transform:scale(1.07)}

/* ---------- Duyarlı ---------- */

@media (max-width:1000px){
  .iletisim-grid{grid-template-columns:1fr}
}
@media (max-width:820px){
  .menu-btn{display:flex}
  .nav{
    position:fixed; inset:0 0 auto; top:112px;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--cizgi);
    padding:10px 22px 22px; box-shadow:0 20px 40px rgba(35,31,32,.14);
    transform:translateY(-14px); opacity:0; visibility:hidden; transition:var(--gecis);
  }
  .nav.acik{transform:none; opacity:1; visibility:visible}
  .nav > a:not(.btn){padding:15px 0; border-bottom:1px solid var(--cizgi); font-size:1rem}
  .nav > a:not(.btn)::after{display:none}
  .nav-b2b,.nav-cta{margin:14px 0 0; width:100%}
  .nav-cta{margin-top:10px}
  .hero{min-height:auto}
  .hero-perde{background:linear-gradient(180deg,rgba(20,17,18,.9) 0%,rgba(20,17,18,.82) 100%)}
  .mobil-cta{
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
    position:fixed; left:0; right:0; bottom:0; z-index:95;
    padding:11px 14px calc(11px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96); backdrop-filter:blur(10px);
    border-top:1px solid var(--cizgi);
  }
  body{padding-bottom:78px}
  .wa-btn{bottom:88px; width:50px; height:50px}
  .wa-btn svg{width:27px; height:27px}
}
@media (max-width:560px){
  .alan-ikili{grid-template-columns:1fr}
  .hero-btnlar .btn{width:100%}
  .footer-alt{justify-content:flex-start}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}