@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;color:#1f2937;background:#fff;overflow-x:hidden}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.font-serif{font-family:'Playfair Display',Georgia,serif}

/* ── Nav active ── */
.nav-link{position:relative;transition:color .15s ease}
.nav-link.active{color:#0a2342!important}
.nav-link.active::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:3px;background:#3d6a9e;border-radius:2px 2px 0 0}

/* ── Mobile menu ── */
#mobile-menu{display:none;position:fixed;inset:0;background:#0a2342;z-index:200;flex-direction:column;padding:72px 24px 40px;overflow-y:auto;-webkit-overflow-scrolling:touch}
#mobile-menu.open{display:flex}
#mobile-menu a{display:block;color:rgba(255,255,255,.85);font-size:1.15rem;font-weight:600;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1);transition:color .15s,padding-left .15s}
#mobile-menu a:hover,#mobile-menu a.active{color:#5a8fc4;padding-left:6px}
.hamburger{display:none}
@media(max-width:1023px){.hamburger{display:flex}.desktop-nav{display:none!important}}

/* ── Hero: sur.jpeg + grid overlay ── */
.hero-section{position:relative;overflow:hidden}
.hero-bg-img{position:absolute;inset:0;z-index:0;background:url('../images/sur.jpeg') center 40% / cover no-repeat}
/* Dark gradient keeps text readable */
.hero-bg-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(50deg,rgba(100, 132, 172, 0) 0%,rgba(100, 133, 174, 0) 0%,rgba(98, 134, 179, 0) 0%)}
/* Grid lines on top of overlay, very subtle */
.hero-bg-grid{
  position:absolute;inset:0;z-index:2;
  background-image:
    repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0,rgba(255,255,255,.04) 1px,transparent 1px,transparent 200px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0,rgba(255,255,255,.04) 1px,transparent 1px,transparent 200px);
}
.hero-content{position:relative;z-index:3}

/* ── Page hero (non-index): navy + grid, no image ── */
.page-hero-section{position:relative;overflow:hidden}
.page-hero-bg{
  position:absolute;inset:0;z-index:0;
  background:linear-gradient(125deg,#071829 0%,#0a2342 55%,#163d66 100%);
}
.page-hero-grid{
  position:absolute;inset:0;z-index:1;
  background-image:
    repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0,rgba(255,255,255,.045) 1px,transparent 1px,transparent 60px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0,rgba(255,255,255,.045) 1px,transparent 1px,transparent 60px);
}
.page-hero-glow{position:absolute;right:-80px;bottom:-80px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(61,106,158,.15),transparent 70%);z-index:1;pointer-events:none}
.page-hero-content{position:relative;z-index:2}

/* ── Accordion ── */
.acc-arrow{transition:transform .28s cubic-bezier(.4,0,.2,1)}
.acc-open .acc-arrow{transform:rotate(180deg)}
.acc-body{display:none}
.acc-open .acc-body{display:block}

