/* ============================================================
   FIMAK — servis-talebi.css
   Yalnizca servis-talebi.php'de yuklenir; style.css'i tamamlar.
   Sayfa hero'su paylasilan css/page-hero.css dosyasindadir; buradaki
   .st-hero onun altindaki tanitim bandidir.

   Bolumler
   1. Ortak kapsayici ve tanitim bandi
   2. Form alanlari (yuzen etiketli girdiler)
   3. Secim kartlari, garanti anahtari, dosya yukleme
   4. Gonderim ve sonuc ekrani
   5. Yan panel
   6. Giris animasyonlari
   7. Responsive (tum media query'ler burada)

   Olculer akiskan: clamp ile 375px -> 1920px arasi dogrusal buyur.
   Renkler style.css'teki :root degiskenlerinden okunur; tek istisna
   hata rengi, marka kirmizisiyla karismasin diye ayri tutuldu.
   ============================================================ */


/* ------------------------------------------------------------
   1. Ortak kapsayici ve tanitim bandi
   ------------------------------------------------------------ */
.st {
    --st-radius: 18px;
    --st-ease: cubic-bezier(0.22, 1, 0.36, 1);
    /* Hata rengi marka kirmizisindan ayri: "zorunlu alan" uyarisi ile
       markanin vurgu rengi ayni gorunmesin */
    --st-error: #d93025;

    /* style.css'teki govde degerlerini notrle */
    letter-spacing: normal;
    line-height: normal;
}

.st-wrap {
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: clamp(20px, 5vw, 80px);
}

.st-hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(40px, 5vw, 80px) clamp(48px, 5vw, 90px);
    background-color: var(--surface-alt);
}

/* Dev konturlu rakam: yalnizca dekor, metin olarak okunmaz */
.st-hero__num {
    position: absolute;
    right: clamp(-20px, 2vw, 60px);
    bottom: clamp(-60px, -3vw, -20px);
    z-index: 0;
    font-size: clamp(180px, 24vw, 420px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.06em;
    color: transparent;
    -webkit-text-stroke: 1.5px rgb(226 6 19 / 0.18);
    pointer-events: none;
    user-select: none;
}

.st-hero .st-wrap {
    position: relative;
    z-index: 1;
}

.st-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--brand);
}

.st-eyebrow b {
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 24px;
    padding: 0 8px;
    border-radius: 20px;
    background-color: var(--brand);
    font-size: 12px;
    letter-spacing: 0;
    color: #fff;
}

.st-hero h2 {
    max-width: 900px;
    margin-top: 18px;
    font-size: clamp(36px, 5vw, 88px);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -0.035em;
    color: var(--text);
    text-wrap: balance;
}

.st-hero h2 span { color: var(--text-secondary); }

.st-hero > .st-wrap > p {
    max-width: 620px;
    margin-top: clamp(18px, 2vw, 28px);
    font-size: clamp(16px, 1.05vw, 19px);
    line-height: 1.6;
    color: var(--text-secondary);
}

.st-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 980px;
    margin-top: clamp(36px, 4vw, 64px);
    list-style: none;
}

.st-steps li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 22px;
    border-radius: 14px;
    background-color: var(--surface);
}

.st-steps i {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--surface-alt);
    font-style: normal;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand);
}

.st-steps b {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.st-steps span {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.st-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 400px);
    align-items: start;
    gap: clamp(30px, 4vw, 72px);
    padding-block: clamp(48px, 5vw, 96px) clamp(70px, 7vw, 120px);
}


/* ------------------------------------------------------------
   2. Form alanlari
   Yuzen etiket: girdi bos degilse ya da odaktaysa etiket kucululup
   yukari kayar. placeholder=" " sart, :placeholder-shown bunu okur.
   ------------------------------------------------------------ */
.st-form h2 {
    font-size: clamp(26px, 2.4vw, 40px);
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--text);
}

.st-intro {
    margin-top: 10px;
    font-size: 15px;
    color: var(--text-secondary);
}

