:root{
  --navy:#0b1f3a;
  --navy-dark:#08172c;
  --gold:#b28b3a;
  --ink:#0e1726;
  --muted:#6b7280;
  --line:#e5e7eb;
  --white:#ffffff;

  --container:1120px;

  --topbar-h:44px;
  --header-h:82px;
  --chrome-h:calc(var(--topbar-h) + var(--header-h));

  --r:16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#fff;
  color:var(--ink);
}
a{text-decoration:none;color:inherit}
.container{
  width:min(var(--container), calc(100% - 40px));
  margin:0 auto;
}

.topbar{
  background:var(--navy-dark);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar__inner{
  height:var(--topbar-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.topbar__name{
  font-size:14px;
  font-weight:600;
  letter-spacing:.01em;
  color:rgba(255,255,255,.92);
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
.topbar__sep{opacity:.6}
.topbar__name strong{font-weight:900;color:#fff}
.topbar__cv{
  font-weight:800;
  border-bottom:1px solid rgba(178,139,58,.7);
  padding-bottom:1px;
}
.topbar__name:hover .topbar__cv{border-bottom-color: rgba(178,139,58,.95);}

.topbar__wa{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-weight:900;
  letter-spacing:.01em;
  line-height:1;
  white-space:nowrap;
  transition: .16s ease;
}
.topbar__wa:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(178,139,58,.35);
  transform: translateY(-1px);
}
.wa-ic{
  width:30px;
  height:30px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background: rgba(178,139,58,.20);
  border:1px solid rgba(178,139,58,.45);
  color:#fff;
  flex: 0 0 auto;
}
.topbar__wa svg{width:18px;height:18px;display:block}
.topbar__waText{font-size:13.5px;color: rgba(255,255,255,.92);}

.header{
  position:sticky;
  top:0;
  z-index:60;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.header__inner{
  height:var(--header-h);
  display:flex;
  align-items:center;
  gap:20px;
  position:relative;
}
.brand{display:flex;align-items:center;gap:12px;min-width:0;}
.brand__mark{
  width:48px;height:48px;
  display:grid;place-items:center;
  background:var(--navy);
  color:#fff;
  font-weight:900;
  border-radius:10px;
  flex:0 0 auto;
}
.brand__text{
  font-size:17px;
  font-weight:800;
  line-height:1.15;
  min-width:0;
}
.brand__sub{
  display:block;
  font-size:13px;
  color:var(--muted);
  margin-top:4px;
}

.nav{
  margin-left:auto;
  display:flex;
  gap:16px;
  align-items:center;
}
.nav a{
  font-size:15.5px;
  color:var(--muted);
  padding:8px 4px;
}
.nav a:hover{color:var(--ink)}
.nav a.active{
  color:var(--navy);
  font-weight:800;
  border-bottom:2px solid var(--gold);
}

.header__actions{display:flex;gap:10px;align-items:center}

.btn{
  display:inline-flex;
  padding:12px 22px;
  font-weight:700;
  border-radius:8px;
  background:var(--navy);
  color:#fff;
  transition:.15s ease;
}
.btn--soft{
  background: rgba(11,31,58,.07);
  color: var(--navy);
  border: 1px solid rgba(11,31,58,.12);
}
.btn--ghost{
  background: transparent;
  color: var(--navy);
  border: 1px solid rgba(11,31,58,.18);
}
.btn--ghostWhite{
  border:1px solid rgba(255,255,255,.85);
  color:#fff;
  background:transparent;
}
.btn--ghostWhite:hover{background:#fff;color:var(--navy)}

.nav-toggle{
  display:none;
  width:46px;
  height:46px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  margin-left:auto;
  cursor:pointer;
  padding:0;
}
.nav-toggle span{
  display:block;
  width:18px;
  height:2px;
  background:var(--navy);
  margin:4px auto;
  border-radius:2px;
  transition:.18s ease;
}
body.nav-open .nav-toggle span:nth-child(1){transform: translateY(6px) rotate(45deg);}
body.nav-open .nav-toggle span:nth-child(2){opacity:0;}
body.nav-open .nav-toggle span:nth-child(3){transform: translateY(-6px) rotate(-45deg);}

/* ================= HERO (INDEX) ================= */
.hero{
  min-height:calc(100vh - var(--chrome-h));
  background:
    linear-gradient(rgba(11,31,58,.65), rgba(11,31,58,.65)),
    url("/static/img/yildirim_hero.jpg") center / cover no-repeat;
  display:flex;
  align-items:center;
}
.hero__content{max-width:720px;color:#fff}
.hero__title{
  font-family:"Libre Baskerville", Georgia, serif;
  font-size:52px;
  margin:0 0 12px;
}
.hero__subtitle{
  font-size:18px;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin:0 0 18px;
  color:rgba(255,255,255,.86);
}
.hero__desc{
  font-size:17px;
  line-height:1.9;
  margin:0 0 26px;
  color:rgba(255,255,255,.92);
}

/* ================= SECTIONS ================= */
.section{padding:70px 0}
.section-head{
  text-align:center;
  max-width:760px;
  margin:0 auto 44px;
}
.h2{
  font-family:"Libre Baskerville", Georgia, serif;
  font-size:32px;
  margin:0 0 12px;
  color:var(--navy);
}
.muted{color:var(--muted);line-height:1.8}

/* ================= SERVICES (INDEX) ================= */
.servicesGrid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}
.serviceCard{
  border:1px solid var(--line);
  border-radius: var(--r);
  background:#fff;
  padding:18px 18px 16px;
  position:relative;
  transition:.18s ease;
}
.serviceCard:before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:3px;
  background: linear-gradient(90deg, var(--gold), rgba(178,139,58,.18));
  border-top-left-radius: var(--r);
  border-top-right-radius: var(--r);
}
.serviceCard:hover{
  transform: translateY(-2px);
  border-color: rgba(178,139,58,.35);
}
.serviceCard__top{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-bottom:10px;
}
.serviceCard__icon{
  width:44px;height:44px;
  border-radius:14px;
  display:grid;place-items:center;
  background: rgba(11,31,58,.05);
  border: 1px solid rgba(11,31,58,.10);
  flex: 0 0 auto;
}
.serviceCard__icon{
  width:44px;height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background: rgba(11,31,58,.06);
  border: 1px solid rgba(11,31,58,.10);
  flex: 0 0 auto;
  position:relative;
  overflow:hidden;
}

.balanceMark{
  width:22px;
  height:22px;
  display:block;
  background: var(--navy);
  -webkit-mask: url("/static/img/balance.png") center / contain no-repeat;
  mask: url("/static/img/balance.png") center / contain no-repeat;
  opacity:.95;
}

.serviceCard:hover .balanceMark{
  background: var(--gold);
}

.serviceCard__kicker{
  font-size:12px;
  font-weight:800;
  color:var(--muted);
  letter-spacing:.02em;
  margin-bottom:3px;
}
.serviceCard__title{
  font-weight:900;
  color:var(--navy);
  font-size:16.5px;
  line-height:1.25;
}
.serviceCard__desc{
  color:var(--muted);
  line-height:1.85;
  margin: 10px 0 14px;
  min-height: 64px;
}
.serviceCard__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.serviceCard__tag{
  font-size:12px;
  font-weight:900;
  color: rgba(11,31,58,.80);
  background: rgba(178,139,58,.12);
  border: 1px solid rgba(178,139,58,.22);
  padding: 7px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.serviceCard__link{font-weight:900;color: var(--navy)}
.serviceCard__link:hover{color:var(--gold)}

/* ================= CONTACT STRIP (INDEX) ================= */
.contactStrip{
  margin-top: 22px;
  border:1px solid var(--line);
  border-radius: var(--r);
  padding:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:
    radial-gradient(700px 220px at 20% 10%, rgba(178,139,58,.10), transparent 60%),
    radial-gradient(700px 220px at 80% 10%, rgba(11,31,58,.06), transparent 60%);
  transition: .18s ease;
}
.contactStrip:hover{
  transform: translateY(-2px);
  border-color: rgba(178,139,58,.35);
}
.contactStrip__title{
  font-weight:900;
  color: var(--navy);
  font-size:18px;
  margin-bottom:6px;
}
.contactStrip__desc{
  color: var(--muted);
  line-height:1.8;
  max-width: 760px;
}
.contactStrip__btn{
  display:inline-flex;
  padding:12px 18px;
  border-radius:12px;
  background: var(--navy);
  color:#fff;
  font-weight:900;
  white-space: nowrap;
}

/* ================= FOOTER ================= */
.footer{
  background: linear-gradient(180deg, var(--navy), var(--navy-dark));
  color: rgba(255,255,255,.84);
  padding: 44px 0 28px;
  border-top: 1px solid rgba(255,255,255,.10);
}

.footer__inner{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 22px;
  align-items:start;
}

.footer__brand{
  font-weight: 900;
  color:#fff;
  margin-bottom: 6px;
  letter-spacing: .01em;
}
.footer__sub{
  color: rgba(255,255,255,.70);
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 14px;
}

.footer__address{
  margin:0;
  font-style: normal;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255,255,255,.72);
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

.footer__right{
  display:flex;
  flex-direction:column;
  gap: 14px;
  align-items:flex-end;
}

.footer__links{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  justify-content:flex-end;
}
.footer__links a{
  color: rgba(255,255,255,.78);
  font-weight: 800;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  transition: .16s ease;
}
.footer__links a:hover{
  color:#fff;
  border-color: rgba(178,139,58,.35);
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}

.footer__bottom{
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}

.footer__copy{
  font-size: 12.5px;
  color: rgba(255,255,255,.65);
}

.footer__credit{
  font-size: 12.5px;
  color: rgba(255,255,255,.68);
  font-weight: 800;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  transition: .16s ease;
}
.footer__credit strong{
  color:#fff;
  font-weight: 900;
}
.footer__credit:hover{
  color:#fff;
  border-color: rgba(178,139,58,.35);
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
  text-decoration:none;
}

@media(max-width:900px){
  .footer__inner{
    grid-template-columns: 1fr;
  }
  .footer__right{
    align-items:flex-start;
  }
  .footer__links{
    justify-content:flex-start;
  }
  .footer__bottom{
    justify-content:flex-start;
  }
}

/* ================= COOKIE BANNER ================= */
.cookie{
  position:fixed;
  left:16px;
  right:16px;
  bottom:16px;
  display:none;
  z-index:999;
}
.cookie--show{display:block}
.cookie__inner{
  max-width:1120px;
  margin:0 auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.12);
}
.cookie__title{
  font-weight:900;
  color:var(--navy);
  margin-bottom:4px;
}
.cookie__desc{
  font-size:13px;
  color:var(--muted);
  line-height:1.6;
}
.cookie__actions{
  display:flex;
  gap:10px;
}
.cookie__actions .btn{
  padding:8px 14px;
  font-size:13px;
}

@media(max-width:900px){

  .topbar__inner{
    height:auto;
    padding:10px 0;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .topbar__wa{width:100%; justify-content:flex-start}

  .header__inner{gap:12px}
  .brand__text{font-size:15px}
  .brand__sub{display:none}

  .header__actions{display:none}

  .nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:1002;
  }

  .nav{display:none;}

  body.nav-open .nav{
    display:flex;
    flex-direction:column;
    position:fixed;
    inset:0;
    z-index:1001;
    padding: calc(var(--topbar-h) + 18px) 22px 86px 22px;
    gap:0;
    background:
      radial-gradient(900px 420px at 20% 10%, rgba(178,139,58,.22), transparent 62%),
      radial-gradient(900px 420px at 80% 0%, rgba(255,255,255,.10), transparent 64%),
      linear-gradient(180deg, rgba(11,31,58,.985), rgba(8,23,44,.995));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transform: translateY(-10px);
    opacity:0;
    pointer-events:none;
    transition: .20s ease;
  }

  body.nav-open .nav{
    transform: translateY(0);
    opacity:1;
    pointer-events:auto;
  }

  body.nav-open .nav::before{
    content:"Menü";
    display:block;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
    font-size:.78rem;
    color:rgba(255,255,255,.66);
    margin-bottom:14px;
  }

  body.nav-open .nav a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 2px;
    color:rgba(255,255,255,.92);
    font-weight:900;
    font-size:18px;
    background:transparent;
    border:none;
    border-bottom:1px solid rgba(255,255,255,.10);
    transition: transform .14s ease, color .14s ease, opacity .14s ease;
  }
  body.nav-open .nav a:hover{
    transform: translateX(2px);
    color:#fff;
    opacity:.95;
  }
  body.nav-open .nav a.active{color:#fff;}

  body.nav-open .nav a::after{
    content:"›";
    font-weight:900;
    font-size:22px;
    line-height:1;
    color: rgba(178,139,58,.95);
    margin-left:12px;
    transform: translateY(-1px);
  }
  body.nav-open .nav a.active::after{color: rgba(255,255,255,.92);}

  body.nav-open .nav::after{
    content:"⚖  Yıldırım Hukuk & Danışmanlık";
    position:fixed;
    right:18px;
    bottom:18px;
    z-index:1001;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:999px;
    background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.84);
    font-weight:900;
    letter-spacing:.01em;
    font-size:12.5px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  body.nav-open{
    overflow:hidden;
    touch-action:none;
  }

  .hero__title{font-size:38px}

  .servicesGrid{grid-template-columns:1fr}
  .contactStrip{flex-direction:column; align-items:flex-start}

  .footer__inner{grid-template-columns:1fr}
  .footer__links{justify-content:flex-start}
  .footer__copy{text-align:left}

  .cookie__inner{flex-direction:column; align-items:flex-start}
  .cookie__actions{width:100%}
  .cookie__actions .btn{width:100%}
}

/* ================= HERO (MOBILE IMAGE) ================= */
@media (max-width: 900px){
  .hero{
    background:
      linear-gradient(rgba(11,31,58,.70), rgba(11,31,58,.70)),
      url("/static/img/yildirim_hero_mobile.jpg") center / cover no-repeat;
  }
}

.brand__logo{
  width:48px;
  height:48px;
  display:block;
  flex:0 0 auto;
  border-radius:10px;   
  object-fit:contain;        
}