/* ============================================================
   İplikçioğlu İnşaat — statik site stil dosyası
   Fontlar: Syne (başlıklar) + Mulish (metin)
   ============================================================ */

:root{
  /* Marka renkleri (orijinal siteden alındı) */
  --turuncu:        #fb8500;
  --turuncu-koyu:   #d97100;
  --altin:          #c8a24a;
  --lacivert:       #3b3c4d;
  --lacivert-koyu:  #21234c;
  --metin:          #3b3c4d;
  --metin-soluk:    #6b6d80;
  --krem:           #fdfbf7;
  --krem-koyu:      #f4efe6;
  --beyaz:          #ffffff;
  --cizgi:          rgba(59,60,77,.12);

  --kap: 1200px;              /* içerik genişliği */
  --r: 4px;                   /* köşe yuvarlaklığı */
  --gecis: .35s cubic-bezier(.22,.61,.36,1);
  --golge: 0 18px 50px -18px rgba(33,35,76,.28);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  font-family:"Mulish",Helvetica,Arial,sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.75;
  color:var(--metin);
  background:var(--beyaz);
  overflow-x:hidden;
}

img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit}

h1,h2,h3,h4,h5{
  font-family:"Syne","Mulish",Helvetica,Arial,sans-serif;
  color:var(--lacivert);
  margin:0;
  line-height:1.15;
  letter-spacing:-.02em;
  font-weight:700;
}
h1{font-size:clamp(2.6rem,6.5vw,4.6rem)}
h2{font-size:clamp(1.9rem,3.6vw,3rem)}
h3{font-size:clamp(1.4rem,2.2vw,1.9rem)}
h4{font-size:1.4rem; font-weight:600}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.kap{width:100%; max-width:var(--kap); margin-inline:auto; padding-inline:24px}
.bolum{padding:clamp(72px,9vw,120px) 0}
.bolum--dar{padding:clamp(56px,6vw,80px) 0}
.merkez{text-align:center}
.gorsel-gizle{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- Ortak başlık bloğu --- */
.etiket{
  display:inline-block;
  font-family:"Syne",sans-serif;
  font-size:.75rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--turuncu);
  margin-bottom:18px;
}
.etiket::before{
  content:""; display:inline-block;
  width:28px; height:1px; background:var(--turuncu);
  vertical-align:middle; margin-right:12px;
}
.alt-baslik{
  font-size:1.2rem; color:var(--metin-soluk);
  max-width:62ch; margin-top:18px;
}
.merkez .alt-baslik{margin-inline:auto}

/* --- Butonlar --- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px;
  font-family:"Syne",sans-serif;
  font-size:.85rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  border-radius:var(--r);
  border:1px solid transparent;
  cursor:pointer;
  transition:var(--gecis);
  white-space:nowrap;
}
.btn--dolu{background:var(--turuncu); color:#fff}
.btn--dolu:hover{background:var(--turuncu-koyu); transform:translateY(-2px); box-shadow:0 12px 28px -10px rgba(251,133,0,.65)}
.btn--cizgi{border-color:rgba(255,255,255,.55); color:#fff}
.btn--cizgi:hover{background:#fff; color:var(--lacivert); transform:translateY(-2px)}
.btn--koyu{border-color:var(--lacivert); color:var(--lacivert)}
.btn--koyu:hover{background:var(--lacivert); color:#fff; transform:translateY(-2px)}
.btn--metin{
  padding:0; color:var(--turuncu); background:none; border:0;
  border-bottom:1px solid rgba(251,133,0,.35); border-radius:0;
  padding-bottom:4px;
}
.btn--metin:hover{border-bottom-color:var(--turuncu); gap:14px}
.btn .ok{transition:transform var(--gecis)}
.btn:hover .ok{transform:translateX(4px)}

/* ============================================================
   ÜST MENÜ
   ============================================================ */
.ust{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background var(--gecis), box-shadow var(--gecis), padding var(--gecis);
  padding:18px 0;
}
.ust__ic{display:flex; align-items:center; justify-content:space-between; gap:24px}
.ust__logo img{width:200px; transition:width var(--gecis)}
.ust--sabit{
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--cizgi), 0 10px 30px -22px rgba(33,35,76,.5);
  padding:10px 0;
}
.ust--sabit .ust__logo img{width:160px}

.menu{display:flex; align-items:center; gap:34px; list-style:none; margin:0; padding:0}
.menu a{
  position:relative;
  font-size:.95rem; font-weight:600; color:#fff;
  padding:6px 0;
  transition:color var(--gecis);
}
.menu a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:0; height:2px; background:var(--turuncu);
  transition:width var(--gecis);
}
.menu a:hover::after, .menu a[aria-current="page"]::after{width:100%}
.ust--sabit .menu a, .ust--ic .menu a{color:var(--lacivert)}
.menu a[aria-current="page"]{color:var(--turuncu)}

