/* ==========================================================================
   eor-extra.css

   employer-of-record-turkey.html icin ek stiller.
   Mevcut style.css dosyani DEGISTIRME, bu ayri bir dosya.
   Sayfa zaten cagiriyor:
       <link href="./eor-extra.css" rel="stylesheet">

   Uc bolum:
     1. Derlenmis style.css'te bulunmayan Tailwind siniflari
     2. Excel gorunumlu panel stilleri (xl-*)
     3. Rehber blogu ve e-posta formu (guide-*)
   ========================================================================== */


/* ==========================================================================
   1. EKSIK TAILWIND SINIFLARI
   ========================================================================== */

.pt-5         { padding-top: 1.25rem; }
.pb-5         { padding-bottom: 1.25rem; }
.top-28       { top: 7rem; }
.scroll-mt-24 { scroll-margin-top: 6rem; }
.grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bg-gray-100  { background-color: #f2f4f7; }

@media (min-width: 640px) {
    .sm\:gap-4 { gap: 1rem; }
}

@media (min-width: 768px) {
    .md\:justify-between { justify-content: space-between; }
    .md\:gap-12          { gap: 3rem; }
    .md\:pt-16           { padding-top: 4rem; }
    .md\:grid-cols-2     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .lg\:w-\[220px\] { width: 220px; }
}

@media (min-width: 1280px) {
    .xl\:w-\[260px\] { width: 260px; }
    .xl\:gap-16      { gap: 4rem; }
}


/* ==========================================================================
   2. EXCEL PANELLERI
   ========================================================================== */

.xl-panel {
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
}

.xl-head {
    padding: 9px 14px;
    background: #f2f4f7;
    border-bottom: 1px solid #e4e7ec;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #667085;
}

.xl-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 14px;
    border-top: 1px solid #f2f4f7;
}

.xl-row:first-of-type { border-top: 0; }

.xl-lbl {
    font-size: 14px;
    color: #475467;
    line-height: 1.4;
}

.xl-per {
    display: inline-block;
    margin-left: 6px;
    font-size: 11px;
    color: #98a2b3;
    white-space: nowrap;
}

.xl-val {
    font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
    font-weight: 600;
    color: #101828;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
}

.xl-total {
    background: #fcfcfd;
    border-top: 1px solid #e4e7ec;
}

.xl-total .xl-lbl { font-weight: 600; color: #101828; }
.xl-total .xl-val { color: #1570ef; }

@media (max-width: 420px) {
    .xl-lbl { font-size: 13px; }
    .xl-val { font-size: 13px; }
    .xl-per { display: block; margin-left: 0; }
}


/* ==========================================================================
   3. REHBER BLOGU VE E-POSTA FORMU
   ========================================================================== */

/* --- Ust etiket --- */
.guide-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    margin-bottom: 14px;
    background: #ecfdf3;
    border: 1px solid #abefc6;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #067647;
}

.guide-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #17b26a;
    flex-shrink: 0;
}

/* --- Tikli liste --- */
.guide-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

.guide-list li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 9px;
    font-size: 15px;
    line-height: 1.5;
    color: #475467;
}

.guide-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 17px;
    height: 17px;
    border-radius: 999px;
    background-color: #eff8ff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 16 16'%3E%3Cpath fill='%231570ef' d='M14.29 2.614a1 1 0 0 0-1.58-1.228L6.407 9.492l-3.199-3.2a1 1 0 1 0-1.414 1.415l4 4a1 1 0 0 0 1.496-.093l7-9Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* --- Ayirici --- */
.guide-sep {
    height: 1px;
    background: #e4e7ec;
    margin: 0 0 18px;
}

/* --- Form --- */
.guide-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #344054;
    margin-bottom: 7px;
}

.guide-field {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.guide-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 14px;
    font-size: 15px;
    color: #101828;
    background: #ffffff;
    border: 1px solid #d0d5dd;
    border-radius: 9px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.guide-input::placeholder { color: #98a2b3; }

.guide-input:focus {
    border-color: #1570ef;
    box-shadow: 0 0 0 3px rgba(21, 112, 239, 0.12);
}

.guide-btn {
    flex: 0 0 auto;
    padding: 10px 18px;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    background-image: linear-gradient(to top, #155dfc, #2b7fff);
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    white-space: nowrap;
    transition: filter 0.15s;
}

.guide-btn:hover { filter: brightness(1.08); }

/* --- Riza kutusu --- */
.guide-consent {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #667085;
    cursor: pointer;
}

.guide-consent input {
    flex: 0 0 auto;
    margin-top: 2px;
    width: 15px;
    height: 15px;
    accent-color: #1570ef;
    cursor: pointer;
}

.guide-consent a {
    color: #1570ef;
    text-decoration: none;
}

.guide-consent a:hover { text-decoration: underline; }

/* --- Dar ekran --- */
@media (max-width: 480px) {
    .guide-field { flex-direction: column; }
    .guide-btn { width: 100%; }
}