/* ==============================
   DK AKADEMİ | style.css
   ============================== */

/* Renk değişkenleri */
:root{
  --bg:#f6f7fb;
  --card:#fff;
  --ink:#1f2328;
  --muted:#616975;
  --border:#e6e8ef;
  --brand:#ff4d4d;
  --brand2:#ff8a00;
  --accent:linear-gradient(135deg,var(--brand),var(--brand2));
}

/* Reset & temel */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font:16px/1.55 Ubuntu,system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  color:var(--ink); background:linear-gradient(180deg,#fff 0%,var(--bg) 100%);
}
img{max-width:100%; display:block}
a{color:var(--ink); text-decoration:none}
a:hover{color:var(--brand)}
.link{color:var(--ink); text-decoration:none} /* e-posta/telefon */
.link:hover{color:var(--brand)}

.container{width:100%; max-width:1200px; margin:0 auto; padding:0 20px}
@media (max-width:560px){ .container{padding:0 16px} }

/* Header */
.site-header{
  position:sticky; top:0; z-index:30; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--border);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 20px}
.logo{height:48px; width:auto}

/* Menü (masaüstü) */
.menu{display:flex; gap:24px; align-items:center; margin-left:auto}
.menu a{font-weight:500; font-size:16px}
.menu a:hover{color:var(--brand)}