/* Sayfa içi (hero'suz) sayfalarda menü koyu */
.ust--ic{background:rgba(255,255,255,.96); box-shadow:0 1px 0 var(--cizgi)}

.menu-btn{
  display:none; width:44px; height:44px;
  background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; gap:6px; align-items:center;
}
.menu-btn span{display:block; width:24px; height:2px; background:#fff; transition:var(--gecis)}
.ust--sabit .menu-btn span, .ust--ic .menu-btn span{background:var(--lacivert)}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media (max-width:900px){
  .menu-btn{display:flex}
  .menu{
    position:fixed; inset:0 0 0 auto; width:min(320px,84vw);
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:26px; padding:80px 34px;
    background:var(--lacivert);
    transform:translateX(100%);
    transition:transform var(--gecis);
    z-index:99;
  }
  .menu.acik{transform:translateX(0)}
  .menu a, .ust--sabit .menu a, .ust--ic .menu a{color:#fff; font-size:1.15rem; font-family:"Syne",sans-serif}
  .ust__logo img, .ust--sabit .ust__logo img{width:150px}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  color:#fff;
  overflow:hidden;
}
.hero__zemin{
  position:absolute; inset:0;
  background:url("../img/hero.jpg") center 40%/cover no-repeat;
  transform:scale(1.06);
  animation:yavas-yakinlas 18s ease-out forwards;
}
@keyframes yavas-yakinlas{to{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){ .hero__zemin{animation:none; transform:none} }
.hero__perde{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(33,35,76,.62) 0%, rgba(33,35,76,.28) 38%, rgba(33,35,76,.72) 100%);
}
.hero__ic{position:relative; z-index:2; padding:120px 24px 100px; max-width:900px}
.hero h1{
  color:#fff;
  text-shadow:0 6px 40px rgba(0,0,0,.35);
  margin-bottom:18px;
}
.hero__yazi{
  font-size:clamp(1.05rem,1.9vw,1.3rem);
  color:rgba(255,255,255,.9);
  margin-bottom:38px;
}
.hero__btnlar{display:flex; gap:16px; justify-content:center; flex-wrap:wrap}
.hero__asagi{
  position:absolute; left:50%; bottom:34px; z-index:2;
  transform:translateX(-50%);
  width:26px; height:44px;
  border:2px solid rgba(255,255,255,.5); border-radius:14px;
}
.hero__asagi::after{
  content:""; position:absolute; left:50%; top:9px;
  width:3px; height:8px; border-radius:2px; background:#fff;
  transform:translateX(-50%);
  animation:kaydir 1.8s infinite;
}
@keyframes kaydir{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,16px)}}

/* Alt sayfa başlığı */
.sayfa-basi{
  position:relative;
  padding:190px 0 90px;
  color:#fff;
  background:var(--lacivert);
  overflow:hidden;
}
.sayfa-basi__zemin{position:absolute; inset:0; background-size:cover; background-position:center; opacity:.35}
.sayfa-basi__ic{position:relative; z-index:2}
.sayfa-basi h1{color:#fff; font-size:clamp(2.2rem,5vw,3.6rem)}
.sayfa-basi p{color:rgba(255,255,255,.82); max-width:64ch; margin-top:16px}
.iz{
  display:flex; gap:10px; align-items:center;
  font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.62); margin-bottom:18px;
  font-family:"Syne",sans-serif; font-weight:600;
}
.iz a:hover{color:var(--turuncu)}

/* ============================================================
   İKİ SÜTUNLU BÖLÜMLER
   ============================================================ */
.ikili{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,84px);
  align-items:center;
}
.ikili--ters .ikili__gorsel{order:2}
@media (max-width:860px){
  .ikili{grid-template-columns:1fr; gap:44px}
  .ikili--ters .ikili__gorsel{order:0}
}

.cerceve{position:relative}
.cerceve img{
  border-radius:var(--r); box-shadow:var(--golge); position:relative; z-index:2;
  width:100%; aspect-ratio:4/5; object-fit:cover;
}
.cerceve::before{
  content:""; position:absolute; z-index:1;
  inset:-22px -22px 34px 34px;
  border:1px solid var(--altin);
  border-radius:var(--r);
}
@media (max-width:860px){ .cerceve::before{inset:-14px -14px 24px 24px} }

.imza{
  font-family:"Syne",sans-serif; font-weight:700;
  font-size:.8rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--altin);
}