.st-sec {
    margin-top: clamp(36px, 3.4vw, 56px);
    padding-top: clamp(28px, 2.6vw, 40px);
    border-top: 1px solid var(--border);
}

.st-sec__head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 20px;
}

.st-sec__head i {
    font-style: normal;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand);
}

.st-sec__head h3 {
    font-size: clamp(18px, 1.3vw, 22px);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--text);
}

.st-sec__head small {
    margin-left: auto;
    font-size: 13px;
    color: var(--text-secondary);
}

.st-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.st-full { grid-column: 1 / -1; }

.st-field { position: relative; }

.st-field input,
.st-field select,
.st-field textarea {
    width: 100%;
    height: 58px;
    /* Ust bosluk yuzen etiketin inecegi yeri acik birakir */
    padding: 22px 18px 8px;
    /* Saydam kenarlik hep duruyor: odakta renk degisince alan zipllamaz */
    border: 1px solid transparent;
    border-radius: 12px;
    background-color: var(--surface-alt);
    font-family: inherit;
    font-size: 15px;
    color: var(--text);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.st-field textarea {
    height: 140px;
    padding-top: 28px;
    line-height: 1.55;
    resize: vertical;
}

.st-field label {
    position: absolute;
    top: 19px;
    left: 19px;
    font-size: 15px;
    color: var(--text-secondary);
    pointer-events: none;
    transform-origin: left top;
    transition: transform 0.25s var(--st-ease), color 0.25s ease;
}

.st-field input:focus,
.st-field select:focus,
.st-field textarea:focus {
    border-color: var(--brand);
    background-color: var(--surface);
    box-shadow: 0 0 0 4px rgb(226 6 19 / 0.08);
}

.st-field input:focus + label,
.st-field input:not(:placeholder-shown) + label,
.st-field textarea:focus + label,
.st-field textarea:not(:placeholder-shown) + label,
.st-field select:focus + label,
.st-field select.has-value + label { transform: translateY(-11px) scale(0.78); }

.st-field.is-select::after {
    content: "";
    position: absolute;
    top: 26px;
    right: 20px;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--text-secondary);
    border-bottom: 1.5px solid var(--text-secondary);
    transform: rotate(45deg);
    pointer-events: none;
}

.st-field.err input,
.st-field.err select,
.st-field.err textarea {
    border-color: var(--st-error);
    background-color: var(--surface);
}

.st-req { color: var(--brand); }


/* ------------------------------------------------------------
   3. Secim kartlari, garanti anahtari, dosya yukleme
   ------------------------------------------------------------ */
.st-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.st-opt {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 18px 18px 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background-color: var(--surface);
    cursor: pointer;
    transition: border-color 0.3s ease, background-color 0.3s ease,
        box-shadow 0.3s ease, transform 0.3s var(--st-ease);
}

.st-opt:hover {
    border-color: var(--text-secondary);
    transform: translateY(-1px);
}

/* Gercek girdi gizli; isaret kutusu onun yerine boyanir */
.st-opt input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.st-opt__mark {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border: 1.5px solid var(--border);
    border-radius: 7px;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

/* Tek secimlik alanda isaret daire olur */
.st-opt input[type="radio"] ~ .st-opt__mark { border-radius: 50%; }

.st-opt__mark svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: #fff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: scale(0);
    transition: transform 0.3s var(--st-ease);
}

.st-opt__text {
    font-size: 15px;
    line-height: 1.5;
    color: var(--text);
}

.st-opt__text small {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--text-secondary);
}

.st-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 20px;
    background-color: rgb(226 6 19 / 0.1);
    font-size: 11px;
    font-weight: 600;
    vertical-align: 2px;
    color: var(--brand);
}

.st-opt:has(input:checked) {
    border-color: var(--brand);
    background-color: #fff7f7;
    box-shadow: 0 8px 24px -16px rgb(226 6 19 / 0.5);
}

.st-opt input:checked ~ .st-opt__mark {
    border-color: var(--brand);
    background-color: var(--brand);
}

.st-opt input:checked ~ .st-opt__mark svg { transform: scale(1); }