/* ── Session rows ── */
.session-row{transition:background .12s ease}
.session-row:hover{background:#eef2ff}

/* ── Scrollbar hide ── */
.no-sb{scrollbar-width:none;-ms-overflow-style:none}
.no-sb::-webkit-scrollbar{display:none}

/* ── Card shadows ── */
.shadow-card{box-shadow:0 2px 12px rgba(10,35,66,.07),0 0 0 1px rgba(10,35,66,.04)}
.shadow-card-md{box-shadow:0 6px 28px rgba(10,35,66,.12),0 0 0 1px rgba(10,35,66,.05)}

/* ── Google Maps iframe ── */
.gmap-wrap{border-radius:16px;overflow:hidden;border:1px solid rgba(10,35,66,.1);box-shadow:0 2px 16px rgba(10,35,66,.08)}
.gmap-wrap iframe{display:block;width:100%;border:0}

/* ── Program table ── */
.prog-table{width:100%;border-collapse:collapse}
.prog-table thead th{background:#0a2342;color:#fff;padding:12px 16px;text-align:left;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.prog-table thead th:first-child{border-radius:0;width:110px}
.prog-table tbody tr{border-bottom:1px solid #f1f0ec;transition:background .1s}
.prog-table tbody tr:hover{background:#faf9f5}
.prog-table td{padding:14px 16px;vertical-align:top;font-size:13.5px;color:#374151}
.prog-table td.time-col{font-weight:700;color:#3d6a9e;font-size:12px;letter-spacing:.04em;white-space:nowrap;padding-top:16px}
.prog-table td.title-col{font-weight:600;color:#0a2342}
.prog-table td.title-col .chairs{font-size:12px;font-weight:400;color:#9ca3af;margin-top:3px;font-style:italic}
.prog-table td.title-col ul{margin-top:8px;list-style:none;display:flex;flex-direction:column;gap:4px}
.prog-table td.title-col ul li{display:flex;gap:8px;font-size:12.5px;font-weight:400;color:#6b7280;line-height:1.45}
.prog-table td.title-col ul li::before{content:counter(item);counter-increment:item;font-size:10px;font-weight:700;color:#3d6a9e;min-width:14px;padding-top:1px}
.prog-table tbody{counter-reset:none}
.oturum-row ul{counter-reset:item}
.tag{display:inline-flex;align-items:center;font-size:10.5px;font-weight:600;padding:2px 10px;border-radius:20px;margin-top:6px}
.tag-keynote{background:#dbeafe;color:#1e40af}
.tag-panel{background:#d1fae5;color:#065f46}
.tag-break{background:#f1f5f9;color:#64748b}

/* ── Davet info cards ── */
.davet-info-item{display:flex;gap:14px;align-items:flex-start;padding:16px 20px;background:#fff;border-radius:14px;border:1px solid #e9e7e1;transition:box-shadow .15s}
.davet-info-item:hover{box-shadow:0 4px 20px rgba(10,35,66,.08)}
.davet-info-icon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.davet-info-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#9ca3af;margin-bottom:3px}
.davet-info-value{font-size:14.5px;font-weight:600;color:#0a2342;line-height:1.35}
.davet-info-sub{font-size:12px;color:#6b7280;margin-top:2px}

/* ── Print ── */
@media print{nav,footer,#mobile-menu{display:none!important}body{font-size:12pt;color:#000}}

/* ── Org logos — white bg, no border-radius clash ── */
.org-logo-wrap {
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 2px 12px rgba(10,35,66,.07), 0 0 0 1px rgba(10,35,66,.04);
  transition: box-shadow .2s ease;
}
.org-logo-wrap:hover {
  box-shadow: 0 6px 28px rgba(10,35,66,.12), 0 0 0 1px rgba(10,35,66,.05);
}
.org-logo-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
}

/* ═══════════════════════════════════════════════════════
   DÜZENLEYİCİ KURULUŞLAR — Logo grid (doğal oran, sabit yükseklik)
   Kare zorlaması yok: her logo kendi en-boy oranında görünür
   ═══════════════════════════════════════════════════════ */

.org-logos-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* dikey hizalama: ortala */
  justify-content: center;
  gap: 32px 40px;
}

.org-logo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
}

/* Kutu: padding ile nefes alır, sabit yükseklik → doğal genişlik */
.org-logo-box {
  background: #ffffff;
  border-radius: 16px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Görsel: sabit yükseklik, genişlik otomatik → orijinal oran korunur */
.org-logo-img {
  height: 88px;     /* tüm logolar bu yükseklikte; genişlikleri kendi oranlarına göre */
  width: auto;
  max-width: 220px; /* olağandışı geniş logoların taşmasını önler */
  object-fit: contain;
  display: block;
  border-radius: 4px;
}

/* Mobil (< 480px): logolar biraz küçülür */
@media (max-width: 479px) {
  .org-logos-grid { gap: 20px 16px; }
  .org-logo-box   { padding: 10px 14px; }
  .org-logo-img   { height: 64px; max-width: 160px; }
}

/* ═══════════════════════════════════════════════════════
   HERO — Düzenleyici logoları (sur.jpeg sağ-alt köşe overlay)
   Sabit yükseklik + otomatik genişlik → doğal dikdörtgen form
   ═══════════════════════════════════════════════════════ */
.hero-org-logos {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 4;           /* hero-content (z:3) üstünde */
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  /* Taşma koruması: ekran sınırını aşmasın */
  max-width: calc(100% - 32px);
  /* Yarı saydam cam efekti */
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 14px;
  padding: 10px 16px;
}

/* Görsel: sabit yükseklik, genişlik kendi oranına bırakıldı */
.hero-org-logo {
  height: 76px;         /* desktop overlay logo boyutu */
  width: auto;
  max-width: 114px;     /* olağandışı geniş logolara üst sınır */
  object-fit: contain;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 8px;
  padding: 6px 10px;
  flex-shrink: 0;
  display: block;
}

/* ═══════════════════════════════════════════════════════
   NAVBAR — Menü linkleri ortala (desktop)
   ═══════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .desktop-nav {
    justify-content: center; /* nav linklerini yatayda ortala */
    margin-left: 0;          /* ml-2 Tailwind sınıfını sıfırla */
  }
}

/* ═══════════════════════════════════════════════════════
   NAVBAR — Düzenleyici logoları (tüm ekran boyutlarında)
   Mobilde hamburger'ın hemen solunda görünür
   ═══════════════════════════════════════════════════════ */

/* Varsayılan: gizli (media query'ler açar) */
.nav-org-logos { display: none; }

/* Görsel: sabit yükseklik, doğal genişlik (kare zorlaması yok) */
.nav-org-logo {
  height: 40px;
  width: auto;
  max-width: 80px;
  object-fit: contain;
  background: #f0f2f5;
  border-radius: 7px;
  padding: 3px 6px;
  flex-shrink: 0;
  display: block;
  transition: opacity .15s ease;
}
.nav-org-logo:hover { opacity: .7; }

/* ── Desktop (≥1024px): sağ köşe, border-left ayırıcı ── */
@media (min-width: 1024px) {
  .nav-org-logos {
    display: flex;
    align-items: center;
    gap: 8px;
    border-left: 1px solid rgba(10, 35, 66, .12);
    padding-left: 14px;
    margin-left: 4px;
    flex-shrink: 0;
  }
}

/* ── Mobil (<1024px): küçük logolar hamburger'ın solunda ── */
@media (max-width: 1023px) {
  /* Logoları göster ve ml-auto ile sağa it */
  .nav-org-logos {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: auto; /* brand'dan sonra kalan tüm boşluğu al */
    flex-shrink: 0;
  }
  /* Daha küçük boyut — navbar'ı şişirmesin */
  .nav-org-logo {
    height: 28px;
    max-width: 56px;
    padding: 2px 4px;
    border-radius: 5px;
    background: #eef0f3;
  }
  /* Hamburger'ın Tailwind ml-auto'sunu geçersiz kıl;
     artık nav-org-logos sağa yaslanıyor, hamburger hemen yanında */
  #hamburger-btn {
    margin-left: 6px !important;
  }
}

/* ═══════════════════════════════════════════════════════
   MOBİL UYUMLULUK — Responsive ayarlar
   ═══════════════════════════════════════════════════════ */

/* Tüm görseller ekrandan taşmasın */
img { max-width: 100%; height: auto; display: block; }

/* sur.jpeg mobilde merkeze hizalanır, hero yeterince yüksek olsun */
@media (max-width: 767px) {
  .hero-bg-img { background-position: center center; }
  .hero-section { min-height: 520px; }
}

/* Küçük telefon (< 480px): hero overlay logolar küçülür ama hâlâ okunaklı */
@media (max-width: 479px) {
  .hero-org-logos {
    bottom: 12px;
    right: 12px;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 10px;
  }
  .hero-org-logo {
    height: 46px;
    max-width: 72px;
    padding: 3px 5px;
  }
}

/* Orta telefon (480–767px): hero overlay orta boy */
@media (min-width: 480px) and (max-width: 767px) {
  .hero-org-logos { bottom: 16px; right: 16px; }
  .hero-org-logo  { height: 60px; max-width: 90px; }
}

/* Genel taşma koruması */
section, div { max-width: 100%; }

/* ── Focus visible for accessibility ── */
:focus-visible { outline: 2px solid #3d6a9e; outline-offset: 2px; border-radius: 4px; }
