/* ============================================================================
   İNLANGU — İLETİŞİM SAYFASI
   ----------------------------------------------------------------------------
   Hocanın özgün Iletisim.aspx sayfasının kendi <style> bloğundan birebir alındı;
   sayfa içine gömülü olmaktan çıkarılıp tek dosyaya taşındı.
   ========================================================================== */



    html, body {
      margin: 0;
      padding: 0;
      font-family: 'Work Sans', sans-serif;
      background-color: #f7f7f7;
      overflow-x: hidden;
    }

    /* === SAYFA GENEL SARICI === */
    .contact-page * {
      box-sizing: border-box;
    }

    /* === HERO’YU HEADER’A VE KENARLARA SIFIRLAMA === */
    .contact-page .hero-shell {
      position: relative;
      width: 100vw;        /* ekran genişliği */
      left: 50%;
      margin-left: -50vw;  /* sağ–sol boşlukları sıfırla */
      margin-top: -80px;   /* master’daki üst padding’i iptal et */
    }

    /* === HERO === */
    .contact-page .hero {
      background: url('assets/img/iletisim/iletisim-000.jpg') center 40% / cover no-repeat;
      min-height: 360px;
      position: relative;
      color: white;
      overflow: hidden;
    }
    .contact-page .hero::after {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background-color: rgba(0, 0, 0, 0.55);
      z-index: 1;
    }
    .contact-page .hero-content {
      position: absolute;
      bottom: 40px;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      z-index: 2;
      padding: 0 20px 20px;
    }
    .contact-page .hero-box {
      display: inline-block;
      max-width: 90vw;
      min-width: 300px;
      background-color: rgba(0, 0, 0, 0.4);
      padding: 1px 4px;
      border-radius: 12px;
      backdrop-filter: blur(3px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      word-break: break-word;
      text-align: center;
    }
    .contact-page .hero h1 {
      font-size: 36px;
      margin: 0;
      color: #ff4e2e;
      text-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
    }
    .contact-page .hero p {
      font-size: 18px;
      margin-top: 8px;
      color: #fff;
      text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    }
    @media (max-width:600px) {
      .contact-page .hero h1 { font-size:26px; }
      .contact-page .hero p  { font-size:15px; }
      .contact-page .hero-content { bottom:20px; }
    }

    /* === ANA İÇERİK (Sadece iletişim sayfası) === */
    .iletisim-main {
      max-width: 1080px;
      margin: 40px auto 60px;
      padding: 0 20px;
    }
    .iletisim-main h2 {
      text-align: center;
      font-size: 24px;
      color: #003366;
      margin-bottom: 20px;
    }
    .iletisim-main p.aciklama {
      text-align: center;
      font-size: 15px;
      color: #444;
      max-width: 700px;
      margin: 0 auto 30px;
    }
    .iletisim-main form {
      background-color: #fff;
      padding: 24px;
      border-radius: 12px;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
      margin-bottom: 40px;
    }
    .iletisim-main label {
      font-weight: 600;
      font-size: 14px;
      margin-bottom: 6px;
      display: block;
      color: #333;
    }
    .iletisim-main input,
    .iletisim-main textarea {
      width: 100%;
      padding: 10px;
      font-size: 14px;
      border-radius: 8px;
      border: 1px solid #ccc;
      margin-bottom: 16px;
    }
    .iletisim-main textarea {
      resize: vertical;
      min-height: 100px;
    }
    .iletisim-main button {
      width: 100%;
      background-color: #22bd58;
      color: white;
      font-size: 15px;
      font-weight: bold;
      padding: 12px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: background-color 0.3s ease;
      margin: 10px 0 30px;   /* üstte 16px, altta 24px boşluk */
    }

    .iletisim-main button:hover {
      background-color: #1aa149;
    }
    .iletisim-main .success-msg {
      color: green;
      font-weight: 600;
      text-align: center;
      margin-top: 10px;
    }
    .iletisim-main .info-cards {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;
      margin-bottom: 60px;
    }
    .iletisim-main .info-card {
      flex: 1 1 300px;
      background-color: #fff;
      padding: 24px;
      border-radius: 12px;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
      text-align: center;
    }
    .iletisim-main .info-card h3 {
      font-size: 18px;
      color: #003366;
      margin-bottom: 10px;
    }
    .iletisim-main .info-card p {
      font-size: 15px;
      color: #444;
      margin: 6px 0;
      word-break: break-word;
    }
    @media (max-width:768px) {
      .iletisim-main .info-cards { flex-direction: column; gap:16px; }
    }

    /* === Hakkımızda Bölümü === */
    .iletisim-main .hero-hakkimizda {
      background-image: url('assets/img/hakkimizda-banner.jpg');
      background-size: cover;
      background-position: center;
      color: white;
      padding: 100px 20px 60px;
      text-align: center;
      position: relative;
    }
    .iletisim-main .hero-hakkimizda::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background-color: rgba(0,0,0,0.55);
      z-index: 1;
    }
    .iletisim-main .hero-hakkimizda h1,
    .iletisim-main .hero-hakkimizda p {
      position: relative;
      z-index: 2;
    }
    .iletisim-main .hero-hakkimizda h1 {
      font-size: 38px;
      font-weight: 700;
      margin-bottom: 10px;
      text-shadow: 0 2px 8px rgba(0,0,0,0.4);
    }
    .iletisim-main .hero-hakkimizda p {
      font-size: 18px;
      max-width: 700px;
      margin: 0 auto;
      opacity: 0.9;
    }
    .iletisim-main .hakkimizda-section {
      padding: 60px 20px;
      background-color: #f9f9f9;
    }
    .iletisim-main .hakkimizda-container {
      max-width: 960px;
      margin: auto;
    }
    .iletisim-main .content-box {
      background: white;
      border-radius: 12px;
      padding: 30px;
      margin-bottom: 40px;
      box-shadow: 0 4px 14px rgba(0,0,0,0.06);
      transition: transform 0.3s ease;
    }
    .iletisim-main .content-box:hover { transform: translateY(-4px); }
    .iletisim-main .content-box h2 {
      color: #22bd58;
      font-size: 24px;
      margin-bottom: 16px;
      position: relative;
    }
    .iletisim-main .content-box h2::after {
      content: "";
      display: block;
      width: 40px;
      height: 3px;
      background-color: #22bd58;
      margin-top: 8px;
      border-radius: 2px;
    }
    .iletisim-main .content-box p {
      color: #333;
      font-size: 16px;
      line-height: 1.7;
      margin-bottom: 14px;
    }
    @media (max-width:768px) {
      .iletisim-main .hero-hakkimizda h1 { font-size:28px; }
      .iletisim-main .hero-hakkimizda p  { font-size:16px; }
      .iletisim-main .content-box { padding:20px; }
    }