.st-opt:has(input:focus-visible) {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.st-options.err .st-opt { border-color: var(--st-error); }


/* ---------- Garanti anahtari ---------- */
.st-warranty {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px;
    border-radius: 14px;
    background-color: var(--surface-alt);
}

.st-switch {
    position: relative;
    flex-shrink: 0;
    width: 50px;
    height: 30px;
    border-radius: 30px;
    background-color: var(--border);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.st-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 2px 6px rgb(0 0 0 / 0.2);
    transition: transform 0.35s var(--st-ease);
}

.st-switch input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.st-switch:has(input:checked) { background-color: var(--brand); }
.st-switch:has(input:checked)::after { transform: translateX(20px); }

.st-switch:has(input:focus-visible) {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}

.st-warranty b {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.st-warranty span {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* Grid satiri 0fr -> 1fr: yuksekligi bilmeden yumusak acilir */
.st-collapse {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s var(--st-ease);
}

.st-collapse > div { overflow: hidden; }
.st-collapse.is-open { grid-template-rows: 1fr; }


/* ---------- Dosya yukleme ---------- */
.st-drop {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 14px;
    padding: 18px 20px;
    border: 1.5px dashed var(--border);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.st-drop:hover,
.st-drop.is-over {
    border-color: var(--brand);
    background-color: #fff7f7;
}

/* Dosya girdisi gorunmez ama tum kutuyu kaplar: suruklemeyi de yakalar */
.st-drop input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.st-drop__icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background-color: var(--surface-alt);
    color: var(--brand);
}

.st-drop__icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.st-drop b {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.st-drop small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-secondary);
}

.st-drop.err { border-color: var(--st-error); }

.st-files {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.st-files span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 12px;
    border-radius: 20px;
    background-color: var(--surface-alt);
    font-size: 13px;
    color: var(--text);
}

.st-files button {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background-color: var(--border);
    font-size: 13px;
    line-height: 1;
    color: var(--text);
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.st-files button:hover {
    background-color: var(--brand);
    color: #fff;
}


/* ------------------------------------------------------------
   4. Gonderim ve sonuc ekrani
   ------------------------------------------------------------ */
.st-submit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: clamp(36px, 3.4vw, 52px);
    padding-top: clamp(28px, 2.6vw, 40px);
    border-top: 1px solid var(--border);
}

.st-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 460px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-secondary);
    cursor: pointer;
}

.st-check input {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    appearance: none;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.st-check input::before {
    content: "";
    width: 10px;
    height: 6px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translate(1px, -1px) scale(0);
    transition: transform 0.25s var(--st-ease);
}

.st-check input:checked {
    border-color: var(--brand);
    background-color: var(--brand);
}

.st-check input:checked::before { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.st-check.err input { border-color: var(--st-error); }

.st-check input:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.st-check a {
    font-weight: 500;
    color: var(--text);
    text-decoration: underline;
}

.st-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 58px;
    padding: 0 34px;
    border: 0;
    border-radius: 40px;
    background-color: var(--brand);
    box-shadow: 0 14px 30px -14px rgb(226 6 19 / 0.7);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s var(--st-ease),
        box-shadow 0.3s ease;
}

.st-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    transition: transform 0.4s var(--st-ease);
}

.st-btn:hover { background-color: var(--brand-dark); }
.st-btn:hover svg { transform: translateX(4px); }
.st-btn:active { transform: scale(0.98); }

.st-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

.st-btn:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 3px;
}

.st-msg {
    min-height: 20px;
    margin-top: 16px;
    font-size: 14px;
    color: var(--st-error);
}

.st-done {
    display: none;
    padding: clamp(40px, 5vw, 80px) 20px;
    border-radius: var(--st-radius);
    background-color: var(--surface-alt);
    text-align: center;
}

.st-done.is-on {
    display: block;
    animation: st-in 0.7s var(--st-ease);
}

@keyframes st-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
}

.st-done__icon {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin-inline: auto;
    border-radius: 50%;
    background-color: var(--brand);
    color: #fff;
}

/* Onay isareti cizilerek belirir */
.st-done__icon svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: st-draw 0.6s 0.3s var(--st-ease) forwards;
}