/* ============================================================
   ÜÇLÜ KART IZGARASI
   ============================================================ */
.kartlar{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  margin-top:56px;
}
@media (max-width:900px){ .kartlar{grid-template-columns:1fr; max-width:460px; margin-inline:auto} }

.kart{
  background:var(--beyaz);
  border:1px solid var(--cizgi);
  border-radius:var(--r);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}
.kart:hover{transform:translateY(-6px); box-shadow:var(--golge); border-color:transparent}
.kart__gorsel{position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--krem-koyu)}
.kart__gorsel img{width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.kart:hover .kart__gorsel img{transform:scale(1.06)}
.kart__ic{padding:28px 26px 30px; display:flex; flex-direction:column; gap:12px; flex:1}
.kart__ic p{color:var(--metin-soluk); font-weight:300; flex:1}

/* ============================================================
   AKORDİYON
   ============================================================ */
.akordiyon{max-width:900px; margin:56px auto 0; border-top:1px solid var(--cizgi)}
.ak{border-bottom:1px solid var(--cizgi)}
.ak__bas{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:26px 4px; background:none; border:0; cursor:pointer; text-align:left;
  font-family:"Syne",sans-serif; font-weight:600; font-size:clamp(1.05rem,1.7vw,1.3rem);
  color:var(--lacivert);
  transition:color var(--gecis);
}
.ak__bas:hover{color:var(--turuncu)}
.ak__isaret{
  flex:0 0 34px; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--cizgi);
  display:grid; place-items:center;
  transition:var(--gecis);
}
.ak__bas[aria-expanded="true"] .ak__isaret{background:var(--turuncu); border-color:var(--turuncu); color:#fff; transform:rotate(45deg)}
.ak__govde{display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--gecis)}
.ak__bas[aria-expanded="true"] + .ak__govde{grid-template-rows:1fr}
.ak__govde > div{overflow:hidden}
.ak__govde p{padding:0 4px 28px; color:var(--metin-soluk); font-weight:300; max-width:74ch}

/* ============================================================
   İSTATİSTİK ŞERİDİ
   ============================================================ */
.seritler{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--cizgi);
  border:1px solid var(--cizgi); border-radius:var(--r); overflow:hidden;
}
.serit{background:var(--beyaz); padding:34px 24px; text-align:center}
.serit b{
  display:block; font-family:"Syne",sans-serif; font-size:2.2rem; font-weight:700;
  color:var(--turuncu); line-height:1;
}
.serit span{display:block; margin-top:10px; font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; color:var(--metin-soluk)}
@media (max-width:760px){ .seritler{grid-template-columns:repeat(2,1fr)} }

/* ============================================================
   GALERİ
   ============================================================ */
.galeri{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.galeri a{
  position:relative; overflow:hidden; border-radius:var(--r);
  aspect-ratio:4/3; background:var(--krem-koyu); display:block;
}
.galeri a:nth-child(1),.galeri a:nth-child(6){grid-column:span 2; aspect-ratio:16/9}
.galeri img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.galeri a:hover img{transform:scale(1.05)}
.galeri a::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(33,35,76,.55));
  opacity:0; transition:opacity var(--gecis);
}
.galeri a:hover::after{opacity:1}
@media (max-width:860px){
  .galeri{grid-template-columns:repeat(2,1fr)}
  .galeri a:nth-child(1),.galeri a:nth-child(6){grid-column:span 2}
}
@media (max-width:520px){
  .galeri{grid-template-columns:1fr}
  .galeri a, .galeri a:nth-child(1), .galeri a:nth-child(6){grid-column:span 1; aspect-ratio:4/3}
}

/* ============================================================
   İLETİŞİM
   ============================================================ */
