/* ====================================================
   Güzellik & Bakım – Frontend Survey CSS
   Tema override korumalı: input'lar gizli,
   görsel tamamen CSS ::before ile yapılıyor
==================================================== */
:root {
    --p:  #c8356b;
    --pd: #9e1f52;
    --pl: #f8e8ef;
    --ok: #2e7d32;
    --bd: #e0d0d8;
    --r:  12px;
}

#ga-wrap { max-width:860px; margin:0 auto; padding:24px 18px 60px; font-family:'Segoe UI',Arial,sans-serif; color:#1a1a1a; }

#ga-progress-wrap { background:var(--bd); border-radius:99px; height:8px; overflow:hidden; margin-bottom:6px; }
#ga-progress-bar  { height:100%; background:var(--p); transition:width .4s ease; border-radius:99px; }
#ga-step-label    { font-size:13px; color:#888; text-align:right; margin-bottom:20px; }

.ga-step { display:none; }
.ga-step.active { display:block; animation:gafade .35s ease; }
@keyframes gafade { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

.ga-step-title { font-size:1.35rem; font-weight:700; color:var(--p); border-bottom:2px solid var(--pl); padding-bottom:10px; margin-bottom:22px; }

.ga-field { margin-bottom:16px; }
.ga-field label { display:block; font-weight:600; margin-bottom:5px; font-size:15px; }
.ga-field input[type=text],
.ga-field input[type=email],
.ga-field input[type=tel] {
    width:100%; padding:12px 14px; font-size:15px;
    border:1.5px solid var(--bd); border-radius:var(--r);
    box-sizing:border-box; background:#fff; transition:border-color .2s;
}
.ga-field input:focus { border-color:var(--p); outline:none; }
.req { color:var(--p); }

.ga-question {
    background:#fff; border:1px solid var(--bd);
    border-radius:var(--r); padding:18px 20px; margin-bottom:14px;
    box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.ga-q-invalid { border-color:#f44336 !important; box-shadow:0 0 0 2px rgba(244,67,54,.15) !important; }
.ga-qt { font-size:15px; font-weight:600; margin:0 0 14px; line-height:1.5; }

/* ===== CUSTOM RADIO / CHECKBOX ===== */
.ga-opts { display:flex; flex-direction:column; gap:8px; }
.ga-opts.ga-row { flex-direction:row; flex-wrap:wrap; }

.ga-radio,
.ga-check {
    display:flex;
    align-items:center;
    cursor:pointer;
    padding:11px 14px 11px 46px;
    border:1.5px solid var(--bd);
    border-radius:8px;
    background:#fafafa;
    font-size:15px;
    line-height:1.4;
    transition:border-color .2s, background .2s;
    position:relative;
    user-select:none;
}
.ga-radio:hover,
.ga-check:hover { border-color:var(--p); background:var(--pl); }

/* Gerçek input tamamen gizle */
.ga-radio input,
.ga-check input {
    position:absolute !important;
    opacity:0 !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    pointer-events:none !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
}

/* Custom kutu */
.ga-radio::before,
.ga-check::before {
    content:'';
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    width:20px;
    height:20px;
    border:2px solid #bbb;
    background:#fff;
    border-radius:50%;
    box-sizing:border-box;
    transition:all .15s;
}
.ga-check::before { border-radius:5px; }

/* Seçili hale gelmesi - JS ekler .ga-selected sınıfını */
.ga-radio.ga-selected,
.ga-check.ga-selected { border-color:var(--p); background:var(--pl); }

.ga-radio.ga-selected::before,
.ga-check.ga-selected::before { background:var(--p); border-color:var(--p); }

/* Radio iç nokta */
.ga-radio.ga-selected::after {
    content:'';
    position:absolute;
    left:22px;
    top:50%;
    transform:translateY(-50%);
    width:8px;
    height:8px;
    border-radius:50%;
    background:#fff;
}

/* Checkbox tik */
.ga-check.ga-selected::after {
    content:'';
    position:absolute;
    left:20px;
    top:50%;
    transform:translateY(-65%) rotate(45deg);
    width:5px;
    height:10px;
    border:2px solid #fff;
    border-top:none;
    border-left:none;
}

/* ===== RATING 5 ===== */
.ga-rating { display:flex; flex-wrap:wrap; gap:8px; }

.ga-rate-opt {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    cursor:pointer;
    padding:10px 12px;
    border:1.5px solid var(--bd);
    border-radius:8px;
    background:#fafafa;
    font-size:13px;
    min-width:76px;
    text-align:center;
    transition:border-color .2s, background .2s;
    position:relative;
    user-select:none;
}
.ga-rate-opt:hover { border-color:var(--p); background:var(--pl); }

.ga-rate-opt input {
    position:absolute !important;
    opacity:0 !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    pointer-events:none !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
}

/* Custom daire */
.ga-rate-dot {
    display:block;
    width:18px;
    height:18px;
    border:2px solid #bbb;
    border-radius:50%;
    background:#fff;
    box-sizing:border-box;
    transition:all .15s;
    position:relative;
    flex-shrink:0;
}

.ga-rate-opt.ga-selected { border-color:var(--p); background:var(--pl); font-weight:600; }
.ga-rate-opt.ga-selected .ga-rate-dot { background:var(--p); border-color:var(--p); }
.ga-rate-opt.ga-selected .ga-rate-dot::after {
    content:'';
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:6px; height:6px;
    border-radius:50%;
    background:#fff;
}

/* ===== TEXT INPUTS ===== */
.ga-question input[type=text],
.ga-question input[type=email],
.ga-question textarea {
    width:100%; padding:10px 12px; font-size:14px;
    border:1.5px solid var(--bd); border-radius:8px;
    background:#fff; box-sizing:border-box; transition:border-color .2s;
    margin-top:6px;
}
.ga-question input[type=text]:focus,
.ga-question input[type=email]:focus,
.ga-question textarea:focus { border-color:var(--p); outline:none; }

/* ===== NAVİGASYON ===== */
#ga-nav { display:flex; gap:12px; margin-top:28px; justify-content:flex-end; }
.ga-btn { padding:13px 26px; font-size:15px; font-weight:600; border:none; border-radius:var(--r); cursor:pointer; transition:background .2s, transform .1s; }
.ga-btn:active { transform:scale(.97); }
.ga-btn-pri { background:var(--p); color:#fff; }
.ga-btn-pri:hover { background:var(--pd); }
.ga-btn-sec { background:#eee; color:#333; }
.ga-btn-sec:hover { background:#ddd; }
.ga-btn-ok  { background:var(--ok); color:#fff; }
.ga-btn-ok:hover { background:#1b5e20; }
.ga-btn:disabled { opacity:.6; cursor:not-allowed; }

#ga-err { background:#fdecea; border:1px solid #f44336; color:#b71c1c; padding:12px 16px; border-radius:8px; margin-top:12px; font-size:14px; }
.ga-invalid { border-color:#f44336 !important; }

#ga-thanks { text-align:center; padding:60px 20px; }
.ga-thanks-box { max-width:460px; margin:0 auto; }
.ga-check-icon { width:72px;height:72px;background:var(--ok);color:#fff;font-size:36px;line-height:72px;border-radius:50%;margin:0 auto 20px; text-align:center; }
.ga-thanks-box h2 { font-size:1.8rem; color:var(--p); margin-bottom:10px; }
.ga-thanks-box p  { font-size:15px; color:#555; line-height:1.6; }

@media(max-width:580px){
    .ga-rating { justify-content:flex-start; }
    #ga-nav { flex-direction:column; }
    .ga-btn { width:100%; text-align:center; }
    .ga-rate-opt { min-width:60px; font-size:12px; padding:8px; }
}

/* ===== MATRİS TABLO ===== */
.ga-matrix-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 4px;
}
.ga-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    min-width: 360px;
}
.ga-matrix thead th {
    background: var(--pl);
    color: var(--p);
    font-weight: 700;
    font-size: 13px;
    padding: 8px 10px;
    text-align: center;
    border: 1px solid var(--bd);
    white-space: nowrap;
}
.ga-matrix thead th:first-child { text-align: left; min-width: 160px; }

.ga-matrix tbody tr:nth-child(even) { background: #fafafa; }
.ga-matrix tbody tr:hover { background: var(--pl); }

.ga-matrix-label {
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--bd);
    color: #333;
}
.ga-matrix-cell {
    padding: 8px 6px;
    text-align: center;
    border: 1px solid var(--bd);
}

/* Gizli input */
.ga-matrix-radio { display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.ga-matrix-radio input {
    position:absolute !important;
    opacity:0 !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    pointer-events:none !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
}

/* Custom daire */
.ga-matrix-dot {
    display: block;
    width: 20px;
    height: 20px;
    border: 2px solid #bbb;
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
    transition: all .15s;
    position: relative;
    margin: 0 auto;
}
.ga-matrix-radio.ga-selected .ga-matrix-dot {
    background: var(--p);
    border-color: var(--p);
}
.ga-matrix-radio.ga-selected .ga-matrix-dot::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #fff;
}

/* Tablo satırı seçilince highlight */
.ga-matrix tbody tr.ga-row-answered .ga-matrix-label { color: var(--p); font-weight: 600; }

@media(max-width:580px){
    .ga-matrix thead th, .ga-matrix-label { font-size:12px; padding:6px 8px; }
    .ga-matrix-cell { padding:6px 4px; }
    .ga-matrix-dot { width:18px; height:18px; }
}