/*
Theme Name: SMMM Suat Yüksel
Theme URI: https://www.suatyuksel.com/
Author: İSA
Description: SMMM Suat Yüksel için hızlı, modern ve kurumsal WordPress teması.
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: smmm-suat-yuksel
*/

:root{
  --navy:#10243e;
  --navy2:#17395f;
  --gold:#c7a45b;
  --ink:#182333;
  --muted:#687587;
  --bg:#f6f8fb;
  --white:#fff;
  --line:#e7ebf0;
  --radius:18px;
  --shadow:0 14px 40px rgba(16,36,62,.09)
}

*{
  box-sizing:border-box
}

html{
  scroll-behavior:smooth
}

body{
  margin:0;
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:#fff;
  line-height:1.7
}

a{
  color:inherit;
  text-decoration:none
}

img{
  max-width:100%;
  height:auto
}

.container{
  width:min(1160px,92%);
  margin:auto
}


/* =========================================================
   ÜST BAR
========================================================= */

.topbar{
  background:var(--navy);
  color:#dce6f1;
  font-size:16px
}

.topbar .inner{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:8px 0
}

.topbar a:hover{
  color:#fff
}


/* =========================================================
   HEADER
========================================================= */

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(231,235,240,.9)
}

.header-inner{
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}

.brand{
  display:flex;
  align-items:center;
  gap:12px
}

.brand-mark{
  width:44px;
  height:44px;
  border-radius:12px;
  background:var(--navy);
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:800;
  letter-spacing:-1px
}

.brand strong{
  display:block;
  font-size:17px;
  color:var(--navy)
}

.brand span{
  display:block;
  font-size:11px;
  color:var(--muted);
  letter-spacing:.08em;
  text-transform:uppercase
}

.nav{
  display:flex;
  align-items:center;
  gap:25px;
  font-size:14px;
  font-weight:600
}

.nav a:hover{
  color:var(--gold)
}

.menu-toggle{
  display:none;
  border:0;
  background:none;
  font-size:25px
}


/* =========================================================
   BUTONLAR
========================================================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 19px;
  border-radius:11px;
  font-weight:700;
  border:1px solid transparent;
  transition:.2s
}

.btn-primary{
  background:var(--navy);
  color:#fff
}

.btn-primary:hover{
  background:var(--navy2);
  transform:translateY(-1px)
}

.btn-gold{
  background:var(--gold);
  color:#fff
}

.btn-outline{
  border-color:var(--line);
  background:#fff
}


/* =========================================================
   HERO
========================================================= */

.hero{
  background:linear-gradient(
    135deg,
    #f6f8fb 0%,
    #fff 58%,
    #eef3f8 100%
  );
  padding:92px 0 86px;
  overflow:hidden
}

.hero-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:65px;
  align-items:center
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--gold);
  font-size:13px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase
}

.eyebrow:before{
  content:"";
  width:28px;
  height:2px;
  background:var(--gold)
}

h1{
  font-size:clamp(38px,5vw,65px);
  line-height:1.08;
  letter-spacing:-.04em;
  margin:17px 0 22px;
  color:var(--navy)
}

.hero p{
  font-size:18px;
  color:var(--muted);
  max-width:650px
}

.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:30px
}

.hero-card{
  background:var(--navy);
  border-radius:28px;
  padding:32px;
  color:#fff;
  box-shadow:var(--shadow);
  position:relative
}

.hero-card:after{
  content:"";
  position:absolute;
  width:130px;
  height:130px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  right:-45px;
  top:-45px
}

.hero-card h3{
  margin:0 0 8px;
  font-size:22px
}

.hero-card p{
  color:#c9d7e7;
  font-size:15px
}

.mini-stat{
  display:flex;
  justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.12);
  padding-top:16px;
  margin-top:22px
}

.mini-stat strong{
  font-size:22px;
  color:#fff
}


/* =========================================================
   GENEL BÖLÜMLER
========================================================= */

.section{
  padding:88px 0
}

.section-alt{
  background:var(--bg)
}

.section-head{
  max-width:700px;
  margin-bottom:40px
}

.section-head.center{
  margin-left:auto;
  margin-right:auto;
  text-align:center
}

.section-head h2{
  font-size:38px;
  line-height:1.15;
  letter-spacing:-.03em;
  color:var(--navy);
  margin:10px 0 12px
}

.section-head p{
  color:var(--muted);
  margin:0
}


/* =========================================================
   HİZMET KARTLARI
========================================================= */

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}

