/* =====================================================
   CORE UI — KlinikDiyetisyenim
   Ortak başlık, metin, form stilleri
===================================================== */

:root{
    --green:#2E7D32;
    --green-dark:#1b5e20;
    --border-soft:rgba(0,0,0,.15);
    --radius:16px;
    --text:#1a1a1a;
}

/* ===== TYPOGRAPHY ===== */
body{
    font-family:'Inter',sans-serif;
    color:var(--text);
}

h1{
    font-size:30px;
    font-weight:800;
    color:var(--green);
    margin:0 0 16px;
}

h2{
    font-size:22px;
    font-weight:700;
    color:var(--green);
    margin:24px 0 12px;
}

p{
    font-size:15.5px;
    line-height:1.7;
    margin:10px 0;
}

/* ===== PANEL WRAPPER ===== */
.panel-wrapper{
    max-width:900px;
    margin:0 auto;
}

/* ===== FORM ===== */
.form{
    display:grid;
    gap:14px;
    margin-top:10px;
}

.form input,
.form textarea{
    width:100%;
    padding:14px 16px;
    font-size:15px;
    border-radius:var(--radius);
    border:1px solid var(--border-soft);
    outline:none;
    transition:border .2s ease, box-shadow .2s ease;
    background:#fff;
}

.form input:focus,
.form textarea:focus{
    border-color:var(--green);
    box-shadow:0 0 0 2px rgba(46,125,50,.15);
}

.form textarea{
    resize:vertical;
    min-height:120px;
}

/* ===== BUTTON ===== */
.btn-primary{
    margin-top:6px;
    padding:14px;
    border-radius:var(--radius);
    border:none;
    background:linear-gradient(180deg,var(--green),var(--green-dark));
    color:#fff;
    font-size:15.5px;
    font-weight:700;
    cursor:pointer;
}

.btn-primary:hover{
    filter:brightness(1.05);
}

/* ===== LINK ===== */
a{
    color:var(--green);
    text-decoration:none;
}
a:hover{
    text-decoration:underline;
}

/* ===== MOBILE ===== */
@media(max-width:640px){
    h1{font-size:26px;}
    h2{font-size:20px;}
    p{font-size:15px;}
}
.form select{
    width:100%;
    padding:14px 16px;
    font-size:15px;
    border-radius:var(--radius);
    border:1px solid var(--border-soft);
    background:#fff;
}
/* =====================================================
   iOS STYLE VIP FORM — KlinikDiyetisyenim
===================================================== */

/* FORM GRID */
.form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-top:20px;
}

/* FULL WIDTH */
.form textarea,
.form select,
.form button,
.form .full{
    grid-column:1 / -1;
}

/* INPUT & SELECT */
.form input,
.form select,
.form textarea{
    appearance:none;
    -webkit-appearance:none;

    width:100%;
    padding:14px 16px;
    font-size:15.5px;
    font-weight:500;

    border-radius:14px;
    border:1px solid rgba(0,0,0,.15);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.95),
            rgba(255,255,255,.85)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.8),
        0 4px 14px rgba(0,0,0,.06);

    transition:
        border .2s ease,
        box-shadow .2s ease,
        transform .15s ease;
}

/* PLACEHOLDER */
.form input::placeholder,
.form textarea::placeholder{
    color:#8e8e93; /* iOS gray */
}

/* FOCUS */
.form input:focus,
.form select:focus,
.form textarea:focus{
    outline:none;
    border-color:#2E7D32;
    box-shadow:
        0 0 0 3px rgba(46,125,50,.18),
        0 10px 26px rgba(0,0,0,.12);
}

/* TEXTAREA */
.form textarea{
    min-height:130px;
    resize:vertical;
}

/* SELECT ARROW */
.form select{
    background-image:
        linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.85)),
        url("data:image/svg+xml;utf8,<svg fill='%23666' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat:no-repeat;
    background-position:right 14px center;
    background-size:18px;
    padding-right:42px;
}

/* BUTTON */
.form button{
    margin-top:6px;
    padding:15px;

    font-size:16px;
    font-weight:700;
    letter-spacing:.2px;

    border-radius:16px;
    border:none;

    color:#fff;
    background:
        linear-gradient(
            180deg,
            #34C759, /* iOS green */
            #2E7D32
        );

    box-shadow:
        0 10px 28px rgba(52,199,89,.35);

    cursor:pointer;
    transition:
        transform .15s ease,
        box-shadow .15s ease,
        filter .15s ease;
}

/* BUTTON HOVER */
.form button:hover{
    transform:translateY(-1px);
    box-shadow:0 16px 36px rgba(52,199,89,.45);
    filter:brightness(1.04);
}

/* BUTTON ACTIVE */
.form button:active{
    transform:translateY(0);
    box-shadow:0 8px 18px rgba(52,199,89,.35);
}

/* RESULT TEXT */
#formResult{
    grid-column:1 / -1;
    margin-top:6px;
    font-size:14.5px;
}

/* MOBILE */
@media(max-width:720px){
    .form{
        grid-template-columns:1fr;
    }

    .form input,
    .form select,
    .form textarea{
        font-size:16px; /* iOS zoom fix */
    }
}

