/* =====================================================
   errata.css
   Alice Law Version 10
   Errata & Suggestion System
   © Han Erim
===================================================== */

#errata_system{

    margin:25px 0;

    border:1px solid #bfbfbf;

    border-radius:6px;

    background:#fafafa;

    overflow:hidden;

}


/*-----------------------------------------------------
    Aç / Kapat Butonu
-----------------------------------------------------*/

#errata_toggle{
    width:100%;
    padding:14px 20px;

    border:none;
    background:#f2f2f2;
    cursor:pointer;

    font-family:"Times New Roman", Georgia, Garamond, serif;
    font-size:18px;
    line-height:1.2;
    font-weight:bold;

    color:#003366;
    text-align:left;

    transition:background .25s;
}

#errata_toggle:hover{
    background:#e7e7e7;
}

#errata_arrow{
    display:inline;
    width:auto;
    margin-left:4px;

    font-family:"Times New Roman", Georgia, Garamond, serif;
    font-size:18px;
    line-height:1;
    font-weight:bold;

    color:#b30202;
    vertical-align:baseline;
}


/*-----------------------------------------------------
    Panel
-----------------------------------------------------*/

#errata_panel{

    padding:20px;

    border-top:1px solid #d0d0d0;

    background:white;

}


/*-----------------------------------------------------
    Başlık
-----------------------------------------------------*/

#errata_panel h2{

    margin:0 0 15px 0;

    text-align:center;

    font-size:22px;

    color:#003366;

}

/*-----------------------------------------------------
    Açıklama
-----------------------------------------------------*/

#errata_panel p{

    margin-bottom:20px;

    line-height:1.6;

    text-align:center;

    color:#444;

}


/*-----------------------------------------------------
    Form
-----------------------------------------------------*/

#errata_form{

    width:100%;

}


/*-----------------------------------------------------
    Etiketler
-----------------------------------------------------*/

#errata_form label{

    display:block;

    margin-top:15px;

    margin-bottom:6px;

    font-weight:bold;

    color:#333;

}


/*-----------------------------------------------------
    Input
-----------------------------------------------------*/

#errata_form input,
#errata_form select,
#errata_form textarea{

    width:100%;
    box-sizing:border-box;

    padding:10px;
    margin-bottom:8px;

    border:1px solid #999;
    border-radius:4px;

    font-size:16px;
    font-family:Arial, Helvetica, sans-serif;

    background:white;

}


/*-----------------------------------------------------
    Focus
-----------------------------------------------------*/

#errata_form input:focus,

#errata_form select:focus,

#errata_form textarea:focus{

    outline:none;

    border-color:#0066cc;

    box-shadow:0 0 4px rgba(0,102,204,.25);

}


/*-----------------------------------------------------
    Textarea
-----------------------------------------------------*/

#errata_form textarea{

    resize:vertical;

    min-height:220px;

}


/*-----------------------------------------------------
    Gönder Butonu
-----------------------------------------------------*/

#errata_form button{

    margin-top:20px;

    padding:10px 30px;

    border:none;

    border-radius:5px;

    background:#0055aa;

    color:white;

    font-size:17px;

    font-weight:bold;

    cursor:pointer;

    transition:background .25s;

}

#errata_form button:hover{

    background:#003f80;

}


/*-----------------------------------------------------
    Sonuç
-----------------------------------------------------*/

#errata_result{

    margin-top:15px;

    font-weight:bold;

    color:#006600;

}

#errata_arrow{

    display:inline-block;

    width:24px;

    font-size:16px;

    vertical-align:middle;

}

/*-----------------------------------------------------
    Mobil
-----------------------------------------------------*/

@media screen and (max-width:768px){

    #errata_toggle{

        font-size:18px;

    }

    #errata_panel{

        padding:15px;

    }

    #errata_panel h2{

        font-size:20x;

    }

}
/*-----------------------------------------------------
    Sayfa değerlendirmesi ve paylaşım
    Yalnızca sayfanın kendisine aittir.
-----------------------------------------------------*/

.page_reactions{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px 14px;

    margin:0 0 18px 0;
    padding:12px 16px;

    border:1px solid #d1d1d1;
    border-radius:6px;
    background:#f7f7f7;

    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#333;
}

.page_reactions_question{
    font-family:"Times New Roman", Georgia, Garamond, serif;
    font-size:16px;
    font-weight:bold;
    color:#003366;
}

.page_reactions_buttons{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
}

.page_reaction_group{
    display:inline-flex;
    align-items:center;
    min-height:36px;

    border:1px solid #d2d2d2;
    border-radius:18px;
    background:#fff;
    overflow:hidden;
}

.page_reaction_button,
.page_share_button{
    height:34px;
    padding:0 13px;

    border:0;
    background:#fff;

    color:#1f1f1f;
    font:inherit;
    cursor:pointer;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;

    transform:translateZ(0);
    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease,
        box-shadow .18s ease,
        transform .08s ease;
}

.page_share_button{
    min-height:36px;
    height:36px;
    border:1px solid #d2d2d2;
    border-radius:18px;
}

.page_reaction_divider{
    width:1px;
    height:22px;
    background:#d9d9d9;
    flex:0 0 1px;
}

.page_action_icon{
    width:19px;
    height:19px;
    display:block;
    flex:0 0 auto;

    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.page_share_icon{
    width:20px;
    height:20px;
}

.page_reaction_button:hover,
.page_share_button:hover{
    background:#ececec;
    color:#111;
}

.page_reaction_button:active,
.page_share_button:active{
    transform:scale(.96);
}

.page_reaction_button:focus-visible,
.page_share_button:focus-visible{
    outline:2px solid #0066cc;
    outline-offset:-2px;
}

.page_reaction_button.is_selected{
    background:#fff;
    color:#1f1f1f;
}

.page_reaction_button.is_selected .page_action_icon{
    fill:none;
}

.page_reaction_button:disabled{
    opacity:.6;
    cursor:wait;
}

.page_reaction_count{
    display:inline-block;
    min-width:1em;
    font-weight:bold;
    text-align:center;
}

.page_share_status{
    min-height:1em;
    color:#006600;
    font-weight:bold;
}


.page_reaction_button.is_just_selected .page_action_icon{
    animation:page-reaction-pop .22s ease-out;
}

.page_reaction_count.is_count_changed{
    animation:page-count-fade .22s ease-out;
}

@keyframes page-reaction-pop{
    0%{ transform:scale(.88); }
    55%{ transform:scale(1.14); }
    100%{ transform:scale(1); }
}

@keyframes page-count-fade{
    0%{ opacity:0; transform:translateY(2px); }
    100%{ opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion:reduce){
    .page_reaction_button,
    .page_share_button{
        transition:none;
    }

    .page_reaction_button.is_just_selected .page_action_icon,
    .page_reaction_count.is_count_changed{
        animation:none;
    }
}

@media screen and (max-width:600px){
    .page_reactions{
        align-items:flex-start;
        flex-direction:column;
    }
}