.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:0 8px 25px rgba(16,36,62,.04);
  transition:.2s
}

.card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow)
}

.icon{
  width:48px;
  height:48px;
  border-radius:13px;
  background:#eef3f8;
  color:var(--navy);
  display:grid;
  place-items:center;
  font-weight:900;
  margin-bottom:18px
}

.card h3{
  margin:0 0 8px;
  color:var(--navy);
  font-size:19px
}

.card p{
  margin:0;
  color:var(--muted);
  font-size:14px
}


/* =========================================================
   HAKKIMIZDA
========================================================= */

.about-grid{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:70px;
  align-items:center
}

.about-panel{
  background:var(--navy);
  border-radius:28px;
  padding:40px;
  color:#fff
}

.about-panel .big{
  font-size:58px;
  font-weight:800;
  line-height:1;
  color:var(--gold)
}

.about-panel p{
  color:#cbd7e4
}

.checks{
  display:grid;
  gap:12px;
  margin:25px 0
}

.checks div:before{
  content:"✓";
  color:var(--gold);
  font-weight:900;
  margin-right:10px
}


/* =========================================================
   =========================================================
   GİB + SGK DUYURULARI
   =========================================================
========================================================= */

.announcements-section{
  background:#fff;
  position:relative
}

.announcements-section .section-head{
  margin-bottom:42px
}


/* İki kolon */

.announcement-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
  align-items:stretch
}


/* Ana duyuru kutusu */

.announcement-box{
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 10px 35px rgba(16,36,62,.06);
  transition:.25s;
  display:flex;
  flex-direction:column
}

.announcement-box:hover{
  box-shadow:0 18px 45px rgba(16,36,62,.10);
  transform:translateY(-3px)
}


/* Üst başlık */

.announcement-header{
  background:linear-gradient(
    135deg,
    var(--navy) 0%,
    var(--navy2) 100%
  );
  color:#fff;
  padding:25px 27px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px
}

.announcement-label{
  color:var(--gold);
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  margin-bottom:4px
}

.announcement-header h3{
  color:#fff;
  font-size:24px;
  margin:0;
  line-height:1.25
}

.announcement-icon{
  width:44px;
  height:44px;
  min-width:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  display:grid;
  place-items:center;
  color:var(--gold);
  font-size:21px;
  transition:.2s
}

.announcement-box:hover .announcement-icon{
  background:var(--gold);
  color:#fff;
  border-color:var(--gold);
  transform:rotate(8deg)
}


/* Açıklama */

.announcement-description{
  color:var(--muted);
  font-size:13px;
  padding:17px 27px 13px;
  margin:0;
  background:#fbfcfd;
  border-bottom:1px solid var(--line)
}


/* Duyuru listesi */

.announcement-list{
  padding:0 27px;
  flex:1
}


/* Tek duyuru */

.announcement-item{
  display:grid;
  grid-template-columns:75px 1fr 28px;
  align-items:center;
  gap:15px;
  padding:17px 0;
  border-bottom:1px solid var(--line);
  transition:.2s
}

.announcement-item:last-child{
  border-bottom:0
}

.announcement-item:hover{
  padding-left:5px;
  padding-right:5px
}


/* Tarih */

.announcement-date{
  color:var(--gold);
  font-size:11px;
  font-weight:800;
  white-space:nowrap
}


/* Başlık */

.announcement-content{
  min-width:0
}

.announcement-content h4{
  margin:0;
  font-size:14px;
  line-height:1.45;
  font-weight:700;
  color:var(--navy)
}

.announcement-content h4 a{
  transition:.2s
}

.announcement-content h4 a:hover{
  color:var(--gold)
}


/* Kaynak */

.announcement-source{
  display:inline-block;
  margin-top:3px;
  color:var(--muted);
  font-size:10px;
  line-height:1.3
}


/* Sağ ok */

.announcement-arrow{
  width:28px;
  height:28px;
  border-radius:50%;
  border:1px solid var(--line);
  color:var(--navy);
  display:grid;
  place-items:center;
  font-size:15px;
  transition:.2s
}

.announcement-item:hover .announcement-arrow{
  background:var(--gold);
  color:#fff;
  border-color:var(--gold);
  transform:translateX(2px)
}


/* Duyuru bulunamadığında */

.announcement-empty{
  padding:28px 0;
  text-align:center;
  color:var(--muted);
  font-size:13px
}


/* Alt link */

.announcement-footer{
  border-top:1px solid var(--line);
  background:#fbfcfd;
  padding:16px 27px
}