.iletisim{position:relative; color:#fff; overflow:hidden; background:var(--lacivert)}
.iletisim__zemin{
  position:absolute; inset:0;
  background:url("../img/aksam.jpg") center/cover no-repeat;
  opacity:.22;
}
.iletisim__ic{position:relative; z-index:2}

/* Üstünde zaten görselli bir sayfa başlığı olan sayfalarda (ör. İletişim)
   bölüm tek renk kalsın; iki görsel üst üste tekrar etmesin. */
.iletisim--duz .iletisim__zemin{display:none}
.iletisim--duz{
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(255,255,255,.055), transparent 60%),
    linear-gradient(180deg, #3b3c4d 0%, #2f303e 100%);
}
.iletisim h2{color:#fff}
.iletisim .alt-baslik{color:rgba(255,255,255,.78)}
.iletisim__grid{display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(40px,6vw,80px); align-items:start}
@media (max-width:860px){ .iletisim__grid{grid-template-columns:1fr} }

.bilgi{list-style:none; margin:38px 0 0; padding:0; display:flex; flex-direction:column; gap:22px}
.bilgi li{display:flex; gap:16px; align-items:flex-start}
.bilgi svg{flex:0 0 22px; margin-top:5px; color:var(--turuncu)}
.bilgi a, .bilgi span{color:rgba(255,255,255,.9); transition:color var(--gecis); line-height:1.6}
.bilgi a:hover{color:var(--turuncu)}
.bilgi small{display:block; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:2px}

.form{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r);
  padding:clamp(24px,3.4vw,38px);
  backdrop-filter:blur(6px);
  display:grid; gap:18px;
}
.form label{display:block; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.62); margin-bottom:8px; font-weight:600}
.form input, .form textarea{
  width:100%; padding:14px 16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r);
  color:#fff; font:inherit;
  transition:border-color var(--gecis), background var(--gecis);
}
.form input::placeholder, .form textarea::placeholder{color:rgba(255,255,255,.38)}
.form input:focus, .form textarea:focus{outline:0; border-color:var(--turuncu); background:rgba(255,255,255,.1)}
.form textarea{resize:vertical; min-height:120px}
.form .ikili-alan{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width:520px){ .form .ikili-alan{grid-template-columns:1fr} }
.form .btn{justify-content:center; width:100%}
.form__not{font-size:.82rem; color:rgba(255,255,255,.55); margin:0}

/* Harita */
.harita{border:0; width:100%; height:420px; display:block; filter:grayscale(.2) contrast(1.05)}

/* ============================================================
   ALT BİLGİ
   ============================================================ */
.alt{background:#2b2c3a; color:rgba(255,255,255,.72); padding:70px 0 0}
.alt__grid{display:grid; grid-template-columns:1.4fr 1fr 1.2fr; gap:48px; padding-bottom:52px}
@media (max-width:860px){ .alt__grid{grid-template-columns:1fr; gap:36px} }
.alt img{width:210px; margin-bottom:22px}
.alt h5{color:#fff; font-family:"Syne",sans-serif; font-size:.82rem; letter-spacing:.2em; text-transform:uppercase; margin:0 0 20px}
.alt ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.alt a{transition:color var(--gecis)}
.alt a:hover{color:var(--turuncu)}
.alt p{font-weight:300; line-height:1.8}
.alt__son{
  border-top:1px solid rgba(255,255,255,.1);
  padding:24px 0;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.85rem;
}

/* ============================================================
   YÜZEN İLETİŞİM DÜĞMELERİ
   ============================================================ */
.yuzen{position:fixed; right:20px; bottom:92px; z-index:90; display:flex; flex-direction:column; gap:12px; align-items:flex-end; pointer-events:none}
.yuzen > *{pointer-events:auto}
.yuzen a, .yuzen button{
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  color:#fff; border:0; cursor:pointer;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.45);
  transition:transform var(--gecis), background var(--gecis);
}
.yuzen a:hover, .yuzen button:hover{transform:translateY(-3px) scale(1.05)}
.yuzen__wa{background:#25d366}
.yuzen__tel{background:var(--turuncu)}
.yuzen__yukari{background:var(--lacivert); opacity:0; pointer-events:none}
.yuzen__yukari.gorunur{opacity:1; pointer-events:auto}

/* ============================================================
   KAYDIRMA ANİMASYONU
   ============================================================ */
.acil{opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1)}
.acil.gorundu{opacity:1; transform:none}
.acil--gec{transition-delay:.12s}
.acil--gec2{transition-delay:.24s}
@media (prefers-reduced-motion: reduce){
  .acil{opacity:1 !important; transform:none !important; transition:none !important}
}

/* ============================================================
   MOBİL TAŞMA KORUMASI
   Grid/flex çocukları varsayılan olarak min-width:auto alır; içindeki
   sarmayan uzun bir metin (ör. buton etiketi) sütunu şişirip sayfayı
   yatayda taşırır. Aşağıdaki kurallar bunu engeller.
   ============================================================ */
.ikili > *, .kartlar > *, .iletisim__grid > *, .alt__grid > *, .seritler > *{min-width:0}
.kart__ic, .kart__ic > *{min-width:0}

@media (max-width:560px){
  /* Dar ekranda uzun buton etiketleri alt satıra insin */
  .btn{white-space:normal; text-align:center; justify-content:center}
  .btn--metin{justify-content:flex-start; text-align:left}
  h1, h2, h3, h4{overflow-wrap:break-word}
}