/* =========================
   Base
   ========================= */
   :root{
    --blue:#016098;
    --blue2:#016098;
    --blue3:#016098;
    --text:#344154;
    --dark:#016098;
    --line:#707070;
    --container:1026px;
  
    /* triangle x default (desktop) */
    --tri-x: 22%;
  }
  
  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    font-family:"Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background:#fff;
    color:#111;
  
    /* ✅ ekstra güvenlik: mobil yatay taşma kalkanı */
    overflow-x:hidden;
  }
  a{ color:inherit; text-decoration:none; }
  
  .home-body{
    width:100%;
    overflow-x:hidden; /* ✅ mobilde yatay taşma engeli */
  }
  
  /* =========================
     Header
     ========================= */
  .home-header{
    min-height:101px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:5px 40px;
    gap:16px;
    background:#fff;
  }
  
  .header-left,
  .header-right{
    flex:0 0 auto;
  }
  
  .mini-logos{
    display:flex;
    align-items:center;
    gap:8px;
    flex:0 0 auto;
  }
  
  .logo-staj{
    height:80px;
    width:auto;
    display:block;
  }
  
  .logo-mini{
    height:70px;
    width:auto;
    display:block;
    object-fit:contain;
  }
  .logo-mini.iskur{
    height:50px;
  }
  
  /* Login button (pill + feather icon) */
  .btn-login{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
  
    height:34px;
    padding:0 18px;
    width:auto;
  
    background:var(--blue2);
    border:none;
    border-radius:18px;
    color:#fff;
  
    font-family:"Montserrat", sans-serif;
    font-size:14px;
    font-weight:400;
    line-height:1;
    white-space:nowrap;
    user-select:none;
  }
  .btn-login .btn-ico{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#fff;
  }
  .btn-login:hover{ filter:brightness(1.05); }
  
  /* Responsive header */
  @media (max-width: 992px){
    .home-header{
      flex-direction:column;
      justify-content:center;
      padding:18px 16px;
      gap:12px;
    }
  }
  
  @media (max-width: 576px){
    .home-header{
      padding:14px 12px;
      gap:10px;
    }
    .logo-staj{ height:64px; }
    .logo-mini{ height:48px; }
  }
  
  /* =========================
     Hero / Banner
     ========================= */
  .hero{
    position:relative;
    width:100%;
    overflow:hidden; /* ✅ taşma yok */
    background:#fff;
  }
  
  /* img kesin tam genişlik + oran bozulmasın */
  .hero-img{
    width:100%;
    max-height:663px;
    height:auto;          /* ✅ doğal oran */
    object-fit:cover;     /* ✅ taşarsa kırp, yamulma olmasın */
    display:block;
    position:relative;
    z-index:1;
  }
  
  /* Overlay (title + subtitle) */
  .hero-overlay{
    position:absolute;
    inset:0;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:18px;
    padding:20px;
    text-align:center;
    pointer-events:none;
  
    /* ✅ okunabilirlik: yumuşak gölge/gradient */
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.10),
      rgba(0,0,0,0.00),
      rgba(0,0,0,0.10)
    );
  }
  
  /* Desktop typographic look */
  .hero-title{
    font-family:"Patrick Hand","Montserrat",sans-serif;
    font-size:120px;
    letter-spacing:5px;
    color:#ff9d1a;
    text-shadow:
      -2px -2px 0 #ffffff,
       2px -2px 0 #ffffff,
      -2px  2px 0 #ffffff,
       2px  2px 0 #ffffff,
       0    3px 0 rgba(0,0,0,.15);
    line-height:1;
    text-transform:uppercase;
  }
  
  .hero-subtitle{
    font-family:"Patrick Hand","Montserrat",sans-serif;
    font-size:64px;
    color:#ff9d1a;
    text-shadow:
      -1px -1px 0 rgba(255,255,255,.9),
       1px -1px 0 rgba(255,255,255,.9),
      -1px  1px 0 rgba(255,255,255,.9),
       1px  1px 0 rgba(255,255,255,.9);
    max-width:1400px;
  }
  
  /* Tablet */
  @media (max-width: 992px){
    .hero-title{ font-size:76px; }
    .hero-subtitle{ font-size:50px; }
  }
  
  /* Mobile: sabit banner yüksekliği + cover (boşluk büyümesin) */
  @media (max-width: 576px){
    .hero-img{
      max-height:240px;          /* ✅ devasa banner olmasın */
      object-fit:cover;
    }
    .hero-title{ font-size:44px; }
    .hero-subtitle{ font-size:30px; }
    .hero-overlay{
      padding:14px;
      gap:10px;
      justify-content:center;
    }
  }
  
  /* =========================
     USP Content
     ========================= */
  .usp-content{
    background:#fff;
  }
  
  .usp-content-container{
    max-width:var(--container);
    margin:60px auto;
    padding:0 16px;
  }
  
  .usp-tabs-wrap{
    position:relative;
  }
  
  /* radios hidden */
  .tab-radio{
    position:absolute;
    left:-9999px;
  }
  
  /* Tabs row (desktop) - ✅ 3 eşit kolon */
  .usp-tabs{
    display:flex;
    justify-content:space-between;
    align-items:stretch;
    gap:0;
    flex-wrap:nowrap;
    margin:0;
    padding:0;
  }
  
  .tab{
    flex:1;                 /* ✅ eşit genişlik */
    font-size:16px;
    font-weight:500;
    color:#0f172a;
    cursor:pointer;
    padding:10px 6px;
    position:relative;
    text-align:center;
    white-space:normal;     /* ✅ uzun başlıklar kırılabilsin */
  }
  
  /* Active underline */
  #tab1:checked ~ .usp-tabs label[for="tab1"],
  #tab2:checked ~ .usp-tabs label[for="tab2"],
  #tab3:checked ~ .usp-tabs label[for="tab3"]{
    color:var(--blue2);
    font-weight:700;    /* ✅ aktif tab daha tok */
  }
  #tab1:checked ~ .usp-tabs label[for="tab1"]::after,
  #tab2:checked ~ .usp-tabs label[for="tab2"]::after,
  #tab3:checked ~ .usp-tabs label[for="tab3"]::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:2px;
    background:var(--blue2);
  }
  
  /* Divider + triangle */
  .divider-usp{
    margin-top:22px;
    margin-bottom:26px;
    position:relative;
    height:20px;
    border-top:1px solid var(--line);
  }
  
  .divider-usp .inner-triangle{
    position:absolute;
    top:0;
    left:var(--tri-x);
    transform:translateX(-50%);
    width:0;height:0;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-top:10px solid #fff;
    z-index:2;
  }
  .divider-usp .triangle{
    position:absolute;
    top:0;
    left:var(--tri-x);
    transform:translateX(-50%);
    width:0;height:0;
    border-left:20px solid transparent;
    border-right:20px solid transparent;
    border-top:20px solid var(--blue3);
    z-index:1;
  }
  
  /* Triangle position (desktop) - ✅ tam merkezler */
  #tab1:checked ~ .divider-usp{ --tri-x: 16.666%; }
  #tab2:checked ~ .divider-usp{ --tri-x: 50%; }
  #tab3:checked ~ .divider-usp{ --tri-x: 83.333%; }
  
  /* Panels show/hide */
  .tab-panels .panel{ display:none; }
  #tab1:checked ~ .tab-panels .p1{ display:block; }
  #tab2:checked ~ .tab-panels .p2{ display:block; }
  #tab3:checked ~ .tab-panels .p3{ display:block; }
  
  /* Text block */
  .text-item.criteria{
    margin:0 auto;
    padding:0 16px;
    font-size:15px;
    line-height:1.75;
    color:var(--text);
    text-align:justify;
    text-justify:inter-word;
    overflow-wrap:anywhere;
    hyphens:auto;
  }
  .text-item.criteria p{
    margin:0 0 14px 0;
    text-indent:1.5em;
  }
  .criteria-list{
    margin:8px 0 14px 0;
    padding-left:22px;
  }
  .criteria-list li{
    margin:6px 0;
    text-align:justify;
  }
  
  /* Mobile USP rules */
  @media (max-width:576px){
    /* tabs alt alta ortalı */
    .usp-tabs{
      flex-direction:column;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
    }
  
    .tab{
      width:100%;
      font-size:14px;
      padding:8px 6px;
    }
  
    /* ✅ ok mobilde SABİT ortada */
    .divider-usp,
    #tab1:checked ~ .divider-usp,
    #tab2:checked ~ .divider-usp,
    #tab3:checked ~ .divider-usp{
      --tri-x: 50% !important;
    }
  
    .text-item.criteria{
      font-size:14px;
      hyphens:none;
    }
    .text-item.criteria p{ text-indent:1em; }
  }
  
  /* =========================
     Footer
     ========================= */
  .footer-home{
    background:var(--blue);
    color:#fff;
    padding:40px 0 24px;
  }
  
  .footer-inner{
    max-width:var(--container);
    margin:0 auto;
    padding:0 16px;
    text-align:center;
    display:flex;
    flex-direction:column;
    gap:16px;
    align-items: center;
  }
  
  .footer-mail,
  .footer-mail a{
    font-size:14px;
    font-weight:600;
    color:#fff;
  }
  .footer-mail a:hover{ opacity:.85; }
  
  .phone-img{
    max-width:190px;
    height:auto;
  }
  
  /* ✅ TEK satır / tek grup sosyal alan: genişken yan yana, daralınca alta sar */
  .footer-social,
  .footer-social.footer-social-all{
    width: min(920px, 100%);
    margin: 6px auto 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;            /* ✅ responsive’de otomatik alta iner */
    gap: 18px 22px;             /* row / column */
    padding: 0;
  }
  
  /* her ikon + label hücresi */
  .footer-social a,
  .footer-social.footer-social-all a{
    width: 92px;                /* kolon gibi düzgün dizilim */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #fff;
    text-decoration: none;
  }
  
  /* ✅ KUTU YOK: ikonlar çıplak */
  .footer-social a i,
  .footer-social a svg,
  .footer-social.footer-social-all a i,
  .footer-social.footer-social-all a svg{
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
  
    display: inline-block !important;
    font-size: 28px;            /* ikon boyutu */
    line-height: 1;
  }
  
  /* svg (next) ölçü sabitle */
  .footer-social a svg,
  .footer-social.footer-social-all a svg{
    width: 28px !important;
    height: 28px !important;
    fill: currentColor;
  }
  
  /* label */
  .footer-social .social-label,
  .footer-social.footer-social-all .social-label{
    font-size: 12px;
    font-weight: 700;
    opacity: .95;
    text-align: center;
    line-height: 1.15;
    white-space: nowrap;
  }
  
  /* hover */
  .footer-social a:hover,
  .footer-social.footer-social-all a:hover{
    opacity: .85;
  }
  
  /* mobil: biraz küçült */
  @media (max-width:576px){
    .footer-social,
    .footer-social.footer-social-all{
      width: 100%;
      gap: 14px 16px;
    }
    .footer-social a,
    .footer-social.footer-social-all a{
      width: 86px;
    }
    .footer-social .social-label,
    .footer-social.footer-social-all .social-label{
      font-size: 11px;
    }
    .footer-social a i,
    .footer-social.footer-social-all a i{
      font-size: 26px;
    }
    .footer-social a svg,
    .footer-social.footer-social-all a svg{
      width: 26px !important;
      height: 26px !important;
    }
  }
  
  .footer-copy{
    margin-top:8px;
    font-size:13px;
    font-weight:400;
    opacity:.95;
  }
  
  /* Mobile footer tighten */
  @media (max-width:576px){
    .footer-home{
      padding:28px 0 18px;
    }
    .phone-img{ max-width:160px; }
  }
  
  /* Footer phone badge container */
  .footer-phone{
    display:flex;
    justify-content:center;
  }
  
  /* Callcenter badge */
  .contact-callcenter-simple{
    display:inline-flex;
    align-items:flex-start;
  
    padding: 10px 14px;
    border-radius: 10px;
    width: fit-content;
    max-width: 260px;
  
    backdrop-filter: blur(2px);
    transition: all .25s ease;
  }
  
  .contact-callcenter-simple:hover{
    background: rgba(0, 177, 237, 0.1);
    transform: translateY(-1px);
  }
  
  .callcenter-simple-content{
    flex-direction:column;
    gap:4px;
  }
  
  .simple-label{
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.1;
  }
  
  .simple-number{
    display:block;
    text-decoration:none !important;
    color: inherit;
  }
  
  .simple-main-number{
    display:flex;
    align-items:baseline;
    gap:6px;
    line-height: 1;
  }
  
  .simple-444{
    color:#00b1ed;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .2px;
  }
  
  .simple-letters{
    color:#f49b35;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2px;
  }
  
  .simple-numeric{
    color:#fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;
  }
  
  @media (max-width:576px){
    .contact-callcenter-simple{
      padding: 9px 12px;
      border-radius: 10px;
    }
    .simple-444,
    .simple-letters{
      font-size: 13px;
    }
    .simple-numeric{ font-size: 11px; }
  }
  
  /* =========================
     FAQ (SSS) - Accordion
     ========================= */
  .faq{
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .faq-item{
    border: 1px solid rgba(67,128,157,.25);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
  }
  
  /* default triangle markerı kapat */
  .faq-item summary{
    list-style: none;
  }
  .faq-item summary::-webkit-details-marker{
    display: none;
  }
  
  .faq-q{
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
  
    padding: 12px 14px;
  
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
  
    user-select: none;
    position: relative;
  }
  
  .faq-no{
    color: var(--blue2);
    font-weight: 800;
    min-width: 24px;
  }
  
  /* sağdaki ok */
  .faq-q::after{
    content: "";
    margin-left: auto;
    width: 10px;
    height: 10px;
    border-right: 2px solid rgba(52,65,84,.8);
    border-bottom: 2px solid rgba(52,65,84,.8);
    transform: rotate(45deg);
    transition: transform .2s ease, opacity .2s ease;
    opacity: .85;
  }
  
  .faq-item:hover{
    border-color: rgba(67,128,157,.45);
  }
  
  .faq-item[open] .faq-q{
    color: var(--blue2);
    background: rgba(67,128,157,.06);
  }
  
  .faq-item[open] .faq-q::after{
    transform: rotate(-135deg);
    opacity: 1;
  }
  
  .faq-a{
    padding: 0 14px 12px 48px; /* numaraya hizalı içerik */
    color: var(--text);
    font-size: 14px;
    line-height: 1.75;
  }
  
  .faq-a p{
    margin: 10px 0 0 0;
    text-indent: 0;
    text-align: justify;
  }
  
  @media (max-width:576px){
    .faq-q{ font-size: 14px; padding: 10px 12px; }
    .faq-a{ padding: 0 12px 12px 40px; }
  }
  
  /* ✅ Footer telefon alanı: içerik tam ortalı */
  .callcenter-simple-content{
    align-items:center;   /* kritik */
    text-align:center;
  }
  
  .simple-number{
    display:flex;         /* anchor'ı flex yap */
    flex-direction:column;
    align-items:center;   /* kritik */
  }
  
  .simple-main-number{
    justify-content:center; /* 444 + İŞKUR satırı ortalansın */
  }
  .hero-title-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
  }
  
  /* SVG ikon */
  .hero-bag-img{
    width:72px;         /* burayı 56-80 arası oynat */
    height:auto;
    transform: rotate(-8deg);
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.25));
  }
  
  /* mobilde daha da küçült */
  @media (max-width:576px){
    .hero-title-row{ gap:10px; }
    .hero-bag-img{
      width:44px;
      transform: rotate(-6deg);
    }
  }

  .hero-title-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
  }
  
  /* SVG ikon */
  .hero-bag-img{
    width:92px;              /* büyüttüm (72 -> 92) */
    height:auto;
  
    /* biraz üste + sola al */
    position: relative;
    top: -6px;               /* üste (negatif) */
    left: -3px;              /* sola (negatif) */
  
    /* 20 derece sola rotate */
    transform: rotate(-20deg);
  
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.25));
  }
  
  /* mobilde orantılı küçült */
  @media (max-width:576px){
    .hero-bag-img{
      width:58px;
      top: -4px;
      left: -2px;
      transform: rotate(-18deg);
    }
  }
  
  
  .pdf-btn{
    display:inline-block;
    color:#4868ce;
    text-decoration:none;
    font-weight:600;
    text-indent:0px !important
  }
  .pdf-btn:hover{ opacity:.9; }

  @media (max-width: 576px){
    .hero-img{
      object-fit:cover;
      object-position: center top; /* yüz/başlık üstteyse çok iyi */
    }
  }