@keyframes st-draw {
    to { stroke-dashoffset: 0; }
}

.st-done h2 {
    margin-top: 24px;
    font-size: clamp(26px, 2.4vw, 38px);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
}

.st-done p {
    max-width: 520px;
    margin: 12px auto 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.st-done__ref {
    display: inline-block;
    margin-top: 22px;
    padding: 12px 22px;
    border-radius: 12px;
    background-color: var(--surface);
    font-size: 14px;
    color: var(--text-secondary);
}

.st-done__ref b {
    margin-left: 6px;
    letter-spacing: 0.06em;
    color: var(--text);
}

.st-done a {
    display: inline-block;
    margin-top: 26px;
    font-weight: 500;
    color: var(--brand);
    text-decoration: underline;
}


/* ------------------------------------------------------------
   5. Yan panel
   ------------------------------------------------------------ */
.st-aside {
    position: sticky;
    top: clamp(20px, 4vh, 40px);
    display: grid;
    gap: 12px;
}

.st-card {
    padding: clamp(24px, 2vw, 32px);
    border-radius: var(--st-radius);
    background-color: var(--surface-alt);
}

.st-card--dark {
    background-color: var(--text);
    color: #fff;
}

.st-card h4 {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.st-card--dark h4 { color: rgb(255 255 255 / 0.55); }

.st-card__phone {
    display: block;
    margin-top: 12px;
    font-size: clamp(24px, 1.9vw, 30px);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #fff;
    transition: color 0.3s ease;
}

.st-card__phone:hover { color: #ffb3b6; }

.st-card__phone:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.st-card p {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.st-card--dark p { color: rgb(255 255 255 / 0.65); }

.st-card ul {
    display: grid;
    gap: 10px;
    margin-top: 14px;
    list-style: none;
}

.st-card li {
    display: flex;
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
}

.st-card li::before {
    content: "";
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    margin-top: 8px;
    border-radius: 50%;
    background-color: var(--brand);
}

.st-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    transition: color 0.3s ease;
}

.st-link svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    transition: transform 0.35s var(--st-ease);
}

.st-link:hover { color: var(--brand); }
.st-link:hover svg { transform: translate(3px, -3px); }

.st-link:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}


/* ------------------------------------------------------------
   6. Giris animasyonlari
   Baslangic durumlari yalnizca html.js altinda: JS yoksa her sey
   dogrudan gorunur. is-in kurallari da html.js altinda, yoksa
   ozgulluk acilis kuralini ezemez.
   ------------------------------------------------------------ */
html.js .st-reveal {
    opacity: 0;
    transform: translateY(20px);
}

html.js .st-reveal.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.8s var(--st-ease), transform 0.8s var(--st-ease);
    transition-delay: var(--d, 0ms);
}


/* ------------------------------------------------------------
   7. Responsive
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
    .st-body { grid-template-columns: 1fr; }

    .st-aside {
        position: static;
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 760px) {
    .st-steps { grid-template-columns: 1fr; }

    .st-grid,
    .st-options { grid-template-columns: 1fr; }

    .st-aside { grid-template-columns: 1fr; }

    .st-submit-row {
        flex-direction: column;
        align-items: stretch;
    }

    .st-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {

    .st-field input,
    .st-field select,
    .st-field textarea,
    .st-field label,
    .st-opt,
    .st-opt__mark,
    .st-opt__mark svg,
    .st-switch,
    .st-switch::after,
    .st-collapse,
    .st-drop,
    .st-files button,
    .st-check input,
    .st-check input::before,
    .st-btn,
    .st-btn svg,
    .st-card__phone,
    .st-link,
    .st-link svg { transition: none; }

    .st-done.is-on { animation: none; }

    /* Onay isareti animasyonsuz da gorunur kalmali */
    .st-done__icon svg {
        stroke-dashoffset: 0;
        animation: none;
    }

    html.js .st-reveal {
        opacity: 1;
        transform: none;
    }

    html.js .st-reveal.is-in { transition: none; }
}