.announcement-footer a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  color:var(--navy);
  font-size:13px;
  font-weight:800;
  transition:.2s
}

.announcement-footer a span{
  color:var(--gold);
  font-size:18px;
  transition:.2s
}

.announcement-footer a:hover{
  color:var(--gold)
}

.announcement-footer a:hover span{
  transform:translateX(4px)
}


/* =========================================================
   CTA
========================================================= */

.cta{
  background:var(--navy);
  color:#fff;
  border-radius:28px;
  padding:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}

.cta h2{
  margin:0 0 8px;
  font-size:32px
}

.cta p{
  margin:0;
  color:#cbd7e4
}


/* =========================================================
   İLETİŞİM
========================================================= */

.contact-grid{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:25px
}

.contact-box{
  background:var(--navy);
  border-radius:22px;
  padding:32px;
  color:#fff
}

.contact-item{
  padding:15px 0;
  border-bottom:1px solid rgba(255,255,255,.12)
}

.contact-item:last-child{
  border-bottom:0
}

.contact-item small{
  display:block;
  color:#aebed0
}

.contact-item a{
  font-weight:700
}

.form-box{
  border:1px solid var(--line);
  border-radius:22px;
  padding:32px
}

.form-box input,
.form-box textarea{
  width:100%;
  border:1px solid var(--line);
  padding:13px 14px;
  border-radius:10px;
  margin:0 0 14px;
  font:inherit
}

.form-box textarea{
  min-height:140px;
  resize:vertical
}


/* =========================================================
   İÇ SAYFALAR / DUYURU DETAY
========================================================= */

.content-wrap{
  padding:70px 0
}

.content{
  max-width:820px;
  margin:auto
}

.content h1{
  font-size:48px
}

.content h2{
  color:var(--navy);
  margin-top:35px
}

.content p,
.content li{
  color:#566477
}

.post-card{
  display:block
}

.post-meta{
  font-size:12px;
  color:var(--muted);
  margin-bottom:10px
}

.pagination{
  display:flex;
  gap:8px;
  margin-top:30px
}

.pagination a,
.pagination span{
  padding:9px 13px;
  border:1px solid var(--line);
  border-radius:8px
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer{
  background:#0b1b2f;
  color:#b9c6d5;
  padding:55px 0 20px
}

.footer-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr .8fr;
  gap:45px
}

.site-footer h3{
  color:#fff;
  margin-top:0
}

.site-footer a:hover{
  color:#fff
}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  margin-top:40px;
  padding-top:18px;
  font-size:12px;
  display:flex;
  justify-content:space-between;
  gap:15px
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:850px){

  .nav{
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:78px;
    background:#fff;
    padding:20px 4%;
    border-bottom:1px solid var(--line);
    flex-direction:column;
    align-items:flex-start
  }

  .nav.open{
    display:flex
  }

  .menu-toggle{
    display:block
  }

  .hero{
    padding:65px 0
  }

  .hero-grid,
  .about-grid,
  .contact-grid{
    grid-template-columns:1fr
  }

  .cards{
    grid-template-columns:1fr 1fr
  }


  /* Duyurular tablet */

  .announcement-grid{
    grid-template-columns:1fr;
    gap:20px
  }


  .footer-grid{
    grid-template-columns:1fr 1fr
  }

  .cta{
    flex-direction:column;
    align-items:flex-start
  }
}


/* =========================================================
   MOBİL
========================================================= */

@media(max-width:560px){

  .topbar .inner{
    flex-direction:column;
    gap:0
  }

  .cards,
  .footer-grid{
    grid-template-columns:1fr
  }

  .hero-card{
    padding:25px
  }

  .section{
    padding:65px 0
  }

  .section-head h2{
    font-size:31px
  }

  .cta{
    padding:32px
  }

  .footer-bottom{
    flex-direction:column
  }


  /* Mobil duyurular */

  .announcement-header{
    padding:21px 20px
  }

  .announcement-header h3{
    font-size:20px
  }

  .announcement-description{
    padding:14px 20px 11px
  }

  .announcement-list{
    padding:0 20px
  }

  .announcement-item{
    grid-template-columns:68px 1fr 25px;
    gap:10px;
    padding:15px 0
  }

  .announcement-date{
    font-size:10px
  }

  .announcement-content h4{
    font-size:13px
  }

  .announcement-footer{
    padding:15px 20px
  }

  .announcement-icon{
    width:38px;
    height:38px;
    min-width:38px
  }
}