/* Sağ ikonlar (her zaman) */
.header-icons{display:flex; gap:12px; align-items:center; margin-left:24px}
.header-icons .flag{font-size:22px; line-height:1}
.header-icons .wa{
  background:#000; color:#fff; border-radius:50%;
  width:40px; height:40px; display:flex; justify-content:center; align-items:center; font-size:20px;
  box-shadow:0 2px 8px rgba(0,0,0,.12); transition:transform .15s, box-shadow .15s, background .15s
}
.header-icons .wa:hover{background:#1e1e1e; transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.18)}




/* 🔧 Mobilde kenar boşluklarını dengeli yap */
@media (max-width: 768px) {
  /* Ana içerik çerçevesi */
  .container {
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Sabit başlık (logo+ikonlar) ile uyumlu olsun */
  .site-header .header-inner {
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Bölümlere fazladan yanal padding verme */
  main, section, .hero, .about, .contact-wrap {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Daha küçük ekranlar için hafif daha dar boşluk */
@media (max-width: 560px) {
  .container,
  .site-header .header-inner {
    padding-left: 12px;
    padding-right: 12px;
  }
}







/* Mobil: menü gizli, ikonlar kalır */
@media (max-width:920px){
  .menu{display:none}
  .header-inner{padding:10px 16px}
  .logo{height:44px}
  .header-icons .wa{width:42px; height:42px; font-size:22px}
  .header-icons .flag{font-size:24px}
}

/* Hero */
.hero{display:grid; grid-template-columns:1.05fr .95fr; gap:28px; padding:32px 0 8px}
@media (max-width:820px){ .hero{grid-template-columns:1fr} }
h1{font-size:44px; line-height:1.15; margin:0 0 12px}
.h2{font-size:26px; margin:0 0 8px}
.lead{font-size:18px}
.muted{color:var(--muted); font-size:14px}

/* Slider (hero sağ) */
.slider.big{background:var(--card); border:1px solid var(--border); border-radius:18px; padding:12px; min-height:380px; position:relative}
.slider .track{position:relative; border-radius:14px; overflow:hidden; background:#f1f3f8}
.slide{width:100%; aspect-ratio:1/1; display:none; align-items:center; justify-content:center; background:#eef1f8}
.slide.active{display:flex}
.slide img{width:100%; height:100%; object-fit:cover; border-radius:14px}
.slide.tall-pad img{width:auto; height:80%; object-fit:contain; background:#eef1f8}
.slider .nav{position:absolute; top:50%; transform:translateY(-50%); border:0; width:40px; height:40px; border-radius:999px; background:rgba(0,0,0,.15); color:#fff; cursor:pointer}
.slider .nav:hover{background:rgba(0,0,0,.25)}
.slider .prev{left:14px} .slider .next{right:14px}
.slider .dots{display:flex; gap:6px; justify-content:center; margin-top:10px}
.slider .dot{width:8px; height:8px; border-radius:999px; background:#cfd3e0}
.slider .dot.active{background:var(--ink)}

/* Bölüm başlıkları */
.section{padding:36px 0 56px}
.section-head{display:flex; gap:10px; align-items:flex-start; margin-bottom:12px}
.section-head.with-mark{align-items:center}
.section-icon{width:26px; height:26px; opacity:.9}

/* Carousel (5’li) — touch scroll */
.carousel{position:relative; background:var(--card); border:1px solid var(--border); border-radius:16px; padding:12px}
.carousel .viewport{overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scroll-snap-type:x mandatory}
.carousel .viewport::-webkit-scrollbar{height:0}              /* scrollbar gizle (WebKit) */
.carousel .row{display:flex; gap:12px}
.thumb{flex:0 0 calc((100% - 12px*4)/5); background:#eef1f8; border-radius:12px; overflow:hidden; border:1px solid var(--border); cursor:zoom-in; scroll-snap-align:start}
.square{width:100%; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center}
.square img{width:100%; height:100%; object-fit:cover}
.caption{padding:8px 10px; font-size:13px; color:var(--muted)}
.cnav{position:absolute; top:50%; transform:translateY(-50%); border:0; width:40px; height:40px; border-radius:999px; background:rgba(0,0,0,.1); color:#fff; cursor:pointer}
.cnav:hover{background:rgba(0,0,0,.2)}
.cnav.prev{left:10px} .cnav.next{right:10px}

@media (max-width:1100px){ .thumb{flex:0 0 calc((100% - 12px*3)/4)} }
@media (max-width:820px){ .thumb{flex:0 0 calc((100% - 12px*2)/3)} }
@media (max-width:560px){ .thumb{flex:0 0 calc((100% - 12px)/2)} }




/* 🎯 Hero kısmını da kart formatında gösterelim */
.hero-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

/* Mobilde kenarlara yapışmasın */
@media (max-width: 768px) {
  .hero-card {
    margin-left: 12px;
    margin-right: 12px;
    padding: 18px 16px;
  }
}





/* Hakkımızda kartı */
.card{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px}
.about{display:grid; grid-template-columns:120px 1fr; gap:16px}
.about-mark img{width:100%; max-width:100px; opacity:.9}
.about h3{margin:10px 0 6px; font-size:20px}
.about p,.about ul{margin:0 0 10px}
.about ul{padding-left:18px}
@media (max-width:680px){ .about{grid-template-columns:1fr} .about-mark{order:-1} }

/* 💡 Hakkımızda alanı: logo kaldırıldığında tam genişlikte hizala */
.about {
  display: block;
  padding: 20px;
}

.about h3 {
  margin-top: 12px;
}

.about ul {
  margin-left: 20px;
}

@media (max-width: 768px) {
  .about {
    padding: 14px;
  }
}

/* =============== Accordion (hidden tabanlı, +/− ikonlu) =============== */
.accordion {
  margin-top: 16px;
  padding: 0;
  overflow: hidden;
}

/* Başlık butonu */
.accordion .acc-item{
  width: 100%;
  text-align: left;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px 14px 46px;   /* solda ikon için alan */
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  margin: 10px 0 0;
  transition: background .2s ease, border-color .2s ease;
  font-family: inherit;           /* font eşleşsin (Ubuntu) */
  font-size: 16px;
  position: relative;
}
.accordion .acc-item:hover{
  background: #fafbfe;
  border-color: #dde1ea;
}
.accordion .acc-item[aria-expanded="true"]{
  background: #f8f9fd;
  border-color: #d6dae5;
}

/* +/− kutucuğu */
.accordion .acc-item::before{
  content: "+";
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  border-radius: 6px;
  background: #f2f4fb;
  color: var(--ink);
  display: grid; place-items: center;
  font-weight: 900; line-height: 1;
}
.accordion .acc-item[aria-expanded="true"]::before{
  content: "−";
  background: #e9edf7;
}

/* Varsa eski ok işaretini kapat */
.accordion .acc-caret{ display:none; }

/* Panel – varsayılan kapalı (hidden ile) */
.accordion .acc-panel{
  background: #fff;
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  padding: 14px 16px;
  margin: -1px 0 10px;
  font-family: inherit;
  font-size: 16px;

  /* yumuşak açılma */
  overflow: hidden;
  transition: max-height .25s ease;
  max-height: 1200px;          /* açıkken */
}

/* kapalıyken: hidden attribute */
.accordion .acc-panel[hidden]{
  display: none !important;
  max-height: 0;
}

/* İç liste biçimi */
.accordion .bulleted{
  margin: 6px 0 0 0;
  padding-left: 20px;
}
.accordion .bulleted li{
  margin: 6px 0;
  line-height: 1.55;
}


/* İletişim */
.contact{list-style:none; padding:0; margin:0; color:var(--muted)}
.contact.big{font-size:17px}
.contact.compact li{margin:6px 0}
.contact.spaced li{margin:8px 0}
.contact a{color:var(--ink)}
.contact .ico{margin-right:8px}
.contact-wrap{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start}
@media (max-width:820px){ .contact-wrap{grid-template-columns:1fr} }
.contact-form{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.field input,.field textarea{border:1px solid var(--border); border-radius:10px; padding:10px 12px; font:inherit; background:#fff}
.field input:focus,.field textarea:focus{outline:none; border-color:#c7ccd8; box-shadow:0 0 0 3px #eef1f8}

/* Butonlar */
.btn{padding:10px 14px; border-radius:12px; display:inline-flex; align-items:center; gap:8px; font-weight:600; border:1px solid var(--border); background:#fff; color:var(--ink)}
.btn.outline{background:#fff}
.btn.wa-black{background:#000; color:#fff; border-color:transparent}
.btn.wa-black:hover{background:#1e1e1e; transform:translateY(-2px)}

/* Footer */
.site-footer{border-top:1px solid var(--border); background:#fff; color:var(--muted)}
.footer-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.mini-mark{width:22px; opacity:.9}
.foot-right.socials{display:flex; align-items:center; gap:14px}
.foot-right.socials a{display:inline-flex; width:40px; height:40px; justify-content:center; align-items:center; border-radius:50%; background:#fff; color:var(--ink); border:1px solid var(--border); font-size:20px; transition:all .3s ease}
.foot-right.socials a:hover{background:var(--accent); color:#fff; border-color:transparent; transform:translateY(-2px)}

/* Lightbox */
.lightbox{position:fixed; inset:0; background:rgba(0,0,0,.75); display:grid; place-items:center; padding:24px}
.lightbox[hidden]{display:none !important}
.lightbox img{max-width:min(96vw,1200px); max-height:90vh; border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,.4)}
.lb-close{position:absolute; top:16px; right:16px; width:44px; height:44px; border-radius:999px; border:0; background:#fff; color:#000; font-size:28px; cursor:pointer}